发表更新tools / hexo25 分钟读完 (大约3747个字)

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 安装
  • 通过压缩包安装

2.1. 安装方式一： 通过 npm 安装

1
2
3

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

2.2. 安装方式二： 通过 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 [email protected] hexo-component-inferno@^3.1.0

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

2.3. 安装方式三： 通过压缩包安装

  • 进入项目

    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，检查站点是否正确运行。

3.3. 配置作者资料卡

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

_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地址>

3.4. 配置友站链接

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

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

3.5. 配置最新文章

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

_config.icarus.yml

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

3.6. 配置文章归档

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

_config.icarus.yml

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

3.7. 配置文章分类

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

_config.icarus.yml

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

3.8. 配置文章标签

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

_config.icarus.yml

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

3.9. 开启 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

3.10. 开启 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)。

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

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 # 可选填

开启站内搜索

修改icarus配置文件_config.icarus.yml，

1
2
3
4
5
6

search:
    type: insight
    # Whether to include pages in the search results
    index_pages: true

4. 支持夜间模式

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

如何设置默认为night mode:

themes/icarus/source/js/imaegoo/night.js

1
2
3
4

var isNight = localStorage.getItem('night') || true;
var nightNav;

5. 添加相关文章推建

相关文章推荐，每次都是手动写的，最近发现 hexo-related-popular-posts 可以自动生产相关文章推荐。但是这个已经有几年没有更新了，比较适合 next 等较早一批出现的 hexo 主题。网上搜索了一下，发现ZhongHuihong做了向 icarus 主题的适配 - 参考这篇文章 hexo icarus 主题添加相关文章。

这里为了防止网页找不到，结合 hexo-related-popular-posts 官方文档和上述文章将步骤重新整理一下。

1
2
3

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

1
2
3
4
const Share = require('./share');
const Donates = require('./donates');
const Comment = require('./comment');
+ const Related = require('./related');

插入相关文章标签

1
2
3
4
5
6
7
8

+ {/* 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如下

1
2
3
4
5
6
7
8
9
10
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. 解决 SEO LCP 问题

Hexo和icarus主题那些坑：打开速度太慢，google console长期报告 LCP问题，几乎每一个页面都有这个问题，

用PageSpeed Insights测试了一下，主要是FontAwesome CDN，JSDelivr CDN，Google Fonts下载速度慢，严重影响性能。

解决办法：

找到_config.icarus.yml，在最后的providers，修改：全部修改为loli

1
2
3
4
5
6
7
8
9
providers:
    # Name or URL template of the JavaScript and/or stylesheet CDN provider
    cdn: loli
    # Name or URL template of the webfont CDN provider
    #默认用的google
    fontcdn: loli
    # Name or URL of the fontawesome icon font CDN provider
    iconcdn: loli

其次，找到themes/icarus(主题)/layout/common/head.jsx
注释掉：
default: fontcdn(‘Ubuntu:wght@400;600&family=Source+Code+Pro’,‘css2’)

1
2
3
4
5
const fontCssUrl = {
    // default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
    cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
};

参考这篇文章 https://blog.csdn.net/m0_52549699/article/details/118249206

8. 参考文档

Icarus 快速上手

hexo icarus 主题添加相关文章

记 hexo icarus 主题优化 Google PageSpeed Insights 分数

相关文章

Hexo 配置 Icarus 主题

https://pengtech.net/hexo/hexo_apply_icarus_theme.html

作者

鹏叔

发布于

2024-07-09

更新于

2024-08-24

许可协议

#
评论
关注我

follow.it

友情链接

分类

标签

AI2
Almalinux1
Android4
Angular68
Ansible5
CMS1
English2
Fedora3
GORM1
Gemini AI1
Golang9
Helm3
Hexo8
IDEA3
Java4
Linux3
Macos2
MariaDB1
Material1
Matrix2
NAS1
NPM1
Nodejs13
OS1
Redhat2
Rust4
SEO2
Seo1
Ubuntu3
Vultr4
Windows7
angularjs2
backend1
blog1
bootstrap2
browser2
chartjs1
chrome3
css5
database14
design16
docker2
element-web1
fedora2
firefox1
git2
gitlab11
golang4
gradle2
html4
java9
javascript63
k8s6
less1
life2
linux53
macOS2
marketing1
material design17
maven3
network11
nginx6
pagination1
pgadmin1
pnpm1
product5
sass1
sentry2
shell2
source_control2
spring2
spring boot2
springboot1
strapi5
swagger1
tailwindcss3
tauri9
tmux1
typescript1
v2ray5
v2rayA3
v2rayN1
v2rayNG1
virualbox1
vmware9
vscode7
web61
webpack2
websocket2
windows2
wordpress2

最新文章

归档

×