feat(doc): add en & zh-CN widget doc
ppoffice
parent
17293fa829
commit
209cc46c6f
|
|
@ -1,10 +1,7 @@
|
|||
title: Hexo Built-in Tag Helpers
|
||||
date: 2016-07-08 20:07:55
|
||||
categories:
|
||||
- Configuration
|
||||
- Posts
|
||||
date: 2018-01-01
|
||||
tags:
|
||||
- Getting Started
|
||||
- Demo
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
|
@ -193,7 +190,7 @@ To embed an iframe:
|
|||
{% iframe url [width] [height] %}
|
||||
```
|
||||
|
||||
{% iframe https://hexo.io 100% 400 %}
|
||||
{% iframe https://blog.zhangruipeng.me/hexo-theme-icarus 100% 400 %}
|
||||
|
||||
## Image
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ This article is also available in: <a href="{% post_path zh-CN/Donation-Buttons
|
|||
</div>
|
||||
|
||||
This article covers some donation buttons supported by Icarus 3.
|
||||
If you need to display multiple donation buttons at once, simply add individual button configurations
|
||||
If you need to display multiple donation buttons at once, simply add individual button configuration
|
||||
to the `donates` array like this
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,8 @@ In this case, we will not need the empty lines between HTML tags.
|
|||
Here is an image grid created by Justified Gallery.
|
||||
You can also view the full image using lightGallery by clicking on any image.
|
||||
|
||||
> The following photos come from <a href="https://www.pexels.com">pexel.com</a>
|
||||
|
||||
<div class="justified-gallery">
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,284 @@
|
|||
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
|
||||
---
|
||||
|
||||
<div class="notification is-success is-size-6">
|
||||
This article is also available in: <a href="{% post_path zh-CN/Widgets %}">简体中文</a>.
|
||||
</div>
|
||||
|
||||
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 %}
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
Most of the widgets of Icarus are provided by
|
||||
[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno).
|
||||
Please refer to it for a complete list of supported widgets and configuration details.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 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](https://en.gravatar.com/) 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 %}
|
||||
<Name of the link>:
|
||||
icon: <HTML class name of the FontAwesome5 icon>
|
||||
url: <URL of the link>
|
||||
{% endcodeblock %}
|
||||
|
||||
**Text**:
|
||||
|
||||
{% codeblock social_links lang:yaml %}
|
||||
<Name of the link>: <URL of the link>
|
||||
{% 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](https://github.com/hexojs/hexo-generator-feed).
|
||||
|
||||
2. Then, log into [Google Feedburner](https://feedburner.google.com) 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](https://www.google.com/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 %}
|
||||
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
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>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
title: Table of Contents / Catalogue
|
||||
date: 2018-10-17 22:46:00
|
||||
categories:
|
||||
- Configuration
|
||||
- Posts
|
||||
toc: true
|
||||
---
|
||||
To display a Table of Contents / Catalogue (toc) widget on a post page, please first add `toc: true` to the front-matter of your post Markdown file:
|
||||
{% codeblock lang:yaml post.md %}
|
||||
title: Table of Contents Example
|
||||
toc: true
|
||||
---
|
||||
Post content...
|
||||
{% endcodeblock %}
|
||||
|
||||
Then, add the `toc` widget to the theme's configuration file:
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
widgets:
|
||||
-
|
||||
type: toc
|
||||
position: left
|
||||
{% endcodeblock %}
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# First level title
|
||||
## Second level title
|
||||
### Third level title
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum faucibus tellus in lobortis. Etiam ultrices
|
||||
et risus at tempor. Aenean mollis in metus sed rutrum. Sed aliquet vel urna in luctus. Donec at sodales mauris. Donec
|
||||
sed metus fermentum, pellentesque velit ac, tincidunt augue. Integer mattis risus a finibus iaculis. Donec mattis,
|
||||
tellus a iaculis fringilla, ante quam rutrum urna, a mollis lorem lacus cursus risus. Pellentesque a quam in tellus
|
||||
tincidunt imperdiet. Etiam eget fringilla risus. Praesent mauris massa, aliquam non nibh et, commodo rutrum ligula. Duis
|
||||
fermentum gravida lectus at placerat. Suspendisse blandit rutrum lacus vel semper. Nulla magna ex, gravida quis ante
|
||||
sed, gravida ornare ipsum.
|
||||
|
||||
[[TOP]](#toc)
|
||||
|
||||
### Another third level title
|
||||
Pellentesque porta odio sed odio venenatis, non efficitur est scelerisque. Vivamus dignissim ac massa in feugiat. Donec
|
||||
auctor pulvinar arcu. Aenean auctor mi sed enim aliquam euismod. Vivamus eros arcu, faucibus non ullamcorper at,
|
||||
sagittis a turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Suspendisse potenti. Cras et viverra felis. Fusce ullamcorper ex a orci eleifend tempor. Cras lacinia efficitur viverra.
|
||||
Aenean lobortis placerat rhoncus. Praesent luctus pellentesque tristique. Cras convallis dignissim odio, sit amet
|
||||
sagittis purus euismod et.
|
||||
|
||||
[[TOP]](#toc)
|
||||
|
||||
## Another second level title
|
||||
Phasellus ipsum urna, laoreet venenatis augue eleifend, dignissim tempor sem. Donec consectetur magna vitae orci viverra,
|
||||
sit amet lacinia dolor sagittis. Pellentesque quis sagittis elit. Cras mattis velit ac lacus rutrum, quis luctus enim
|
||||
scelerisque. Vestibulum eu tincidunt felis, in molestie nunc. Donec condimentum ultrices erat, volutpat ultricies nisi.
|
||||
Pellentesque eu dui vitae augue congue accumsan. Proin eleifend tristique metus nec cursus.
|
||||
|
||||
[[TOP]](#toc)
|
||||
|
||||
# Another first level title
|
||||
Donec id erat in nulla condimentum commodo. Curabitur iaculis id ipsum a cursus. Vestibulum volutpat leo at dignissim
|
||||
semper. Fusce at ex nec ipsum vestibulum posuere. Phasellus pretium felis tellus, non commodo dui tristique eu. Donec
|
||||
iaculis posuere augue, ac condimentum purus feugiat sit amet. Etiam rutrum non mauris et pulvinar. Vestibulum ac nulla
|
||||
magna.
|
||||
|
||||
[[TOP]](#toc)
|
||||
|
||||
## Final title
|
||||
Suspendisse potenti. Fusce ullamcorper lacus vitae leo dignissim malesuada. Sed commodo efficitur fermentum. Maecenas
|
||||
mollis eget massa a tincidunt. Etiam non arcu lorem. In imperdiet venenatis ipsum, vitae venenatis magna tristique sit
|
||||
amet. Donec quis pulvinar orci, sagittis convallis nisi.
|
||||
|
||||
[[TOP]](#toc)
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
title: Links Sidebar Widget
|
||||
date: 2016-02-01
|
||||
categories:
|
||||
- Widgets
|
||||
---
|
||||
|
||||
You can show a list of links to other websites in the sidebar by enabling the links widget. Add the following configuration to the `widgets` section in your `_config.yml` file, and you are good to go:
|
||||
|
||||
```yaml
|
||||
-
|
||||
type: links
|
||||
position: left
|
||||
links:
|
||||
'Website name': 'http://website/url'
|
||||
Hexo: 'https://hexo.io'
|
||||
PPOffice: 'https://github.com/ppoffice'
|
||||
```
|
||||
|
||||
One thing you should note is that the links widget only takes a list of website name and URL, and the URL is displayed on the right side of the widget.
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
title: Profile Sidebar Widget
|
||||
date: 2018-10-20
|
||||
categories:
|
||||
- Widgets
|
||||
tags:
|
||||
- Getting Started
|
||||
thumbnail: /gallery/thumbnails/deer.jpg
|
||||
widgets:
|
||||
-
|
||||
type: profile
|
||||
position: right
|
||||
author: hulatocat
|
||||
author_title: A GitHub Octocat
|
||||
location: GitHub Inc.
|
||||
avatar: https://octodex.github.com/images/hula_loop_octodex03.gif
|
||||
gravatar:
|
||||
follow_link: https://octodex.github.com/hulatocat
|
||||
social_links:
|
||||
Github:
|
||||
icon: fab fa-github
|
||||
url: 'http://github.com/'
|
||||
Icarus:
|
||||
icon: fas fa-palette
|
||||
url: 'http://github.com/ppoffice/hexo-theme-icarus'
|
||||
---
|
||||
|
||||
Icarus offers a way to showcase yourself using the profile sidebar widget. To use this widget, add the following lines to the widgets section of your `_config.yml`:
|
||||
|
||||
{% codeblock lang:yaml _config.yml %}
|
||||
-
|
||||
type: profile
|
||||
position: # show in left or right sidebar
|
||||
author: # your name
|
||||
author_title: # your title
|
||||
location: # where are you
|
||||
avatar: # path or url to your avatar image
|
||||
gravatar: # your gravatar email
|
||||
follow_link: # path or url to any page you want
|
||||
social_links: # add links to your social network here
|
||||
{% endcodeblock %}
|
||||
<!-- more -->
|
||||
There are two things that you should note:
|
||||
|
||||
- If you want to [Gravatar](https://en.gravatar.com/), fill in your email in the `gravatar` field. Otherwise, leave it blank in case it overrides the avatar setting.
|
||||
|
||||
- The `social_links` field accepts an array of links which are either shown as a text link or icon link. The details are described in {% post_link theme/Polymorphic-Link-Settings %}.
|
||||
|
||||
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-size:12px;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@joeypilgrim?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Joey Pilgrim"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Joey Pilgrim</span></a>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
title: Sidebar Widgets Overview
|
||||
date: 2016-02-02
|
||||
categories:
|
||||
- Widgets
|
||||
---
|
||||
|
||||
With the brand-new widget configuration scheme, you can place any widgets on either side of the page and set up them fair easily. Icarus reads the list of widgets that are enabled from `_config.yml` and displays them in the order they are defined. The following widgets are supported in Icarus 2.0.0:
|
||||
|
||||
- Archives (archive)
|
||||
- Categories (category)
|
||||
- Links (links)
|
||||
- Profiles (profile)
|
||||
- Recent Posts (recent_posts)
|
||||
- Tags (tag)
|
||||
- Tag Cloud (tagcloud)
|
||||
- Table of Content / Catalogue (toc)
|
||||
<!-- more -->
|
||||
|
||||
The enabled widgets are defined as an array. Each widget has two mandatory fields in common: `type` and `position`. The `type` field specific what widget is enabled and can be one of the `(name)` above. The position can be either `left` or `right`, which tells on which side will the widget be placed.
|
||||
|
||||
```yml
|
||||
widgets:
|
||||
-
|
||||
type: category
|
||||
position: left
|
||||
-
|
||||
type: tagcloud
|
||||
position: left
|
||||
-
|
||||
type: recent_posts
|
||||
position: right
|
||||
-
|
||||
type: archive
|
||||
position: right
|
||||
-
|
||||
type: tag
|
||||
position: right
|
||||
```
|
||||
|
||||
Most of these widgets do not take any extra configurations. However, for those who do, please refer to the [documentation](/hexo-theme-icarus/categories/Widgets/).
|
||||
|
|
@ -77,6 +77,8 @@ plugins:
|
|||
|
||||
下面是Justified Gallery实现的多图片网格化展示。点击其中的任意可另外查看lightGallery的全图展示效果。
|
||||
|
||||
> 下面的图片来源于<a href="https://www.pexels.com">pexel.com</a>
|
||||
|
||||
<div class="justified-gallery">
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,275 @@
|
|||
title: Icarus用户指南 - 挂件
|
||||
date: 2016-01-01
|
||||
categories:
|
||||
- Widgets
|
||||
tags:
|
||||
- Icarus用户指南
|
||||
language: zh-CN
|
||||
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: 邮件订阅，更新早知道
|
||||
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
|
||||
providers:
|
||||
cdn: loli
|
||||
fontcdn: loli
|
||||
iconcdn: fontawesome
|
||||
---
|
||||
|
||||
<div class="notification is-success is-size-6">
|
||||
本文同时提供以下语言的翻译：<a href="{% post_path en/Widgets %}">English</a>。
|
||||
</div>
|
||||
|
||||
本文介绍Icarus 3支持的一些页面挂件的安装配置。若需同时展示多个挂件，只需在主题配置的`widgets`数组中添加多个挂件配置，而他们的展示顺序以配置的定义顺序为准。而每项挂件均包含必填项`type`(挂件类型)与`position`(挂件展示位置：左边/右边)。例如
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
type: ... # 挂件1
|
||||
position: left
|
||||
...
|
||||
-
|
||||
type: ... # 挂件2
|
||||
position: right
|
||||
...
|
||||
{% endcodeblock %}
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
<div class="notification is-link is-size-6">
|
||||
|
||||
Icarus的绝大部分挂件由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
|
||||
提供，具体提供的挂件种类与配置以其为准。
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## 作者资料卡
|
||||
|
||||
你可以启用作者资料卡挂件来展示文章作者/网站站长的信息。资料卡的示例配置如下所示：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
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邮箱(如不设置`avatar`项)
|
||||
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'
|
||||
{% endcodeblock %}
|
||||
|
||||
需要注意的是：
|
||||
|
||||
- 如果你希望使用[Gravatar](https://en.gravatar.com/)提供头像图片，请在`gravatar`项填入
|
||||
你的Gravatar邮箱地址，而`avatar`一项请留空；
|
||||
- `social_links`可以采用如下两种格式：
|
||||
|
||||
**图标形式**：
|
||||
|
||||
{% codeblock social_links lang:yaml %}
|
||||
<链接名称>:
|
||||
icon: <FontAwesome5图标的HTML class名称>
|
||||
url: <链接的URL地址>
|
||||
{% endcodeblock %}
|
||||
|
||||
**文字形式**：
|
||||
|
||||
{% codeblock social_links lang:yaml %}
|
||||
<链接名称>: <链接的URL地址>
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 文章目录
|
||||
|
||||
若要展示文章目录，请首先在主题配置文件中添加如下挂件配置：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
type: toc
|
||||
position: left
|
||||
{% endcodeblock %}
|
||||
|
||||
然后，在需要开启目录的文章头部加入`toc: true`：
|
||||
|
||||
{% codeblock Post.md lang:yaml %}
|
||||
title: 一篇有目录的文章
|
||||
toc: true
|
||||
---
|
||||
文章内容...
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 友站链接
|
||||
|
||||
你可以展示友站链接挂件展示相关网站以及它们的链接。友站链接挂件的配置如下所示：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: left
|
||||
type: links
|
||||
# 友站名称与链接
|
||||
links:
|
||||
Hexo: 'https://hexo.io'
|
||||
Bulma: 'https://bulma.io'
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 最新文章
|
||||
|
||||
请通过如下挂件配置开启最新文章挂件：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: right
|
||||
type: recent_posts
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 文章归档
|
||||
|
||||
请通过如下挂件配置开启文章归档挂件：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: right
|
||||
type: archives
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 文章分类
|
||||
|
||||
请通过如下挂件配置开启文章分类挂件：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: right
|
||||
type: categories
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 文章标签
|
||||
|
||||
请通过如下挂件配置开启文章标签挂件：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: right
|
||||
type: tags
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## 邮件订阅
|
||||
|
||||
Icarus的邮件订阅功能由Google Feedburner提供。
|
||||
|
||||
1. 若要开启邮件订阅挂件，请首先使用诸如[hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed)
|
||||
的Hexo插件生成网站的RSS源。
|
||||
|
||||
2. 然后登录[Google Feedburner](https://feedburner.google.com)并添加你的RSS源。完成配置后，请点击网页顶部的”我的源“
|
||||
(My Feeds)查看源列表，并点击新添加的源进入源的配置界面。
|
||||
|
||||
3. 点击”宣传“(Publicize)标签页，然后点击页面左侧的”邮件订阅“(Email Subscription)，然后在页面右侧找到并点击”激活“(Activate)
|
||||
按钮。在打开的”邮件订阅“(Email Subscription)页面的HTML代码中找到
|
||||
|
||||
{% codeblock Google Feedburner URL %}
|
||||
https://feedburner.google.com/fb/a/mailverify?uri=******
|
||||
{% endcodeblock %}
|
||||
|
||||
复制`uri=`后的ID，例如`feedforall/ABCD`并填入挂件配置的`feedburner_id`中。
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: left
|
||||
type: subscribe_email
|
||||
# (可选) 描述文字
|
||||
description: 邮件订阅，更新早知道
|
||||
feedburner_id: feedforall/ABCD
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
## Google AdSense
|
||||
|
||||
请登录[Google AdSense](https://www.google.com/adsense)并新建广告，复制广告代码中的`data-ad-client`和`data-ad-slot`
|
||||
分别填入到挂件配置的`client_id`和`slot_id`项中。示例如下：
|
||||
|
||||
{% codeblock themes/icarus/_config.yml lang:yaml %}
|
||||
widgets:
|
||||
-
|
||||
position: left
|
||||
type: adsense
|
||||
client_id: ca-pub-xxxxxxxx
|
||||
slot_id: xxxxxxx
|
||||
{% endcodeblock %}
|
||||
|
||||
|
||||
<div class="notification is-warning is-size-6">
|
||||
文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Widgets.md">此处</a>提交修改。
|
||||
</div>
|
||||
|
|
@ -45,7 +45,7 @@ blog feature-rich and powerful.
|
|||
<th><a href="https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search/">Search</a></th>
|
||||
<th><a href="https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/">Share</a></th>
|
||||
<th><a href="https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/">Widgets</a></th>
|
||||
<th><a href="https://blog.zhangruipeng.me/hexo-theme-icarus/categories/Plugins/General/">Other Plugins</a></th>
|
||||
<th><a href="https://blog.zhangruipeng.me/hexo-theme-icarus/categories/Plugins/">Other Plugins</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Changyan</td>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
Loading…
Reference in New Issue