Hexo配置Icarus主题

本文讲述如何给 hexo 博客网站配置

1. 安装环境说明

  • 首先粘贴本教程测试使用的环境,如果在安装配置中,环境有差异,请酌情修改或调整参数.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$hexo v
INFO Validating config
Inferno is in development mode.
INFO =======================================
██╗ ██████╗ █████╗ ██████╗ ██╗ ██╗███████╗
██║██╔════╝██╔══██╗██╔══██╗██║ ██║██╔════╝
██║██║ ███████║██████╔╝██║ ██║███████╗
██║██║ ██╔══██║██╔══██╗██║ ██║╚════██║
██║╚██████╗██║ ██║██║ ██║╚██████╔╝███████║
╚═╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO === Checking package dependencies ===
INFO === Checking theme configurations ===
INFO === Registering Hexo extensions ===
hexo: 5.4.0
hexo-cli: 4.3.2
os: linux 6.8.8-300.fc40.x86_64 Fedora Linux 40 (Workstation Edition)
node: 20.12.2
acorn: 8.11.3
.....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$tree -L 1
your_project_dir/blog
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── scaffolds
├── source
└── _posts
├── hexo
└── rust
└── themes

source 目录下已经有两篇文章,项目能发布到 github 上,能在公网上通过https://pengtech.net正常访问了.下一步实现尝试一下修改默认的主题,将其替换为 icarus 主题.

2. 安装 Icarus 主题

安装 Icarus 主题有两种方式:

  • 通过 npm 安装
  • 通过 git clone 安装
  • 通过压缩包安装

安装方式一: 通过 npm 安装

1
2
3

npm install -S hexo-theme-icarus hexo-renderer-inferno

安装方式二: 通过 git 克隆安装

1
2
3
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus --branch 6.1.0 --depth 1
#另外,你也可以使用下面的命令将Icarus安装为Git子模块(submodule):
git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus --branch 6.1.0 --depth 1

安装dependencies

1
2
3
4
5
6
7

npm install -S semver@^7.5.4

npm install --save bulma-stylus@0.8.0 hexo-component-inferno@^3.1.0

npm install -S hexo-renderer-inferno@^1.0.2

2.1. 安装方式三: 通过压缩包安装

  • 进入项目

    1
    2
    3
    $cd blog
    $pwd
    your_project_dir/blog

    项目目录结构如上节所示

  • 找到对应的压缩包

  • 下载
    源代码包 Source code(tar.gz)

  • 解压缩
    将源码包解压到 themes/icarus 目录下即可.

  • 一键安装

    • 前提是你的电脑支持 curl, wget, grep 等命令,针对大多数 windows 用户,建议还是参考上面的步骤一步一步安装主题,对于 MacOs 和 windows 用户,可以使用如下命令一键安装

    • 理解以上步骤,能更好地帮助你理解一键安装命令

    • 这里将以上步骤压缩成一条命令

      1
      2
      3
      mkdir themes/icarus
      curl -s https://api.github.com/repos/ppoffice/hexo-theme-icarus/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/icarus --strip-components=1

    • 安装完成后,  themes/icarus 目录的结构如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $tree -L 2
    .
    ├── _config.landscape.yml
    ├── _config.yml
    ├── db.json
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── scaffolds
    │   ├── draft.md
    │   ├── page.md
    │   └── post.md
    ├── source
    │   └── _posts
    ├── themes
    │   └── icarus
    └── yarn.lock

3. 配置 Icarus 主题

3.1. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件_config.yml, 找到 theme 字段,并将其值更改为 icarus

1
theme: icarus

也可以使用 hexo 命令启用 icarus 主题

1
hexo config theme icarus

3.2. 验证主题

  • 首先启动 Hexo 本地站点

    1
    hexo server
  • 当命令行输出中提示出:
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

  • 此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

配置作者资料卡

你可以启用作者资料卡挂件来展示文章作者/网站站长的信息。 资料卡的配置如下所示:

_config.icarus.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
widgets:
- position: left
type: profile
# 作者名称
author: 鹏叔
# 作者头衔
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://pengtech.net"
# 社交媒体链接
social_links:
Github:
icon: fab fa-github
url: "https://github.com/guoapeng"

需要注意的是:

  • 如果你希望使用 Gravatar 而不是 avatar 配置项作为头像图片,请在 gravatar 项填入 你的 Gravatar 邮箱地址并在 avatar 一项中留空;

  • social_links 可以采用如下两种格式:

    • 图标形式:

      1
      2
      3
      <链接名称>:
      icon: <FontAwesome5_图标的_HTML_class名称>
      url: <链接的URL地址>
    • 文字形式:

      1
      <链接名称>: <链接的URL地址>

配置友站链接

你可以使用友站链接挂件来展示外部网站的列表。 示例配置如下所示:

1
2
3
4
5
6
7
widgets:
- position: left
type: links
# 友站名称与链接
links:
pengtech: "https://pengtech.net"
philoenglish: "https://philoenglish.com"

配置最新文章

使用如下挂件配置来开启最新文章挂件:

_config.icarus.yml

1
2
3
widgets:
- position: right
type: recent_posts

配置文章归档

使用如下挂件配置来开启文章归档挂件:

_config.icarus.yml

1
2
3
widgets:
- position: right
type: archives

配置文章分类

使用如下挂件配置来开启文章分类挂件:

_config.icarus.yml

1
2
3
widgets:
- position: right
type: categories

配置文章标签

使用如下挂件配置来开启文章标签挂件:

_config.icarus.yml

1
2
3
4
5
6
widgets:
- position: right
type: tags
order_by: name # 可选项。按名称(name)或长度(length)来排序。加上`-`前缀来倒序排列。
amount: 20 # 可选项。最多显示的标签数量。留空以显示所有标签。
show_count: true # 可选项。是否显示标签名称右侧的文章数量。

开启 shareThis 分享按钮

  1. 访问 ShareThis 并点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。
  2. 在“选择分享按钮类型”(Choose type of sharing button)页面选择你需要的按钮类型。 不要启用”GDPR 规范工具“,否则可能会导致一些问题。 你也可以点击“自定义你的分享按钮”(Customize your share buttons)链接来进行按钮的进一步配置。 完成后点击“下一步”(Next)。
  3. 在”选择你的 CMS 平台“(Choose your CMS platform)页面选择”HTML“并点击”下一步“(Next)。
  4. 在“注册并获取代码”(Register and get the code!)页面输入邮箱和密码完成 ShareThis 的注册。
  5. 最后,从 HTML 代码段中复制 src 中的 URL 地址到分享按钮配置中。

例如,下面的 ShareThis 代码:

1
2
3
4
5
<script
type="text/javascript"
src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons"
async="async"
></script>

对应下面的主题配置:

1
2
3
share:
type: sharethis
install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons

开启 follow.it

安装 hexo-generator-feed

1
2
3

npm install hexo-generator-feed --save

配置 feed, 参考 https://github.com/hexojs/hexo-generator-feed

修改_config.yml,配置 feed 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14

feed:
enable: true
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:

按照如下步骤即可启用 follow.it 邮件订阅插件:

首先,使用诸如 hexo-generator-feed 此类的 Hexo 插件生成 你的 Hexo 网站的 RSS 源。

访问 follow.it 并在“向你的站点添加关注功能”(Add the follow feature to your site)下方的 输入框中填写 RSS 源的文件地址,例如http://example.com/atom.xml。 然后,点击“下一步”(Next)。

follow it enter feed url

点击“定义关注表单设计”(Define the follow form’s design)页面上的“继续”(Continue)按钮。

搜索 action=并复制 action=后双引号中的链接。 把你复制的 action 链接粘贴到挂件配置中的 action_url 设置项。 在那之后,点击“完成”(Done)。

开启评论系统

可以有多种选择,但是我一直使用的是 utterances,这次依然是 utterances

utterances

安装指南在线预览
准备一个公开的 GitHub 仓库(Repository)。

访问 GitHub Apps - utterances 并点击”安装“(Install)。

GitHub 应用页 - utterances
GitHub 应用页 - utterances

(可选)如果你的账号下有组织账号,在下一页中选择需要安装 utterances 的用户。

选择用户 - utterances
选择用户 - utterances

在下一页面选择将 utterances 安装到”所有仓库“(All repositories)或是”选定的仓库“(Only select repositories)。 然后点击“安装”(Install)按钮。

选择仓库 - utterances
选择仓库 - utterances

若安装成功,网页将跳转到 utterances 官网。 你可以阅读每个的配置项的说明,并按照配置你的 utterances 安装。

完成配置后,转到页面上的”开启 utterances“(Enable Utterances)并从 utterances 的 HTML 代码中复制属性值到主题配置的对应配置项中。

获取代码 - utterances
获取代码 - utterances

例如下面的 utterances 代码:

utterances 安装代码

对应下面的主题配置:

_config.icarus.yml

1
2
3
4
5
6
7
comment:
type: utterances
repo: Your-GitHub-Username/Your-Public-Repo-Name
issue_term: pathname # 必填项,与issue_number二选一填写
issue_number: 100 # 必填项,与issue_term二选一填写,每篇文章对应一个issue,填写前需要手动创建issue
label: some-issue-label # 可选填
theme: github-light # 可选填

支持夜间模式

参考 https://www.imaegoo.com/2020/icarus-night-mode-3/

参考文档

Icarus快速上手

作者

鹏叔

发布于

2024-07-09

更新于

2024-07-13

许可协议

评论