396 lines
12 KiB
Markdown
396 lines
12 KiB
Markdown
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: followit
|
||
description: Subscribe to get the lastest update!
|
||
action_url: ''
|
||
verification_code: ''
|
||
-
|
||
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 4.
|
||
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 %}
|
||
|
||
<article class="message message-immersive is-primary">
|
||
<div class="message-body">
|
||
<i class="fas fa-globe-asia mr-2"></i>This article is also available in
|
||
<a href="{% post_path zh-CN/Widgets %}">简体中文</a>.
|
||
</div>
|
||
</article>
|
||
|
||
<!-- more -->
|
||
|
||
<article class="message message-immersive is-primary">
|
||
<div class="message-body">
|
||
<i class="fas fa-info-circle mr-2"></i>The following widgets are provided by
|
||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||
Please refer to it for a complete list of supported plugins and their configuration details.
|
||
</div>
|
||
</article>
|
||
|
||
|
||
## 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](https://en.gravatar.com/) 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 %}
|
||
|
||
|
||
## Google Feedburner
|
||
|
||
<article class="message message-immersive is-danger">
|
||
<div class="message-body">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i><a href="https://support.google.com/feedburner/answer/10483501" target="_blank">Google is shutting down the email subscription feature of Feedburner.</a> You can switch to <a href="#follow-it">the follow.it widget</a> or other email subscription services.
|
||
</div>
|
||
</article>
|
||
|
||
To enable Google Feedburner 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](https://github.com/hexojs/hexo-generator-feed).
|
||
|
||
2. Then, go to [Google Feedburner](https://feedburner.google.com), 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"' %}
|
||
<br>
|
||
|
||
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"' %}
|
||
<br>
|
||
|
||
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"' %}
|
||
<br>
|
||
|
||
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"' %}
|
||
<br>
|
||
|
||
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"' %}
|
||
<br>
|
||
|
||
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](https://www.google.com/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 %}
|
||
|
||
|
||
## follow.it
|
||
|
||
To enable [follow.it](https://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](https://github.com/hexojs/hexo-generator-feed).
|
||
|
||
2. Go to [follow.it](https://follow.it/ni) 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".
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-enter-feed-url.png 360 '"Enter Feed URL - follow.it" "Enter Feed URL - follow.it"' %}
|
||
<br>
|
||
|
||
3. Click the "Continue" button on the "Define the follow form’s design" page.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-create-form.png 360 '"Create Form - follow.it" "Create Form - follow.it"' %}
|
||
<br>
|
||
|
||
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".
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-code.png 360 '"Copy Action URL - follow.it" "Copy Action URL - follow.it"' %}
|
||
<br>
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
widgets:
|
||
-
|
||
position: left
|
||
type: followit
|
||
description:
|
||
action_url: https://api.follow.it/******
|
||
verification_code: ''
|
||
{% endcodeblock %}
|
||
|
||
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".
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-connect-account.png 360 '"Connect Account - follow.it" "Connect Account - follow.it"' %}
|
||
<br>
|
||
|
||
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.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-verification-code.png 360 '"Copy Verification Code - follow.it" "Copy Verification Code - follow.it"' %}
|
||
<br>
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
widgets:
|
||
-
|
||
position: left
|
||
type: followit
|
||
description:
|
||
action_url: https://api.follow.it/******
|
||
verification_code: ******
|
||
{% endcodeblock %}
|
||
|
||
8. Go back to follow.it and register an account using your email.
|
||
|
||
9. Go back to the first email you receive and click on the "Click here to claim it" link to claim your feed.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-verify-claim.png 360 '"Verify Claim - follow.it" "Verify Claim - follow.it"' %}
|
||
<br>
|
||
|
||
<article class="message message-immersive is-warning">
|
||
<div class="message-body">
|
||
<i class="fas fa-question-circle mr-2"></i>Something wrong with this article?
|
||
Click <a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/en/Widgets.md">here</a>
|
||
to submit your revision.
|
||
</div>
|
||
</article>
|