抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

Hexo博客搭建 美化篇

教程Hexo

发布于：2023年9月1日

次浏览

字数：2.6k 字

时长：12 分钟

简介

本网站使用的是 Volantis 主题，并对其进行了自定义改造。

安装

在 _config.yml 文件中修改以下项目

config.yml
1
theme: volantis

然后通过 npm 安装主题文件

主题安装
1
npm i hexo-theme-volantis

安装完主题后，在博客的根目录创建一个新的配置文件 _config.volantis.yml，并且从主题文件夹中复制配置文件的内容进来，以便修改配置。

因为我们是通过 npm 方式安装，因此主题配置文件在\node_modules\hexo-theme-volantis\_config.yml

该主题自带的搜索功能需要安装额外模块

搜索安装
1
npm i -S hexo-generator-json-content

然后修改配置文件

_config.volantis.yml
1
2
3
search:
  enable: true
  service: hexo

配置主题

主题配置可以阅读主题文档进行对应的配置。

主题配置

https://volantis.js.org/v6/theme-settings/

以下为本博客主要调节的配置

导航

_config.volantis.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
navbar:
  width: auto
  visiable: always # always, auto
  effect: [shadow, blur] # [shadow, floatable, blur]
  logo: # choose [img] or [icon + title]
    img: /images/img_logo.png #logo图片路径
    icon:
    title:
  menu:
    - name: 主页
      icon: fa-solid fa-rss
      url: /
    - name: 分类
      icon: fa-solid fa-folder-open
      url: categories/
    - name: 标签
      icon: fa-solid fa-tags
      url: tags/
    - name: 归档
      icon: fa-solid fa-archive
      url: archives/
    - name: 暗黑模式 # 可自定义
      icon: fa-solid fa-moon # 可自定义
      toggle: darkmode
  search: Search... # Search bar placeholder

导航新增了分类和标签两个栏目，以及黑暗模式的切换按钮

分类和标签使用代码创建

1
2
hexo new page categories
hexo new page tags

创建完成后，我们到 source 文件夹下对应的文件夹修改 index.md 文件

categories
1
2
3
4
5
6
---
layout: category
index: true
title: 所有分类
sidebar: [blogger, music, category, tagcloud, webinfo]
---
tags
1
2
3
4
5
6
---
layout: tag
index: true
title: 所有标签
sidebar: [blogger, music, category, tagcloud, webinfo]
---

这里的 sidebar 是组件列表，可以根据需要参考主题文档自己修改

首页 Cover

_config.volantis.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
cover:
  height_scheme: half # full, half
  layout_scheme: featured # blank (留白), search (搜索), dock (坞), featured (精选), focus (焦点)
  display:
    home: true
    archive: false
    others: false # can be written in front-matter 'cover: true'
  background: https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg #背景图
  # background: https://bing.ioliu.cn/v1/rand?w=1920&h=1200
  logo: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-Cover@3x.png
  title: "Busyo's Blog" #中间显示的文字
  subtitle: ""
  search: A Wonderful Theme for Hexo # search bar placeholder
  # features:

此处本博客选择占一半页面的 cover，为了保留博客名的显示，选择了非 blank 的布局，同时为了移除多余的按钮，注释了 features 的所有内容。display 可以选择在什么界面展示。

字体

_config.volantis.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fontfamily:
  logofont:
    fontfamily: ' "haipai", "Microsoft YaHei", Helvetica, Arial'
    name: "haipai"
    url: /fonts/haipai.ttf # https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
    weight: normal
    style: normal
  bodyfont:
    fontfamily: '"haipai", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
    name: "haipai"
    url: /fonts/haipai.ttf # https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
    weight: normal
    style: normal
  codefont:
    fontfamily: "FiraCode-SemiBold, haipai, Monaco"
    name: "FiraCode-SemiBold"
    url: /fonts/FiraCode-SemiBold.ttf # https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
    weight: normal
    style: normal

此配置可以修改三个地方的字体 logo 字体、正文字体和代码字体，本博客使用的字体保存于/source/fonts/文件夹下，因此传入的路径去除 source 之后就是/fonts/字体

侧边栏组件

_config.volantis.yml
1
2
3
4
5
6
7
8
sidebar:
  position: right # left right
  # 主页、分类、归档等独立页面
  for_page: [blogger, music, category, tagcloud, webinfo]
  # layout: docs/post 这类文章页面
  for_post: [toc]
  # 侧边栏组件库
  widget_library:

侧边栏的组件列表内的内容都是从下面组件库中选择，并且组件可根据自己需求调整配置，详情可参考官方文档和配置注释。

文章作者

_config.volantis.yml
1
2
3
4
5
6
7
meta_library:
  # 默认文章作者（可在 _data/author.yaml 中增加其他作者，并在 front-matter 中设置）
  # https://volantis.js.org/advanced-settings/#多人协同
  author:
    avatar: /images/img_icon.png # 作者头像图片路径
    name: 名字
    url: / #作者网址 默认即博客网址

插件

幻灯片背景

_config.volantis.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
parallax:
  enable: true
  position: fixed # cover: 固定位置.   fixed: 滚动跟随.
  shuffle: true # 乱序
  duration: 10000 # 显示持续时间 单位毫秒
  fade: 500 # 渐变时间 单位毫秒
  images: # 图片列表
    - volantis-static/media/wallpaper/minimalist/2020/001.webp
    - volantis-static/media/wallpaper/minimalist/2020/002.webp
    - volantis-static/media/wallpaper/minimalist/2020/003.webp
    - volantis-static/media/wallpaper/minimalist/2020/004.webp
    - volantis-static/media/wallpaper/minimalist/2020/005.webp
    - volantis-static/media/wallpaper/minimalist/2020/006.webp
    - volantis-static/media/wallpaper/minimalist/2020/012.webp
    - volantis-static/media/wallpaper/minimalist/2020/016.webp
    - volantis-static/media/wallpaper/minimalist/2020/019.webp
    - volantis-static/media/wallpaper/minimalist/2020/025.webp
    - volantis-static/media/wallpaper/minimalist/2020/033.webp
    - volantis-static/media/wallpaper/minimalist/2020/034.webp
    - volantis-static/media/wallpaper/minimalist/2020/035.webp
    - volantis-static/media/wallpaper/minimalist/2020/038.webp
    - volantis-static/media/wallpaper/minimalist/2020/039.webp
    - volantis-static/media/wallpaper/minimalist/2020/042.webp
    - volantis-static/media/wallpaper/minimalist/2020/046.webp
    - volantis-static/media/wallpaper/minimalist/2020/051.webp
    - volantis-static/media/wallpaper/minimalist/2020/052.webp
    - volantis-static/media/wallpaper/minimalist/2020/054.webp
    - volantis-static/media/wallpaper/minimalist/2020/056.webp

音乐播放器

_config.volantis.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
aplayer:
  enable: true
  js:
    aplayer: volantis-static/libs/aplayer/dist/APlayer.min.js # https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
    meting: volantis-static/libs/meting/dist/Meting.min.js # https://unpkg.com/meting@2.0/dist/Meting.min.js
  css: volantis-static/libs/aplayer/dist/APlayer.min.css # https://unpkg.com/aplayer@1.10/dist/APlayer.min.css
  # Required
  server: netease # netease, tencent, kugou, xiami, baidu
  type: playlist # song, playlist, album, search, artist
  id: 897784673 # song id / playlist id / album id / search keyword
  # Optional
  fixed: false # enable fixed mode
  theme: "#1BCDFC" # main color
  autoplay: false # audio autoplay
  order: list # player play order, values: 'list', 'random'
  loop: all # player loop play, values: 'all', 'one', 'yaml'
  volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
  list_max_height: 320px # list max height
  list_folded: true
  autoHide: true # hide automaticaly

设置 enable 启用，server 选择音乐软件，type 选择类型，对应音乐软件中的类型，id 选择具体的曲目，本博客使用网易云的歌单，id 即代表对应的歌单。

如何获得类型和id？

打开网页版网易云，搜索想要的内容，查看网址栏

统计

_config.volantis.yml
1
2
3
4
5
6
analytics:
  busuanzi: volantis-static/libs/busuanzi/js/busuanzi.pure.mini.js #https://gcore.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js
  leancloud: # 请使用自己的 id & key 以防止数据丢失
    app_id: # u9j57bwJod4EDmXWdxrwuqQT-MdYXbMMI
    app_key: # jfHtEKVE24j0IVCGHbvuFClp
    custom_api_server: # 国际版一般不需要写，除非自定义了 API Server

本博客使用不蒜子统计，若需要更高级的统计，可参考主题文档接入其他统计。

字数统计

_config.volantis.yml
1
2
3
# npm i hexo-wordcount
wordcount:
  enable: true

字数统计功能需要安装对应的模块

1
npm i hexo-wordcount

界面功能

界面支持多种功能，比如评论、标签、摘要、引用等，具体可以参考 界面配置

主题覆盖

首先我们在主题文件夹\node_modules\hexo-theme-volantis\source\css下新建一个文件夹，名字随意，我新建了一个_busyo文件夹。

然后在新建的文件夹下新建一个cover.styl文件用来保存覆盖的样式，一个extra.styl文件用来保存新增的样式，最后我们在_busyo文件夹统计目录下的style.styl文件最末尾新增一行@import '_busyo/*'即可。

之后我们所有的样式改动都可以写在这两个文件夹内。

覆盖样式

对于覆盖样式，我们可以利用浏览器的开发者工具定位我们想要修改的元素

此处我们看到 class 有两个样式，一个叫 highlight，一个叫 yaml，我们就可以在 cover.styl 文件夹内新增同名内容来修改他们。格式如下：

cover.styl
1
2
3
4
.highlight
    border: 3px solid rgba(0,0,0,0.5)
    border-radius: 20px
    overflow:hidden

属性修改即是 css 的修改，可以根据 css 的相关内容自己调整。

新增样式

对于新增样式，可以在extra.styl文件新增不重名的样式，然后在对应的布局文件中对应的部分的 class 内容中加上你增加的样式。

布局文件的路径在主题文件夹\node_modules\hexo-theme-volantis\layout\下，ejs 结尾的文件。

关于 ejs 写法请自行查找相关内容。

内容注入

本主题支持在不修改主题文件的情况下向 head 和 body 中添加内容。

_config.yml
1
2
3
4
5
6
import:
  head_begin:
  head_end:
  body_begin:
  body_end:
    # - <script></script>

注入内容可以是任意标签，也可以是 JavaScript 代码，不过需要注意的是，由于网页加载策略的原因，JavaScript 代码只有在第一次打开网站的时候会执行，之后就会再次执行，除非刷新网页。

为了解决这个问题，本博客选择在布局文件中硬编入 script 标签。

本博客的代码块样式就是由代码生成替换。通过 script 标签引入后处理文件，这样每次打开界面都会执行代码。

article.ejs
1
2
3
4
<!--省略上面代码-->
</article>
<script src = "/script/AfterProcess.js"></script>
<!--省略下面代码-->

JavaScript 代码

界面美化（代码块、标题）

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
window.AfterProcess = {
  ResetCodeStyle: () => {
    var eles = document.getElementsByClassName("highlight");
    var colors = ["#ed6a5e", "#f5bd4f", "#61c454"];
    for (let i = 0, len = eles.length; i < len; i++) {
      let child = eles[i].firstChild;
      //创建按钮
      let customDiv = document.createElement("div");
      customDiv.style.display = "flex";
      customDiv.style.height = "40px";
      customDiv.style.width = "100%";

      for (let j = 0; j < 3; j++) {
        let btn = document.createElement("div");
        btn.style.backgroundColor = colors[j];
        btn.style.height = "20px";
        btn.style.width = "20px";
        btn.style.border = "1px solid " + colors[j];
        btn.style.borderRadius = "10px";
        btn.style.margin = "10px 5px 10px 5px";
        customDiv.appendChild(btn);
      }

      console.log("是否匹配", child.nodeName);
      if (child.nodeName != "FIGCAPTION") {
        //没有标题
        eles[i].insertBefore(customDiv, child);
      } else {
        eles[i].replaceChild(customDiv, child);
        //有标题
        let p = document.createElement("p");
        p.style.width = customDiv.offsetWidth - 40 * 3 + "px";
        p.style.height = "40px";
        p.style.textAlign = "center";
        p.style.margin = "0px";
        p.style.lineHeight = "40px";
        p.innerText = child.firstChild.innerText;
        p.style.fontSize = "20px";
        customDiv.appendChild(p);
      }
    }
  },

  ResetTitle: () => {
    var eles = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
    var picker = window.getComputedStyle;
    for (let i = 1, len = eles.length; i < len; i++) {
      let child = eles[i].firstChild;
      let eleStyle = picker(eles[i]);
      //创建标识
      let customDiv = document.createElement("div");
      customDiv.style.display = "flex";
      customDiv.style.width = "15px";
      customDiv.style.backgroundColor = "#61c454";
      customDiv.style.height = eleStyle.fontSize;
      customDiv.style.marginRight = "10px";
      customDiv.style.marginTop =
        (parseFloat(eleStyle.lineHeight) - parseFloat(eleStyle.fontSize)) *
          0.5 +
        "px";
      customDiv.style.borderRadius = "5px";
      // console.log("字体大小",eleStyle.fontSize,parseFloat(eleStyle.lineHeight),parseFloat(eleStyle.fontSize))
      // customDiv.style.verticalAlign
      eles[i].style.display = "flex";
      eles[i].style.verticalAlign = "center";

      eles[i].insertBefore(customDiv, child);
    }
  },

  Init: () => {
    console.log("初始化界面");
    AfterProcess.ResetCodeStyle();
    AfterProcess.ResetTitle();
  },
};
AfterProcess.Init();
参考资料

更新于：2024年5月18日

教程

Hexo

评论