Posted Widgets11 minutes read (About 1645 words)

Icarus User Guide - Widgets

This article covers widgets supported by Icarus. To display multiple widgets at once, simply add individual widget configuration to the widgets array. They will appear in the order of their definitions. The type and position settings are required for every widget. Here is an example:

_config.icarus.yml
1
2
3
4
5
6
7
8
9
widgets:
    -
        type: ... # Widget 1
        position: left
        ...
    -
        type: ... # Widget 2
        position: right
        ...
The following widgets are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported widgets and their configuration details.

Widgets with position: left are placed in the left sidebar, and those with position: right in the right sidebar. A page has two columns when only one of the sidebars has widgets, and three columns when both of them do. In the three-column layout, the right sidebar is only shown on wide screens (1280px and wider). On smaller screens, its widgets are moved to the bottom of the left sidebar.

To disable all widgets, set widgets to null in your theme configurations. Like other theme settings, widgets can also be set in the layout configuration files (_config.post.yml and _config.page.yml) or in the front-matter of a post or page, so you can turn off widgets only for some pages:

_config.icarus.yml
1
widgets: null

Profile

You can showcase the post author/site admin information via the profile widget. Its configuration is listed below:

_config.icarus.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
widgets:
    -
        position: right
        type: profile
        # Author name
        author: hulatocat
        # Title of the author
        author_title: A GitHub Octocat
        # Author location/organization
        location: GitHub Inc.
        # URL or path of the avatar/profile picture
        avatar: /img/avatar.png
        # Whether to show a round clip of the avatar
        avatar_rounded: false
        # Email address of your Gravatar account. Takes precedence over `avatar` when set
        gravatar:
        # The follow link URL
        follow_link: 'https://octodex.github.com/hulatocat'
        # Social media link URLs
        social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/'
            Icarus: 'https://github.com/ppoffice/hexo-theme-icarus'

Some notes on the configuration:

  • If author is not set, the author in the site configuration file _config.yml is shown instead.

  • If you wish to use Gravatar as your profile picture, fill in the Gravatar email address in the gravatar setting. When gravatar is set, it is used even if avatar is also set. If neither of them is set, no picture is shown.

  • There are two acceptable formats for social_links:

    Icon:

    social_links
    1
    2
    3
    <link_name>:
        icon: <fontawesome_icon_class_name>
        url: <link_url>

    Text:

    social_links
    1
    <link_name>: <link_url>

Table of Contents

To show the table of contents of the current post, add the following widget configuration to your theme configurations:

_config.icarus.yml
1
2
3
4
5
6
7
widgets:
    -
        type: toc
        position: left
        index: true         # Optional. Whether to number each table of contents item. Defaults to `true`.
        collapsed: true     # Optional. Whether to hide the sub-headings of the sections that are not being read. Defaults to `true`.
        depth: 3            # Optional. The number of heading levels to show. Defaults to `3`.

Then, add toc: true to the front-matter of your post or page:

Post.md
1
2
3
4
title: A post with the table of contents
toc: true
---
Post content...

Some notes on the table of contents widget:

  • The widget is only shown on posts and pages that have toc: true in their front-matter. On other pages, it takes no space, and its sidebar is removed if it has no other widgets.
  • depth counts the heading levels that the post actually uses, starting from the highest one. For example, with depth: 2, a post whose headings start at ## shows its ## and ### headings.
  • While your visitors read the post, the entry of the current section is highlighted and kept in view in the table of contents.
  • On mobile phones, the widget is hidden from the page. Instead, a button in the navigation bar opens the table of contents on top of the page.

You can display a list of external sites with the external links widget. An example configuration is listed below:

_config.icarus.yml
1
2
3
4
5
6
7
8
widgets:
    -
        position: left
        type: links
        # Name and URL of the external site
        links:
            Hexo: 'https://hexo.io'
            Bulma: 'https://bulma.io'

The hostname of each site is shown next to its name. To hide it for a site, write the site as an object with the link and hide_hostname settings:

_config.icarus.yml
1
2
3
4
5
6
7
8
9
widgets:
    -
        position: left
        type: links
        links:
            Hexo: 'https://hexo.io'
            Bulma:
                link: 'https://bulma.io'
                hide_hostname: true

GitHub Contribution Calendar

The GitHub contribution calendar widget shows the recent contributions of a GitHub user. It loads the data from the third-party GitHub Contributions API service, so no GitHub token is needed. Its configuration is listed below:

_config.icarus.yml
1
2
3
4
5
6
7
8
9
10
widgets:
    -
        position: left
        type: github_calendar
        # GitHub username. Leave empty to hide this widget
        username: ppoffice
        # Widget title. Leave empty to use the translated default
        title:
        # Optional six-digit hex color, for example '#40c463'. Leave empty to use the theme's calendar palette
        color:

Recent Posts

Use the following configuration to enable the recent posts widget:

_config.icarus.yml
1
2
3
4
5
widgets:
    -
        position: right
        type: recent_posts
        limit: 5            # Optional. The number of recent posts to show. Defaults to 5.

Archives

Use the following configuration to enable the archives widget:

_config.icarus.yml
1
2
3
4
5
6
7
8
9
widgets:
    -
        position: right
        type: archives
        group_by: monthly   # Optional. Group the archives by month (`monthly`) or by year (`yearly`). Defaults to `monthly`.
        order: -1           # Optional. `-1` to show the newest archives first, or `1` to show the oldest first. Defaults to `-1`.
        format:             # Optional. Moment.js format of the archive names. Defaults to `MMMM YYYY` (monthly) or `YYYY` (yearly).
        amount: 10          # Optional. The maximum number of archives to show. Leave empty to show all.
        show_count: true    # Optional. Whether to show the number of posts of each archive. Defaults to `true`.

If amount is set and there are more archives than that, a “More” link to the archive page is added to the end of the list. The show_count setting requires hexo-component-inferno 4.2.0 or later.

Categories

Use the following configuration to enable the categories widget:

_config.icarus.yml
1
2
3
4
5
6
7
8
9
10
widgets:
    -
        position: right
        type: categories
        order_by: name      # Optional. Order by category name (`name`) or number of posts (`length`). Defaults to `name`.
        order: 1            # Optional. `1` for ascending order, or `-1` for descending order. Defaults to `1`.
        depth: 0            # Optional. Levels of categories to show, e.g., `1` for top-level categories only. `0` or empty shows all levels.
        show_current: false # Optional. Whether to highlight the categories of the current post. Defaults to `false`.
        amount: 10          # Optional. The maximum number of top-level categories to show. Leave empty to show all.
        show_count: true    # Optional. Whether to show the number of posts of each category. Defaults to `true`.

If amount is set and there are more top-level categories than that, a “More” link to the categories page is added to the end of the list. The order_by, depth, show_current, and show_count settings require hexo-component-inferno 4.2.0 or later.

Tags

Use the following configuration to enable the tags widget:

_config.icarus.yml
1
2
3
4
5
6
7
widgets:
    -
        position: right
        type: tags
        order_by: name      # Optional. Order by tag name (`name`) or number of posts (`length`). Prefix with `-` to sort in descending order. Defaults to `name`.
        amount: 20          # Optional. The maximum number of tags to show. Leave empty to show all.
        show_count: true    # Optional. Whether to show the number of posts right to each tag name. Defaults to `true`.

If amount is set and there are more tags than that, a “More” link to the tags page is added to the end of the list.

follow.it

To enable follow.it email subscription widget, take the following steps:

  1. First, you need to generate the RSS feed of your Hexo site using a Hexo plugin like hexo-generator-feed.

  2. Go to follow.it and enter the URL to your RSS feed file in the text input under “Add the follow feature to your site”, e.g., http://example.com/atom.xml. Then, click “Next”.

    Enter Feed URL - follow.it

  3. Click the “Continue” button on the “Define the follow form’s design” page.

    Create Form - follow.it

  4. Search for action= and copy the link between double quotes after action=. Paste the action link you copied to the action_url setting of the widget configuration. After that, click “Done”.

    Copy Action URL - follow.it
    _config.icarus.yml
    1
    2
    3
    4
    5
    6
    7
    widgets:
        -
            position: left
            type: followit
            description: 
            action_url: https://api.follow.it/******
            verification_code: ''

  5. Click the “Continue” button or the “Skip this” link to skip the “Pick the Follow icons you want” page and “Show a pop-up for maximum conversion” page.

  6. At the “Connect your feed to a follow.it account” page, enter your email address that you will use to create a follow.it account and manage followers in the text input. Then, click “Start”.

    Connect Account - follow.it

  7. You will then receive an email from follow.it. In that email, search for <meta name="follow.it-verification-code" content="******"/> and copy the content value between double quotes after content=. Paste the content value you copied to the verification_code setting of the widget configuration. Icarus adds a verification meta tag with this code to the <head> of your pages.

    Copy Verification Code - follow.it
    _config.icarus.yml
    1
    2
    3
    4
    5
    6
    7
    widgets:
        -
            position: left
            type: followit
            description: 
            action_url: https://api.follow.it/******
            verification_code: ******

  8. Generate and push your site to your server.

  9. Go back to follow.it and register an account using your email.

  10. Go back to the first email you receive and click on the “Click here to claim it” link to claim your feed.

    Verify Claim - follow.it

Google AdSense

Create a new AD on Google AdSense. Then, copy the values of data-ad-client and data-ad-slot from the AD HTML code to the client_id and slot_id setting of the widget configuration, respectively. Here is an example:

_config.icarus.yml
1
2
3
4
5
6
widgets:
    -
        position: left
        type: adsense
        client_id: ca-pub-xxxxxxxx
        slot_id: xxxxxxx
Something wrong with this article? Click here to submit your revision.

Icarus User Guide - Widgets

https://ppoffice.github.io/hexo-theme-icarus/Widgets/icarus-user-guide-widgets/

Author

PPOffice

Posted on

2025-09-19

Licensed under

CC BY-NC-SA 4.0

#

Recents

Links

Archives

Categories

Tags

Icarus用户指南
Icarus User Guide
Getting Started
Demo

GitHub Contributions

Loading contributions…

follow.it

Subscribe to get the latest updates!

Follow
Icarus

Catalogue

×