12 KiB
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: followit description: 邮件订阅，更新早知道 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 providers: cdn: loli fontcdn: loli iconcdn: loli
本文介绍Icarus 4支持的页面挂件的安装配置。
若要同时展示多个挂件，只需在主题配置的widgets数组中添加多个挂件配置。
它们会按照定义的顺序出现。
每个挂件必须包含type(挂件类型)与position(挂件展示位置)设置项。
示例如下：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - type: ... # 挂件1 position: left ... - type: ... # 挂件2 position: right ... {% endcodeblock %}
作者资料卡
你可以启用作者资料卡挂件来展示文章作者/网站站长的信息。 资料卡的配置如下所示：
{% codeblock _config.icarus.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而不是
avatar配置项作为头像图片，请在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 _config.icarus.yml lang:yaml %} widgets: - type: toc position: left # 是否显示目录项目的序号 index: true {% endcodeblock %}
然后，在需要开启目录的文章头部加入toc: true：
{% codeblock Post.md lang:yaml %} title: 一篇有目录的文章 toc: true
文章内容... {% endcodeblock %}
友站链接
你可以使用友站链接挂件来展示外部网站的列表。 示例配置如下所示：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: links # 友站名称与链接 links: Hexo: 'https://hexo.io' Bulma: 'https://bulma.io' {% endcodeblock %}
最新文章
使用如下挂件配置来开启最新文章挂件：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: recent_posts {% endcodeblock %}
文章归档
使用如下挂件配置来开启文章归档挂件：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: archives {% endcodeblock %}
文章分类
使用如下挂件配置来开启文章分类挂件：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: categories {% endcodeblock %}
文章标签
使用如下挂件配置来开启文章标签挂件：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: right type: tags {% endcodeblock %}
Google Feedburner
按照如下步骤即可启用Google Feedburner插件：
-
首先，使用诸如hexo-generator-feed此类的Hexo插件生成 你的Hexo网站的RSS源。
-
然后登录Google Feedburner，在输入框内输入你的RSS地址并点击“下一步”(Next) 来添加你的RSS源。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-homepage.png 360 '"主页 - Feedburner" "主页 - Feedburner"' %}
-
然后，在下一页中填写“源标题”。 点击“下一步”(Next)来继续自定义你的源，或者点击“直接跳到源管理”(Skip directly to feed management)来完成配置。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-add-feed.png 360 '"添加源 - Feedburner" "添加源 - Feedburner"' %}
-
完成添加源后，点击网页顶部的”我的源“(My Feeds)链接。 点击“我的源”(My Feeds)页面上新添加的源。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-feed-list.png 360 '"源列表 - Feedburner" "源列表 - Feedburner"' %}
-
切换到”宣传“(Publicize)标签页并点击页面左侧的”邮件订阅“(Email Subscription)链接。 点击“激活”(Activate)按钮来开启“邮件订阅”(Email Subscription)功能。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/feedburner-activate-email.png 360 '"激活邮件订阅 - Feedburner" "激活邮件订阅 - Feedburner"' %}
-
在”邮件订阅“(Email Subscription)页面上从HTML代码中找到如下信息：
{% 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 '"获取代码 - Feedburner" "获取代码 - Feedburner"' %}
复制
uri=后的ID(如feedforall/ABCD)到挂件配置的feedburner_id设置中：{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: subscribe_email # (可选) 描述文字 description: 邮件订阅，更新早知道 feedburner_id: feedforall/ABCD {% endcodeblock %}
Google AdSense
在Google AdSense上新建广告。
然后，复制广告HTML代码中的data-ad-client和data-ad-slot值分别填入到挂件配置的client_id和slot_id项中。
示例如下：
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: adsense client_id: ca-pub-xxxxxxxx slot_id: xxxxxxx {% endcodeblock %}
follow.it
按照如下步骤即可启用follow.it邮件订阅插件：
-
首先，使用诸如hexo-generator-feed此类的Hexo插件生成 你的Hexo网站的RSS源。
-
访问follow.it并在“向你的站点添加关注功能”(Add the follow feature to your site)下方的 输入框中填写RSS源的文件地址，例如
http://example.com/atom.xml。 然后，点击“下一步”(Next)。{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-enter-feed-url.png 360 '"输入订阅源URL - follow.it" "输入订阅源URL - follow.it"' %}
-
点击“定义关注表单设计”(Define the follow form’s design)页面上的“继续”(Continue)按钮。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-create-form.png 360 '"创建表单 - follow.it" "创建表单 - follow.it"' %}
-
搜索
action=并复制action=后双引号中的链接。 把你复制的action链接粘贴到挂件配置中的action_url设置项。 在那之后，点击“完成”(Done)。{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-code.png 360 '"复制Action链接 - follow.it" "复制Action链接 - follow.it"' %}
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: followit description: action_url: https://api.follow.it/****** verification_code: '' {% endcodeblock %}
-
点击“继续”(Continue)按钮或者“跳过此步”(Skip this)链接来跳过“选择你想要的关注按钮”(Pick the Follow icons you want)和 ”显示弹窗来最大化交流“(Show a pop-up for maximum conversion)页面。
-
在”连接你的源到follow.it账户“(Connect your feed to a follow.it account)页面上，在输入框中填入你将要用来注册follow.it账户 和管理订阅者的邮箱地址。 然后，点击”开始“(Start)。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-connect-account.png 360 '"连接账户 - follow.it" "连接账户 - follow.it"' %}
-
你会收到一封来自follow.it的邮件。 在那封邮件中搜索
<meta name="follow_it-verification-code" content="******"/>并复制content=后双引号中的content的值。 将你复制的值粘贴到挂件设置中的verification_code设置项。{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-verification-code.png 360 '"复制验证码 - follow.it" "复制验证码 - follow.it"' %}
{% codeblock _config.icarus.yml lang:yaml %} widgets: - position: left type: followit description: action_url: https://api.follow.it/****** verification_code: ****** {% endcodeblock %}
-
生成你的站点并将其上传到你的服务器。
-
回到follow.it并用你的邮箱地址注册一个账户。
-
回到你收到的第一封邮件并点击”点击这里来认领“(Click here to claim it)链接来认领你的订阅源。
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-verify-claim.png 360 '"验证认领 - follow.it" "验证认领 - follow.it"' %}