Hexo 配置 Icarus 主题
本文讲述如何给 hexo 博客网站配置。
1. 安装环境说明
- 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．
$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
.....
- 本文是接上一篇文章使用 Hexo 搭建自己的博客网站的续篇，经过上一篇文章的安装配置，目前的目录结构如下：
$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 安装
- 通过压缩包安装
2.1. 安装方式一： 通过 npm 安装
npm install -S hexo-theme-icarus hexo-renderer-inferno
2.2. 安装方式二： 通过 git 克隆安装
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
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.3. 安装方式三： 通过压缩包安装
-
进入项目
$cd blog $pwd your_project_dir/blog项目目录结构如上节所示
-
找到对应的压缩包
- 打开https://github.com/ppoffice/hexo-theme-icarus/releases/
- 找到对应的 release 版本，在对应的版本的 release notes 下面找到 Source code(targ.gz)
-
下载
源代码包 Source code(tar.gz) -
解压缩
将源码包解压到 themes/icarus 目录下即可． -
一键安装
-
前提是你的电脑支持 curl, wget, grep 等命令，针对大多数 windows 用户，建议还是参考上面的步骤一步一步安装主题，对于 MacOs 和 windows 用户，可以使用如下命令一键安装
-
理解以上步骤，能更好地帮助你理解一键安装命令
-
这里将以上步骤压缩成一条命令
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 目录的结构如下所示
$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
theme: icarus
也可以使用 hexo 命令启用 icarus 主题
hexo config theme icarus
3.2. 验证主题
-
首先启动 Hexo 本地站点
hexo server -
当命令行输出中提示出：
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. -
此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
3.3. 配置作者资料卡
你可以启用作者资料卡挂件来展示文章作者/网站站长的信息。 资料卡的配置如下所示：
_config.icarus.yml
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 可以采用如下两种格式：
-
图标形式：
<链接名称>: icon: <FontAwesome5_图标的_HTML_class名称> url: <链接的URL地址> -
文字形式：
<链接名称>: <链接的URL地址>
-
3.4. 配置友站链接
你可以使用友站链接挂件来展示外部网站的列表。 示例配置如下所示：
widgets:
- position: left
type: links
# 友站名称与链接
links:
pengtech: "https://pengtech.net"
philoenglish: "https://philoenglish.com"
3.5. 配置最新文章
使用如下挂件配置来开启最新文章挂件：
_config.icarus.yml
widgets:
- position: right
type: recent_posts
3.6. 配置文章归档
使用如下挂件配置来开启文章归档挂件：
_config.icarus.yml
widgets:
- position: right
type: archives
3.7. 配置文章分类
使用如下挂件配置来开启文章分类挂件：
_config.icarus.yml
widgets:
- position: right
type: categories
3.8. 配置文章标签
使用如下挂件配置来开启文章标签挂件：
_config.icarus.yml
widgets:
- position: right
type: tags
order_by: name # 可选项。按名称(name)或长度(length)来排序。加上`-`前缀来倒序排列。
amount: 20 # 可选项。最多显示的标签数量。留空以显示所有标签。
show_count: true # 可选项。是否显示标签名称右侧的文章数量。
3.9. 开启 shareThis 分享按钮
- 访问 ShareThis 并点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。
- 在“选择分享按钮类型”(Choose type of sharing button)页面选择你需要的按钮类型。 不要启用”GDPR 规范工具“，否则可能会导致一些问题。 你也可以点击“自定义你的分享按钮”(Customize your share buttons)链接来进行按钮的进一步配置。 完成后点击“下一步”(Next)。
- 在”选择你的 CMS 平台“(Choose your CMS platform)页面选择”HTML“并点击”下一步“(Next)。
- 在“注册并获取代码”(Register and get the code!)页面输入邮箱和密码完成 ShareThis 的注册。
- 最后，从 HTML 代码段中复制 src 中的 URL 地址到分享按钮配置中。
例如，下面的 ShareThis 代码：
<script
type="text/javascript"
src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons"
async="async"
></script>
对应下面的主题配置：
share:
type: sharethis
install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons
3.10. 开启 follow.it
安装 hexo-generator-feed
npm install hexo-generator-feed --save
配置 feed, 参考 https://github.com/hexojs/hexo-generator-feed
修改_config.yml，配置 feed 如下
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)。
点击“定义关注表单设计”(Define the follow form’s design)页面上的“继续”(Continue)按钮。
搜索 action=并复制 action=后双引号中的链接。 把你复制的 action 链接粘贴到挂件配置中的 action_url 设置项。 在那之后，点击“完成”(Done)。
3.11. 开启评论系统
可以有多种选择，但是我一直使用的是 utterances，这次依然是 utterances
3.11.1. 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
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 # 可选填
开启站内搜索
修改icarus配置文件_config.icarus.yml，
search:
type: insight
# Whether to include pages in the search results
index_pages: true
4. 支持夜间模式
参考 https://www.imaegoo.com/2020/icarus-night-mode-3/
5. 添加相关文章推建
相关文章推荐，每次都是手动写的，最近发现 hexo-related-popular-posts 可以自动生产相关文章推荐。但是这个已经有几年没有更新了，比较适合 next 等较早一批出现的 hexo 主题。网上搜索了一下，发现ZhongHuihong做了向 icarus 主题的适配 - 参考这篇文章 hexo icarus 主题添加相关文章。
这里为了防止网页找不到，结合 hexo-related-popular-posts 官方文档和上述文章将步骤重新整理一下。
5.1. 首先安装 hexo-related-popular-posts 依赖
npm install hexo-related-popular-posts --save
5.2. 修改 icarus 主题源码
由于最新的 Icarus 使用 npm 安装的话是安装到 node_modules 下的，所以我们需要把主题弄到 themes 目录下。可以直接 git clone 一份到这个目录或者是复制出来，hexo 加载 themes 目录下的主题优先级是大于 node_modules 目录。
layout\common 目录下新增 related.jsx
const { Component } = require("inferno");
const view = require("hexo-component-inferno/lib/core/view");
module.exports = class extends Component {
render() {
const { config, helper, page } = this.props;
const { __, popular_posts } = helper;
let relatedText = popular_posts({}, page);
if (!relatedText || relatedText.length == 0) {
return null;
}
return (
<div class="card">
<div class="card-content">
<h3>相关文章</h3>
<span dangerouslySetInnerHTML={{ __html: relatedText }}></span>
</div>
</div>
);
}
};
说明
与其他主题不同，icarus 的 post 叫做 page，this.props 中是不包含 post 的。hexo-related-popular-posts 注册了 popular_posts 函数用于渲染相关文章，这个需要在 helper 加上。
hexo-related-popular-posts 生成的 html text 需要使用 dangerouslySetInnerHTML 设置，否则直接渲染出来的是带引号的。
下面是我编写的 related.jsx。
修改 article.jsx
编写好了 related.jsx，就需要在 article.jsx 中修改了。需要引入自定义的 jsx 文件，并在合适的位置插入标签。
require.jsx
const Share = require('./share');
const Donates = require('./donates');
const Comment = require('./comment');
+ const Related = require('./related');
插入相关文章标签
+ {/* Related articles */}
+ {!index ? <Related config={config} page={page} helper={helper}/> :null}
{/* Donate button */}
{!index ? <Donates config={config} helper={helper} /> : null}
把它放在文章的尾部，捐赠的上方，!index 表示首页不出现。
效果预览&后记
如果有啥报错的话，记得 hexo clean 一下。
具体的样式可以自己微调，上述代码的改动效果如下。
hexo-related-popular-posts 生成的 div 有自带 class，可以自行添加 icarus/source/css/style.styl 与修改 icarus/include/style 目录下的 style 进行样式的微调。
6. 添加 google 广告
注册 Google Adsense 账号
注册账号流程比较简单，入口在这里：Google Adsense
注册完成后,google 会提供一段广告脚本, 将他放到下面文件的头部位置
从脚本获取到 google adsense client_id 和 slot_id
修改icarus配置文件_config.icarus.yml， 配置google adsense widget如下
widgets:
...
# Where should the widget be placed, left sidebar or right sidebar
position: right
#type: adsense
# AdSense client ID
#client_id: 'ca-pub-zzzzzzz'
# AdSense AD unit ID
#slot_id: 'yyyyyyyyyy'
...
7. hexo Icarus主题优化
记 hexo icarus 主题优化 Google PageSpeed Insights 分数
8. 参考文档
posted on 2024-08-17 15:43 eagle.supper 阅读(42) 评论(0) 编辑 收藏 举报
