Hexo博客搭建教程《二、主题美化》

发表于 更新于 分类于 阅读次数：

本教程基于Hexo v4.2和Next v7.7作为教学案例进行演示。
从第一篇建站后的主题美化，并进行自定义修改，可以让大家按照自己的想法进行美化改造。

下载主题

例如 Next主题，进入官网Github后，可以看到介绍下载内容。

1
2
3
4
# 进入hexo建站文件夹
cd hexo
# 下载next主题到themes文件夹
git clone https://github.com/theme-next/hexo-theme-next themes/next

全局修改主题

打开/HexoBlog/_config.yml，修改：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
  theme: next

注意：HexoBlog建站文档里会有两个_config.yml配置文件，各存在于：

  • HexoBlog/_config.yml
  • HexoBlog/themes/next/_config.yml

其中，上面的配置文件是针对于全局Hexo的配置文档，例如博客名称、主题、链接、以及git保存链接。
下面这一个是针对next这个主题的具体配置信息，请勿混淆。

主题自带样式修改

像Next这样的使用量超广的主题，在主题配置文件下都可以有很多自定义的详细修改参数，一般都可以通过true和false来进行修改。

首页菜单栏

这部分可以自主定义博客的几大类别：首页、存档、分类、标签、关于。

比如：

1
2
3
4
5
6
7
menu:  #目录
  home: / || home  #首页
  archives: /archives/ || archive  #存档目录
  categories: /categories/ || th  #分类目录
  tags: /tags/ || tags  #标签目录
  about: /about/ || user  #关于目录
  # 链接的值 ：链接的目录位置 || 链接的图标

这部分可以增减，依靠个人喜好，也可以进行目录名称的修改。修改文章大目录的位置在HexoBlog\themes\next\languages\zh-CN.yml里。

链接的值不可修改，一旦修改next主题识别不到位置。需要修改的是在对应的翻译文档里将所定义的分类目录修改为指定的名称。

例如：

themes\next\languages\zh-CN.yml
1
2
3
4
menu:
  home: 大世界 # home: 首页
  archives: 全部文章 # archives: 归档
  categories: 归类文档 # categories: 分类

菜单栏样式

此处修改目录样式

1
2
3
menu_settings:
  icons: true # 是否图标显示
  badges: true # 计数或者圆点

侧边栏样式

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
sidebar: # 侧边栏位置
  position: left
  #position: right

  # 侧边栏宽度
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  width: 260

  # 侧边栏展示方式(只针对于 Muse | Mist)
  #  - post    发布的文章页面自动展开（默认）
  #  - always  所有页面自动展开
  #  - hide    只有点击侧边栏切换图标时才展开
  #  - remove  移除所有侧边栏界面
  display: always

avatar: # 侧边栏头像
  url: #你的头像地址（图床）
  rounded: false #圆型头像
  rotated: false #旋转

site_state: true #日志、分类、标签计数显示

social: #展示社交链接
  GitHub: https://github.com/MichaelVector || github
  E-Mail: mailto:cbw390179428@cloud.com || envelope

toc: #文章标题目录
  enable: true
  number: true
  wrap: true #换行
  expand_all: false #自动展开所有
  max_depth: 6 #最大目录深度

文章设置

首页文章排序

Hexo默认是以日期date进行倒序排列，但有时候更新了文章，想让最新的更新排在前列呢？
只需修改一个参数即可：

1
2
3
4
5
6
7
8
9
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
- # order_by: -date
+ order_by: -update

阅读更多

在文章简介后可以加入<!-- more -->来缩短在首页显示的内容（而不是整个篇幅）。
同时需要打开read more button的开关。

1
2
<!-- more -->
read_more_btn: true

文章信息

1
2
3
4
5
6
7
post_meta:
  item_text: true #显示文字
  created_at: true #创建时间
  updated_at: 
    enable: true #更新时间
    another_day: true # 同一天则不显示
  categories: true #显示分类

文章计数

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true #另起一行
  item_text_post: true #文字计数
  item_text_total: true #文字计数
  awl: 3 
  wpm: 300

代码块样式

1
2
3
4
5
6
codeblock:
  highlight_theme: night eighties
  copy_button:
    enable: true
    show_result: true
    style: flat # Available values: default | flat | mac

页脚

页脚标签美化

使用图标来代替#的标签样式

1
tag_icon: true

打赏设置

1
2
3
4
5
6
7
8
reward_settings:
  enable: true
  animation: false #动态
reward:
  wechatpay: /images/paypal.png
  alipay: /images/paypal.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

相关文章

1
2
3
4
5
6
related_posts:
  enable: true
  title: #自定义标题，留空做默认
  display_in_home: true
  params:
    maxCount: 5

功能模块

返回顶层

1
2
3
4
back2top:
  enable: true
  sidebar: false #是否显示在侧边栏
  scrollpercent: true #百分比

阅读进度条

1
2
3
4
5
reading_progress:
  enable: true
  position: top # Available values: top | bottom
  color: "#37c6c0"
  height: 3px

Github条幅

1
2
3
4
github_banner:
  enable: true
  permalink: https://github.com/MichaelVector
  title: Follow me on GitHub

本地搜索

1
2
3
4
5
6
7
8
local_search:
  enable: true
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  preload: false

第三方代码样式

增加建站时间

修改footer.njk，在最后加上：

/themes/matery/layout/_partial/footer.njk
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
<div class="sitetime">
<span id="sitetime"></span>
</div>

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        var t1 = Date.UTC(2018, 09, 11, 00, 00, 00); //北京时间
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
    }
    siteTime();
</script>

鼠标点击特效

下载脚本文件

点击下方按钮下载相应的脚本，并置于 themes\next\source\js\cursor\ 目录下：

爆炸特效 礼花特效 爱心特效 文字特效

添加引用代码、文件

在主题自定义布局文件中添加以下代码：

layout\_third-party\cursor.njk
1
2
3
4
5
6
7
8
9
10
11
12
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
  <script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
  <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  <script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
  <script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
  <script async src="/js/cursor/text.js"></script>
{% endif %}

添加_layout.njk引用

如果 cursor.njk 文件不存在，需要手动新建并在布局页面中 body 末尾引入：

layout\_layout.njk
1
2
3
4
5
6
      ...
      {%- include '_third-party/math/index.njk' -%}
      {%- include '_third-party/quicklink.njk' -%}
+     {%- include '_third-party/cursor.njk' -%}
  </body>
  </html>

增加选择变量

在主题配置文件中添加以下代码：

_config.yml
1
2
# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks

这样即可在配置文件中一键快速切换鼠标点击特效。

Canvas-nest 背景特效

新版本的Next已经移除了对canvas-nest的支持，但此特效依旧是我的最爱。
现用最简便的方式引用添加js文件来添加支持。

新增一个njk文件

njk文件的原身就是swig。
在Hexo\themes\next\layout\_third-party里新建nest.njk

添加内容：

themes\next\layout\_third-party\nest.njk
1
2
3
4
5
6
7
<script 
    color="0,0,0"
    opacity="0.7"
    zIndex="-1"
    count="120" 
    src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js">
</script>

添加全局引用

在文件layout.njk中，最下方添加刚才新建的nest.njk文件。

layout\_layout.njk
1
2
3
4
5
6
7
      ...
      {%- include '_third-party/math/index.njk' -%}
      {%- include '_third-party/quicklink.njk' -%}
      {%- include '_third-party/cursor.njk' -%}
+     {%- include '_third-party/nest.njk' -%}
  </body>
  </html>

最后在Next主题的配置文件中打开此脚本的开关：

theme/next/_config.yml
1
nest: true