hexo-theme-icarus/source/_posts/en/Widgets.md

title: Icarus User Guide - Widgets date: 2017-01-31 categories:

• Widgets tags:

• Icarus User Guide language: en toc: true sidebar: left: sticky: false right: sticky: true widgets:

    position: left
    type: recent_posts
  

  • position: left type: links links: Hexo: 'https://hexo.io' Bulma: 'https://bulma.io'
  • position: left type: archives
  • position: left type: categories
  • position: left type: tags
  • position: left type: subscribe_email description: Subscribe to get the lastest update! feedburner_id: ''
  • position: right type: profile author: hulatocat author_title: A GitHub Octocat location: GitHub Inc. avatar: https://octodex.github.com/images/hula_loop_octodex03.gif avatar_rounded: false gravatar: follow_link: 'https://octodex.github.com/hulatocat' social_links: Github: icon: fab fa-github url: 'https://github.com/' Icarus: 'https://github.com/ppoffice/hexo-theme-icarus'
  • position: right type: toc index: false

---

This article covers widgets supported by Icarus 3. 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:

{% codeblock _config.icarus.yml lang:yaml %} widgets: - type: ... # Widget 1 position: left ... - type: ... # Widget 2 position: right ... {% endcodeblock %}

This article is also available in 简体中文.

The following widgets are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported plugins and their configuration details.

Profile

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

{% codeblock _config.icarus.yml lang:yaml %} 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 of the avatar/profile picture avatar: https://octodex.github.com/images/hula_loop_octodex03.gif # Whether to show a round clip of the avatar avatar_rounded: false # The email address of the Gravatar service(if the avatar is not 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' {% endcodeblock %}

Some notes on the configuration:

• If you wish to use Gravatar instead of avatar as your profile picture, fill in the Gravatar email address in the gravatar setting and leave avatar empty;

• There two acceptable formats for social_links:

  Icon:

  {% codeblock social_links lang:yaml %} <link_name>: icon: <fontawesome_icon_class_name> url: <link_url> {% endcodeblock %}

  Text:

  {% codeblock social_links lang:yaml %} <link_name>: <link_url> {% endcodeblock %}

Table of Contents

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

{% codeblock _config.icarus.yml lang:yaml %} widgets: - type: toc position: left # Whether to number each table of contents item index: true {% endcodeblock %}

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

{% codeblock Post.md lang:yaml %} title: A post with the table of contents toc: true

Post content... {% endcodeblock %}

External Links

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

{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: links # Name and URL of the external site links: Hexo: 'https://hexo.io' Bulma: 'https://bulma.io' {% endcodeblock %}

Recent Posts

Use the following configuration to enable the recent posts widget:

{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: recent_posts {% endcodeblock %}

Archives

Use the following configuration to enable the archives widget:

{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: archives {% endcodeblock %}

Categories

Use the following configuration to enable the categories widget:

{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: categories {% endcodeblock %}

Tags

Use the following configuration to enable the tags widget:

{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: tags {% endcodeblock %}

Subscribe Email

The email subscription feature of Icarus is provided by Google Feedburner. To enable this 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. Then, go to Google Feedburner, log into your Google account, and add your RSS feed by typing in the RSS feed address to the input box and click "Next".

   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-homepage.png 360 '"Homepage - Feedburner" "Homepage - Feedburner"' %}
   

3. Next, fill in the "Feed Title" on the next page. Click "Next" to continue customizing your feed or click "Skip directly to feed management" to finish.

   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-add-feed.png 360 '"Add Feed - Feedburner" "Add Feed - Feedburner"' %}
   

4. When finished adding the feed, click the "My Feeds" link on the top of the page. Click your newly added feed on the "My Feeds" page.

   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-feed-list.png 360 '"Feed List - Feedburner" "Feed List - Feedburner"' %}
   

5. Switch to the "Publicize" tab and click the "Email Subscription" link on the left side of the page. Enable "Email Subscription" by clicking the "Activate" button.

   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-activate-email.png 360 '"Activate Email Subscription - Feedburner" "Activate Email Subscription - Feedburner"' %}
   

6. Find the following information in the HTML code on the "Email Subscription" page:

   {% codeblock Google Feedburner URL %} https://feedburner.google.com/fb/a/mailverify?uri=****** {% endcodeblock %}

   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-get-code.png 360 '"Get Code - Feedburner" "Get Code - Feedburner"' %}
   

   Copy the ID after uri= (e.g., feedforall/ABCD) to the feedburner_id setting of the widget configuration:

   {% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: subscribe_email # (Optional) One line of description text description: Subscribe to get the lastest update! feedburner_id: feedforall/ABCD {% endcodeblock %}

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:

{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: adsense client_id: ca-pub-xxxxxxxx slot_id: xxxxxxx {% endcodeblock %}

Something wrong with this article? Click here to submit your revision.