Hexo 网站搭建过程备忘记录（二）主题配置

代理编辑：Black，2025-04-12 发布于圣儿博客

本站选用Hexo+Butterfly 主题+AnZhiYu 魔改的路线搭建。

Frame	Theme	Magic
Hexo v7.3.0	Butterfly v5.3	AnZhiYu v1.6.14

动手时在此记录建站过程，防止 来的时候好好的，回不去了。同时也希望能够帮助到需要的朋友。
内容分成几个不同的块，相对应的分成几篇文章记录：

全局配置

主题色修改

_config.anzhiyu.yml/theme_color

左侧项目按钮

_config.anzhiyu.yml/nav

更改左侧nav图标：

1
2
3
4
5
6

路径：[boot]/themes/anzhiyu/layout/includes/header/nav.pug

if theme.nav.enable
  .back-home-button
    //- i.anzhiyufont.anzhiyu-icon-grip-vertical
    i.anzhiyufont.anzhiyu-icon-cube

代码块配置

_config.anzhiyu.yml/highlight_theme

头像右下角状态图标

_config.anzhiyu.yml/author_status/statusImg

Footer

_config.anzhiyu.yml/footer

在Pug里改改写死的图标和文字：

1
2
3
4
5
6
7
8
9

路径：[boot]/themes/anzhiyu/layout/includes/third-party/runtime/runtime-js.pug

if (nowHour < 18 && nowHour >= 9) {
  // 如果是上班时间，默认就是"安知鱼-上班摸鱼中.svg"图片，不需要更改
  currentTimeHtml = `<i class='anzhiyufont anzhiyu-icon-circle-dot' style='color: #C0F1A3; font-size: 10px'></i>&nbsp;&nbsp;&nbsp;&nbsp;小站已经运行 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span>`;
} else {
  // ···
  currentTimeHtml = `<i class='anzhiyufont anzhiyu-icon-circle-dot' style='color: #C0F1A3; font-size: 10px'></i>&nbsp;&nbsp;&nbsp;&nbsp;小站已经运行 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span>`;
}

页面加载动画

_config.anzhiyu.yml/preloader

中英字间自动加空格

_config.anzhiyu.yml/pangu

首页技能轮播模块修改

把这个功能由轮播展示技能的效果，改成轮播展示生活点滴图片

▶

配置Title、Subtitle等文字内容：_config.anzhiyu.yml/home_top
处理轮播图内容：[blog]/source/_data/creativity.yml
CSS样式：[boot]/themes/anzhiyu/source/css/_extra/skills/skills.css
CSS样式：[boot]/themes/anzhiyu/source/css/_layout/home_top.styl

在myStyle.css里把方形样式改为长方形后，在creativity.yml放入一些生活图片
把原来的蓝色hover，换成白色，稍透明。见CSS变更记录

动态效果控制

Post顶部波浪开关：_config.anzhiyu.yml/dynamicEffect.postTopWave
Page页图片气泡升起开关：_config.anzhiyu.yml/bubble
Dark模式的粒子背景开关：_config.anzhiyu.yml/universe

Cardlink 卡片式链接的设置逻辑

{% link 标题, 站点描述, 链接, 图片链接（可选） %}

左上角tip的内容是：”站内地址” 或 “引用站外地址”。当参数[图片链接]为true时，显示站内地址；为空或url时，显示引用站外地址。为true时，使用默认图片/img/512.png；为空时，使用默认图标 。

这个逻辑呢，我不大习惯，但是要改动[boot]/themes/anzhiyu/scripts/tag/link.js，我又不大勤劳。折中方案是把/img/512.png替换为/img/girl.png，先手动改图片吧，以后变勤劳了再改代码，先记下来。

缩略图后缀

路径：_config.anzhiyu.yml/pageThumbnailSuffix

这是个压缩图片节省资源的功能，很实用。但是因为官方文档的图片缺失，试了几次都没反应，只好看源码找原因了。

1
2
3
4
5
6
7
8
9

//- 路径：[boot]/themes/anzhiyu/layout/includes/mixins/article-sort.pug

- let pageThumbnailSuffix = theme.pageThumbnailSuffix
if (pageThumbnailSuffix && theme.pageThumbnailSuffix.startsWith("!") && article.cover && article.cover.includes("!"))
  - let imageUrl = article.cover.substring(0, article.cover.indexOf("!"))
  - modifiedUrl = imageUrl + pageThumbnailSuffix
else
  - modifiedUrl = article.cover

原来作者默认cover图片，都是使用!cover之类图片处理后的链接格式，没有!，就还是cover图，不缩略。
好吧，我加。
But，只针对archive/tag/category 页面单独开启后缀。气氛都到这了，为啥不把页面右下角“最近发布”里的小正方形缩略图一块搞了呢。这不能忍，得改。

1
2
3
4
5
6
7

//- 路径：[boot]/themes/anzhiyu/layout/includes/widget/card_recent_post.pug

//- - let post_cover = article.cover
- let post_cover = article.cover
- let pageThumbnailSuffix = theme.pageThumbnailSuffix
if (pageThumbnailSuffix && theme.pageThumbnailSuffix.startsWith("!") && article.cover && article.cover.includes("!"))
  - post_cover = article.cover.substring(0, article.cover.indexOf("!"))+ pageThumbnailSuffix

此处缩略图尺寸是66*66正方形，不过没必要单独做一个后缀格式，和上边提到的archive/tag/category 页面缩略图后缀，共用一个格式就可以。

图片资源压缩是个重要工作，有关图片处理的内容，单独一篇文章记录：建站记录之图片方案

搜索系统

开始文章不多的时候，先用本地搜索的方式吧，等以后需要时再改hexo-algoliasearch。

1. pnpm install hexo-generator-search --save
2. 站点配置文件_config.yml中添加：

   1 2 3

   search: path: search.json field: post

3. 开启本地搜索：_config.anzhiyu.yml/local_search

评论系统

采用腾讯的Twikoo系统，配置比较复杂，单独一篇文章记录。建站记录之评论系统

Page页面配置

常用 Page Front-matter 参数

新建 Page

• hexo new page ×××

  如果不添加type，则使用默认的模板[boot]/themes/anzhiyu/layout/includes/page/default-page.pug

• 自定义模板的步骤 以test页为例
  1. [boot]/themes/anzhiyu/layout/includes/page/文件夹，新建test.pug。按pug语法写好自定义模板样式。如果需要新建page有各自独立的内容，pug中，在需要添加的地方，加入!= page.content
  2. [boot]/themes/anzhiyu/layout/page.pug中，增加路由：

     1 2 3 4

     case page.type ··· when 'test' include includes/page/test.pug

  3. hexo new page test 添加参数 type: "test"。如需独立内容，在test/index.md里，按markdown格式书写即可。

About页修改

[boot]/themes/anzhiyu/layout/includes/page/about.pug

• 去掉音乐、游戏、番剧等不要的板块：

  1 2 3

  .author-content .card-content ···

• 部分板块修改为自己的内容：
  .author-content-item.careers 改成图片铺满背景的链接，链接至album相册页
  这里改动写死的链接和按钮文字内容
  img、tips、title等大多数about页的设置，则需要在[boot]/source/_data/about.yml里设置

• 增加一个可以在about/index.md里自定义文字的板块：

  1 2 3 4 5

  .author-content .card-content .author-content-item.single .author-content-item-tips= '心路历程' != page.content

• helloAbout CSS特效，改变字体样式：

  [boot]/themes/anzhiyu/source/css/_page/about.styl
  hello there文字太大，改小一些。修改见见CSS变更记录 也可修改字体颜色，shape颜色。

Album 相册页修改

• Album页的顶部图片，在/album/index.md里的Front-matter里添加参数top_background: "https://×××.jpg"
  Album页的title、tips、按钮文字等，需要到[boot]/themes/anzhiyu/layout/includes/page/about.pug修改
• Album的子页，需要新建new page，把type=”album_detail”
  cover、top_background等，全部在[boot]/source/_data/album.yml里修改。其中type 1 是butterfly的Gallery；type2是anzhiyu主题的仿Instagram+瀑布流样式，非常好看。

我的装备页修改

很喜欢这个页面设计，把一些挺走心的物件，用过的或正在用的，罗列在一个页面，像个个人博物馆，很有感觉。
页面样式也非常精美，没有需要改动的，只要在[boot]/source/_data/equipment.yml里，做一些基本的top图，title描述等设置就可以了。

音乐页面配置

_config.anzhiyu.yml/nav_music 中设置

• QQ音乐

  1 2 3 4

  id: [歌单链接后面的数字串] server: tencent volume: 0.7 # 默认音量 all_playlist: https://y.qq.com/n/ryqq/playlist/[id]

  menu 中的link，加上参数：/music/?id=[id]&server=tencent

• 网易云音乐

  1 2 3 4

  id: [歌单链接后面的数字串] server: netease volume: 0.7 # 默认音量 all_playlist: https://music.163.com/#/playlist?id=[id]

  menu 中的link，加上参数：/music/?id=[id]&server=netease

另外还支持kugou(酷狗)，xiami(小米音乐)、baidu(百度音乐)

支持键盘控制：
暂停/播放：Space
音量：↑/↓
切换：←/→

404页面

等有好看的gif时，在这里替换：_config.anzhiyu.yml/error_404

Post 页面配置

常用 Post Front-matter 参数

自定义文章页主题色

默认主题色，建议仅手动在Front-matter 里为需要的post页自定义。
生效条件：_config.anzhiyu.yml/disable_top_img为false，不能关闭top图。其实设置为true，关闭top banner页面也很好看，只是如果需要自定义单个文章页主题色的话，就需要打开。

_config.anzhiyu.yml/mainTone中

1
2
3
4
5
6
7

# 主色调相关配置
mainTone:
  enable: true # true or false 文章是否启用获取图片主色调
  mode: # both # cdn/api/both cdn模式为图片url+imageAve参数获取主色调，api模式为请求API获取主色调，both模式会先请求cdn参数，无法获取的情况下将请求API获取，可以在文章内配置main_color: '#3e5658'，使用十六进制颜色，则不会请求both/cdn/api获取主色调，而是直接使用配置的颜色
  # 项目地址：https://github.com/anzhiyu-c/img2color-go
  api: # https://img2color-go.vercel.app/api?img= # mode为api时可填写
  cover_change: true # 整篇文章跟随cover修改主色调

Reward 打赏微调

页面下方打赏按钮的弹出界面，_config.anzhiyu.yml/reward中，可设置的不多，只有开或关，以及2个付款方式二维码。
需要在[boot]/themes/anzhiyu/layout/post/reward.pug中调整。

CSS 自定义

需要实现自定义CSS样式的，先看主题自带中，是否有通过参数配置实现的方式，尽量不自定义。如必须自定义，也最好不要改动主题自带，而是自建一个样式文件引入，方便后期升级时保留配置。我的步骤如下：

1. 在[boot]/themes/anzhiyu/source/css下，新建css文件，如：myStyle.css
2. 写入想要效果的样式，如增加字体等
3. 在_config.anzhiyu.yml中引入自建的css文件

   1 2 3 4 5 6 7 8 9

   inject: head: # 自定义css - <link rel="stylesheet" href="/css/myStyle.css"> # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> bottom: # 自定义js # - <script src="/js/xxx"></script>

h2 标签装饰

主题自带的h2效果，不够突出。在myStyle.css做如下更改：

1
2
3
4
5
6
7
8
9
10
11

h2 {
    margin: 36px;
}

h2:before {
    content: "\f02a";     
    font-family: "Font Awesome 5 Free";
    color: #ff7242;
    font-size: 26px!important; 
    margin-right: 12px!important;
}

Inlineimage 图片文字

经常要在一行文字内插入图片，使用主题自带的标签外挂Inlineimage，非常方便快捷。
但是默认效果是在垂直方向上，图片比文字高度上浮一些，显得没有对齐，不是很好看。

查看了主题的样式文件，发现有个上浮设置：

1
2
3
4
5
6

路径：[boot]/themes/anzhiyu/source/css/_tags/image.styl

img.inline
  display: inline !important
  vertical-align: middle
  transform: translateY(-4px)

myStyle.css里做个微调：

1
2
3

img.inline {
    transform: translateY(8px)
}

实现想要的效果： Hexo v7.3.0

home-top 中三个分类按钮样式

装饰的短横线太高，挡住了按钮文字不好看，顺道改改颜色

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

a.categoryButton{
    line-height: 3em;
    font-size: 1.0rem;
}

a.categoryButton.blue {
    background: linear-gradient(to right, #2E4E7E,  #7C97BF);
    background-size: 200%;
}
a.categoryButton.red {
    background: linear-gradient(to right, #2E4E7E,  #7C97BF);
    background-size: 200%;
}
a.categoryButton.green {
    background: linear-gradient(to right,#2E4E7E,  #7C97BF);
    background-size: 200%;
}

首页和关于页轮播技能改动样式

改为生活图片的照片墙样式，把hover改成白底，0.95透明度。

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

#skills-tags-group-all .tags-group-icon {

    width: 240px !important;
    height: 160px !important;
    border-radius: 12px !important;
}

#skills-tags-group-all .tags-group-icon img {

    width: 210px !important;
    margin: 0 auto !important;
}

#random-banner:hover {
    #random-hover {
        background: #fff!important;
        opacity: 0.95;
    }
}

#random-hover {
    color: #2e4e7e!important;
    font-size: 60px!important;
    font-weight: 700
}

#random-hover i {
    color: #ff7242!important;
    font-size: 24px!important;
}

Code 单行代码块样式

默认样式是maincolor当背景色，用的多了会比较乱，有些喧宾夺主。
把它反过来，看效果：修改之后没有原来样式好看，但是再好看也不能贪杯哟

1
2
3
4

code {
    color: var(--anzhiyu-main)!important;
    background: #e7e8e9!important;
}

About页helloAbout CSS特效

默认样式的颜色搭配很专业，就是字体太大，不方便自定义内容，把字体相关的都写到myStyle里，以后可以改动。

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
52

/* helloAbout CSS特效，改变字体样式 */
.hello-about h1 {

    font-size: calc(0.0989119683 * 100vw + 48.5558852621px)!important;
}

@media (min-width: 419px) {
    .hello-about h1 {
      font-size: calc(0.0989119683 * 100vw + 28.5558852621px)!important;
    }
}

@media (max-width: 768px) {
    .hello-about {
      margin: 20px 20px auto!important;
    }
}

/* helloAbout CSS特效，shape的颜色 */
/* shapes 决定：light模式的字体色和dark模式的背景色（此时字体色是白色） */
.shapes {
    position: relative;
    height: 315px;
    width: 100%;
    background: var(--anzhiyu-main);
    overflow: hidden;
}


/* 最外层大圈颜色 */
.shape.shape-1 {
    background: #9b95c9;
    width: 650px;
    height: 650px;
    margin: -325px 0 0 -325px;
}

  /* 中间圈颜色 */  
.shape.shape-2 {
    background: #f58f98;
    width: 440px;
    height: 440px;
    margin: -220px 0 0 -220px;
}
  
  /* 内圈颜色 */  
.shape.shape-3 {
    background: #ffe600;
    width: 270px;
    height: 270px;
    margin: -135px 0 0 -135px;
}

To do list

下一篇是图片处理方案，记录在这里：

Hexo 网站搭建过程备忘记录（三）图片方案