Hexo Icarus 主题设置

安装和开始

按照 Hexo 官方文档的指导安装 Hexo,并且使用 hexo init 创建一个博客站点。

切换到博客根目录,下载 NextT 主题并安装依赖模块:

1
2
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
npm install bulma-stylus@0.8.0 hexo-component-inferno hexo-renderer-inferno inferno inferno-create-element --save

版本说明

Hexo 版本: 4.2.0
Icarus 版本: 3.1.0

注意时效性,版本不同配置项可能存在差异。

Icarus 主题配置

基础配置

使用 Icarus 主题,并且设置语言为中文,修改博客根目录下的 _config.yml 文件:

1
2
language: zh-CN  
theme: icarus

Icarus 为我们预置了多达 12 种语言,默认是英文。zh-CN 是简体中文,大家可以根据自己的文案风格修改 theme/icarus/languages/zh-CN.yml 文件。

主题配置

首次在博客根目录执行 hexo clean 或者 hexo g 都会触发 Icarus 自动生成一个 theme/icarus/_config.yml 文件。

logo 设置

logo 会展示在顶部导航栏的最左侧以及底部的 footer 区域,大家可以替换 source/images/ 下的 logo 文件,使用 svg 或者 png 格式的都可以。

评论系统

Icarus 预置了 Changyan, Disqus, Facebook, Gitment, Gitalk, Isso, LiveRe 和 Valine 八大主流评论插件。

这里以我使用的 Valine 为例。首先在 LeanCloud 注册一个免费的开发账号,新建一个新应用,并把 appid 和 appkey 配置在对应部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
comment:
type: valine
app_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
app_key: xxxxxxxxxxxxxxxxxxxxxx
placeholder: "" # 可选填
avatar: mm # 可选填
avatar_force: false # 可选填
meta: ["nick", "mail", "link"] # 可选填
page_size: 10 # 可选填
lang: zh-CN # 可选填
visitor: false # 可选填
highlight: true # 可选填
record_ip: false # 可选填
server_urls: # 可选填
emoji_cdn: # 可选填
emoji_maps: # 可选填
enable_qq: false # 可选填
required_fields: [] # 可选填

其他的评论插件配置,具体可以参见用户评论插件

如果有的文章不希望别人评论,但是我们又不希望把整个站点的评论关闭的话,可以对指定文章进行评论关闭操作。操作也很简单,只需要在文章 markdown 文件的 front-matter 区域设置 commentsfalse 即可:

1
2
3
4
---
title: article title
comments: false
---

打赏功能

Icarus 提供了支付宝,微信,PayPal 和 Patreon 四种支付方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
donates:
# Alipay donate button configurations
-
type: alipay
# Alipay qrcode image URL
qrcode: /img/alipay.jpg
# "Buy me a coffee" donate button configurations
# -
# type: buymeacoffee
# URL to the "Buy me a coffee" page
# url: ''
# Patreon donate button configurations
# -
# type: patreon
# URL to the Patreon page
# url: ''
# Paypal donate button configurations
# -
# type: paypal
# Paypal business ID or email address
# business: ''
# Currency code
# currency_code: USD
# Wechat donate button configurations
-
type: wechat
# Wechat qrcode image URL
qrcode: /img/wechat.jpg

支付宝和微信只需要提供二维码就可以了,可以使用本地静态资源或者图床链接。

widget 挂件

挂件是 Icarus 比较精髓的部分,所有的 widget 都是一个卡片,可以自由摆放在任何位置。包括文章在内,个人资料、链接、分类、最新文章、归档、标签都是一个卡片,可以在 theme/icarus/_config.yml 中设置各个卡片的具体属性,同时也可以设置卡片出现在网站的左侧还是右侧。

除了在 themes/icarus/_config.yml 的默认主题配置文件外,Icarus 也会从themes/icarus/_config.post.ymlthemes/icarus/_config.page.yml 获取替代配置。可以在_config.post.yml 中设置仅对所有文章生效的配置, 例如,在此配置文件中把所有的挂件放置在页面一侧来实现所有文章两栏布局,同时其他页面仍保持三栏布局。详细使用可以参见 icarus用户指南-主题配置-配置文件与优先级

一般文章是 post layout,about/categories/tags 这些是 page layout。

为了页面简洁大方,主页删除了大部分不需要的挂件,左侧只保留个人资料,右侧保留标签、分类和归档。文章页面只保留目录。

themes/icarus/_config.yml 挂件配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
widgets:
# Profile widget configurations
-
# Where should the widget be placed, left sidebar or right sidebar
position: left
type: profile
# Author name
author: Kyson Lok
# Author title
author_title: Developer
# Author's current location
location: ShenZhen, China
# URL or path to the avatar image
avatar: /img/avatar.png
# Whether show the rounded avatar image
avatar_rounded: true
# Email address for the Gravatar
gravatar:
# URL or path for the follow button
follow_link: 'https://github.com/kysonlok'
# Links to be shown on the bottom of the profile widget
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/kysonlok'
Facebook:
icon: fab fa-facebook
url: 'https://facebook.com'
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com'
Dribbble:
icon: fab fa-dribbble
url: 'https://dribbble.com'
# RSS:
# icon: fas fa-rss
# url: /
-
# Where should the widget be placed, left sidebar or right sidebar
position: right
type: tags
# Categories widget configurations
-
# Where should the widget be placed, left sidebar or right sidebar
position: right
type: categories
# Archives widget configurations
-
# Where should the widget be placed, left sidebar or right sidebar
position: right
type: archives

themes/icarus/_config.post.yml 挂件配置:

1
2
3
4
5
widgets:
-
# Where should the widget be placed, left sidebar or right sidebar
position: right
type: toc

themes/icarus/_config.page.yml 配置跟 themes/icarus/_config.post.yml 保持一致。

评论