github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
hexo-theme-icarus/source/_posts/en/Widgets.md

7.5 KiB
Raw Blame History

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

This article is also available in: 简体中文.

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

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

Most of the widgets of Icarus are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported widgets and configuration details.

Profile

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

{% codeblock themes/icarus/_config.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 the avatar setting as profile picture, you can fill in the Gravatar email address in gravatar and leave avatar empty;

  • There two possible formats for social_links:

    Icon:

    {% codeblock social_links lang:yaml %} : icon: <HTML class name of the FontAwesome5 icon> url: {% endcodeblock %}

    Text:

    {% codeblock social_links lang:yaml %} : {% endcodeblock %}

Table of Contents

To show the table of contents of the current post, please add the following widget configuration to your theme's configuration file:

{% codeblock themes/icarus/_config.yml lang:yaml %} widgets: - type: toc position: left {% endcodeblock %}

Then, add toc: true to the front-matter of the post you wish to display the widget:

{% 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 and links to them using the external links widget. An example of its configuration is listed below:

{% codeblock themes/icarus/_config.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

Please use the following widget configuration to enable the recent posts widget:

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

Archives

Please use the following widget configuration to enable the archives widget:

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

Categories

Please use the following widget configuration to enable the categories widget:

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

Tags

Please use the following widget configuration to enable the tags widget:

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

Subscribe Email

The email subscription feature of Icarus is provided by Google Feedburner.

  1. To turn on this widget, please generate the RSS feed of your Hexo site using some Hexo plugins like hexo-generator-feed.

  2. Then, log into Google Feedburner and add your RSS feed. Click the "My Feeds" link on the top of the page when finished. Click your newly added feed on the "My Feeds" page.

  3. Click the "Publicize" tab and then the "Email Subscription" link on the left side of the page. Click the "Activate" button and 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 %}

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

    {% codeblock themes/icarus/_config.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

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

{% codeblock themes/icarus/_config.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.