Hexo + Next深度美化指北

发表于 更新于 分类于 阅读次数： 本文字数： 2.6k 阅读时长 ≈ 7 分钟
记录Hexo博客站初始化后，使用NexT主题的美化工作。

读前须知

阅读该文章时，应该已经完成博客站的初始化配置，若未进行初始化配置，请阅读前置文章Hexo + Github Pages建站指北和Hexo站点基本配置与实用工具指北。

首先，由于不同版本环境配置不尽相同，先贴出我使用的系统环境如下：

  • Hexo: 5.4.0
  • Git: 2.29.2.windows.3
  • Node.js: 15.4.0
  • NexT: 8.7.0

为了后续陈述方便，请注意区分两个配置文件，前者称为站点配置文件，后者称为主题配置文件。

1
2
3
Hexo/_config.yml

Hexo/themes/next/_config.yml

并且将以下命令称为本地调试。

1
$ hexo s -g

NexT主题安装

同样，先贴出NexT主题官网，感兴趣的朋友可以自取。

安装NexT主题，我们需要先进入站点目录，并在此打开Git Bash，键入以下命令：

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

仓库克隆完成后，进入站点配置文件，并搜索theme字段，更改其值为next。

至此，NexT主题安装完毕，执行以下命令检查是否更换成功。

1
2
$ hexo clean
$ hexo s -g

由于NexT主题一直在更新，故在此贴出更新命令。

1
2
$ cd themes
$ git pull

NexT主题深度美化

如果还未完成Hexo站点的基本配置，请看前置文章Hexo站点基本配置与踩坑指北。

由于内容很多，一直在持续更新并填坑，欢迎大家持续关注。有想要添加的功能可以通过侧边栏的微信联系我。

另外，next主题在8.x版本已经停止使用 swig和 ejs 文件，取代使用 njk 文件。同时，该主题的文件组织方式与低版本也有所不同，具体文件组织结构如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
├── docs				# 官方说明文档
├── languages				# 语言文件夹，常用的如下
|	├── zh-CN.yml			# 简体中文
|	├── zh-HK.yml			# 繁体中文
|	├── zh-TW.yml			# 繁体中文
|	└── en.yml			# 英文
├── layout				# 布局文件夹
|	├── _macro			# 自定义布局文件夹，覆盖原有布局
|	|	├── post.njk		# 文章布局
|	|	└── sidebar.njk		# 侧边栏布局
|	├── _partials			# 部分布局文件夹，经常修改的如下
|	|	├── post		# 文章布局
|	|	├── sidebar		# 侧边栏布局
|	|	└── footer.njk		# 页脚布局
├── scripts				# 一些js文件
├── source				# 源码
└── _config.yml				# 主题配置文件

主题Scheme

进入主题配置文件 ，搜索scheme字段，即可看到对应的Scheme配置。

NexT主题内置了四种Scheme，分别有不同的布局和样式。

  • Muse
  • Mist
  • Pisces
  • Gemini (我的样式)

其中，Muse和Mist为单栏布局，Pisces和Gemini为双栏布局。可根据自己的喜好进行调整。

进入主题配置文件，搜索 favicon 字段，即可设置网站Logo。

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png # 修改该字段即可
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

背景图片与半透明

本地存储版：挑选一个自己喜欢的背景图片，将其放置于Hexo/themes/next/source/images文件夹下。

CDN版：利用Cloudianry，上传背景图片并复制其url。

进入文件夹 /Hexo/source，并新建 _data文件夹，在文件夹下新建 styles.styl 文件。

进入主题配置文件，并搜索字段 custom_file_path ，将style行取消注释，即设置：

1
style: source/_data/styles.styl

打开刚刚创建的styles.styl文件，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    background:url(/images/background.jpg);//图片路径
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
		opacity: 0.85;//设置文章主体透明度
}

//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

本地调试即可观察到背景图片。

侧边栏标签、分类、归档个数默认不显示，可通过以下设置调整。

进入主题配置文件，并搜索 menu_settings 字段，可根据喜好进行调整。

1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true #是否显示图标
  badges: true #是否显示数量

本地搜索功能

通过以下命令安装搜索插件：

1
$ npm install hexo-generator-searchdb --save

进入主题配置文件，并搜索 local_search 字段，配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  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 the search data when the page loads.
  preload: false

本地调试后，会发现侧边栏菜单出现了搜索选项，即配置成功。

显示文章目录

进入主题配置文件，并搜索 toc 字段，配置如下：

1
2
3
4
5
6
7
8
9
10
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

网易云音乐挂件

进入网易云网页版，登录账号并选择想要添加的歌单，在歌单上方点击生成外链播放器。

图

选择iframe插件并根据自己的喜好调整尺寸。

图

复制下方的HTML代码，并进入 Hexo/themes/next/layout/_macro 文件夹，在合适的地方添加以下代码：

1
2
3
<div id="music163player">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width= 330 height=110 src="//music.163.com/outchain/player?type=0&id=4889230954&auto=0&height=90"></iframe>
</div>

<iframe> 标签内放置刚刚复制的HTML代码，建议关闭自动播放功能。注意该元素的大小受容器限制，可以根据需要调整其宽度。

页面边框圆角

主题默认的页面边框均为方框，看起来比较生硬，我们可以修改css样式将其改为圆角矩形。

进入 Hexo/source/_data 目录，新建 variables.styl 文件，并添加以下代码：

1
2
$border-radius-inner     = 10px 10px 10px 10px;
$border-radius           = 10px;

进入主题配置文件，并搜索 custom_file_path 字段，将variable行取消注释。

本地调试后，可以看到边框已经有了圆角样式。

访客统计

进入主题配置文件，并搜索 busuanzi_count 字段，设置如下：

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

本地调试后，即可在网站底部观察到访客和浏览量统计。注意，由于busuanzi本地统计数据使用同一个数据库，在本地的浏览量与访客显示异常，部署后即可恢复正常。

为了增加可读性，可以增加如下设置。

进入 Hexo/themes/next/layout/_partials 目录，打开 footer.njk 文件。

搜索 busuanzi_value_site_uv字段，修改值为：

1
访客人数：<span id="busuanzi_value_site_uv"></span>人

搜索 busuanzi_value_site_pv 字段，修改值为：

1
浏览总量：<span id="busuanzi_value_site_pv"></span>次

文章字数统计、阅读时长估计

通过以下命令安装插件：

1
$ npm install hexo-symbols-count-time --save

进入主题配置文件，并搜索 symbols_count_time 字段，设置如下：

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

进入站点配置文件，添加 symbols_count_time 字段，设置如下：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true               # 文章字数统计
  time: true                  # 文章阅读时长
  total_symbols: true         # 站点总字数统计
  total_time: true            # 站点总阅读时长
  exclude_codeblock: true     # 排除代码字数统计
  awl: 2                      # 每个单词所占字符数，中文建议设置为2，英文建议设置为4
  wpm: 200                    # 每分钟阅读单词数，中文建议设置为300，英文建议设置为275
  suffix: "mins"              # 时间单位

在本地调试后，即可在每篇文章的标题下观察到文章字数统计和阅读时间估计。

同样，为了增加可读性，进入 Hexo/themes/next/layout/_partials 目录，打开 footer.njk 文件。

搜索 symbols_count_time.count_total 字段，修改值为：

1
本站总字数&asymp;<span title="{{ __('symbols_count_time.count_total') }}">{{ symbolsCountTotal(site) }}</span>

搜索 symbols_count_time.time_total 字段，修改值为：

1
阅读本站耗时&asymp;<span title="{{ __('symbols_count_time.time_total') }}">{{ symbolsTimeTotal(site, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>

网站运行时间

进入 Hexo/themes/next/layout/_partials 目录，打开 footer.njk 文件。

在合适的位置添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
	<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
	<script>
		var now = new Date();
		function createtime() {
			var grt= new Date("08/15/2021 16:00:00");
			now.setTime(now.getTime()+250);
			days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
			hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
			if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
			mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
			seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
			snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
			document.getElementById("timeDate").innerHTML = "本站已持续运行 "+dnum+" 天 ";
			document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
		}
	setInterval("createtime()",250);
	</script>
</div>

注意修改grt为你的建站时间。

在本地调试后，即可在页面底部观察到运行时间。

隐藏网站底部power by Hexo / 强力驱动

进入主题配置文件，并搜索 powered 字段，修改其值为false即可。

阅读更多按钮

进入主题配置文件，并搜索 read_more_btn 字段，修改其值为true。

注意，该按钮添加后，有两种生成文章摘要的手段，一种是在文章中添加 description meta数据，另一种是在文章正文中添加 <!–more–>标识。推荐使用第二种。

代码高亮

进入主题配置文件，并搜索 codeblock 字段，在高亮主题试用网址可根据自己的喜好挑选高亮主题。

我的配置如下：

1
2
3
4
5
6
7
8
9
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: foundation
    dark: foundation
  prism:
    light: prism
    dark: prism-dark

回到顶部按钮与阅读进度显示

进入主题配置文件，并搜索 back2top 字段，设置如下：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

本地调试后，可在侧边栏观察到阅读进度，点击即可回到顶部。

顶部阅读进度条

进入主题配置文件，并搜索 reading_progress 字段，设置如下：

1
2
3
4
5
6
7
8
9
10
# Reading progress bar
reading_progress:
  enable: true
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 4px

结语

生命不息，美化不止，希望大家都能在此搭建出令自己满意的小站~

Hexo建站及主题美化系列至此结束，欢迎大家关注本站的其他博客！！