不会飞的章鱼

熟能生巧,勤能补拙;念念不忘,必有回响。

Hexo NexT主题7.8.0新版本美化

崩溃的边缘

前天晚上,我使用我的电脑准备更新一下博客内容,结果发现报错:Ignoring local @import of "font-embedded.css,网上查了下,说是要更新Next版本到最新即可。

因此,痛定思痛,决定先整我的博客。

准备阶段

本文将省略xxx.github.ioGithub Pages的配置,并且默认你已经安装完HexoNode,因此我们的关注点就是Next的配置和美化工作。

初始化

1
2
3
4
5
6
7
8
9
# hexo 初始化
$ mkdir myblog
$ cd myblog/
$ hexo init
# 创建存放next源码的文件夹
$ mkdir themes/next

# 注:此时运行以下命令的位置,应该在 myblog/下
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

创建完成后,目录结构应该为

1
2
3
4
5
6
7
8
9
10
11
12
.
├── _config.yml #博客站点配置文件
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── scaffolds
├── source # 该文件夹下会存放_data/next.yml配置文件
└── themes
└── next
├── _config.yml #主题配置文件

以前用Next主题写博客文章的时候,总会有一个疑惑,就是我直接在themes/next文件夹下修改了源码来适配,那Next更新了版本之后,我岂不是又要删了重新配置?
因此这一疑惑在7.8.0版本解决。

源码与配置文件分离

首先,在source文件夹下创建一个名为_data/的文件夹,在_data/文件夹下新建next.yml文件,将themes/next/_config.yml文件里的内容全部复制到source/_data/next.yml里,原因在Next源码里有说明:

1
2
3
4
5
# If false, merge configs from `_data/next.yml` into default configuration (rewrite).
# If true, will fully override default configuration by options from `_data/next.yml` (override). Only for NexT settings.
# And if true, all config from default NexT `_config.yml` have to be copied into `next.yml`. Use if you know what you are doing.
# Useful if you want to comment some options from NexT `_config.yml` by `next.yml` without editing default config.
override: false

哦~~~我懂了,意思就是_data/next.ymlthemes/next/_config.yml文件中,只要谁的overridetrue,就用哪一个当做配置文件,那我们当然是选择_data/next.yml

同时,在站点配置文件里设置next为博客的主题

1
theme: next

主题配置文件

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

至此,准备工作已经完成,运行

1
$ hexo clean && hexo g && hexo s

访问localhost:4000,就可以看到初始效果了。

Next美化

设置博主文字描述和中文语言

站点配置文件修改site

1
2
3
4
5
6
7
8
# Site
title: 不会飞的章鱼
subtitle: '熟能生巧,勤能补拙;念念不忘,必有回响。'
description: 'All is Well.'
keywords: ···计算机,旅行,思考,网络,数据结构,操作系统,算法,数据库,服务器,图形,图像,黑客,OpenGL,Go,C,C++,Python···
author: Neo Zhang
language: zh-CN
timezone: Asia/Shanghai

配置 hexo 中的 about、tag、categories、sitemap 菜单

默认的主题配置文件_config.yml中,菜单只开启了首页和归档,我们根据需要,可以添加 about、tag、categories、sitemap 等菜单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
movies: /movies/ || fa fa-film #添加了 movies 页
books: /books/ || fa fa-book
games: /games/ || fa fa-gamepad
#reward: /reward || fa fa-money
wishlist: /wishlist|| fa fa-heart
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat

更多的图表可以到Font Awesome中文网里面去找,其中 || 后面是你想要设置的图标的名字。

手动生成 hexo 菜单对应文件

新建 about 页面

about 页面一般用来介绍站点信息和博主的个人介绍等。

1
hexo new page about

然后会发现多了个source/about文件夹,里面有一个index.md文件,可以使用Markdown写一写自己想写的内容。

新建一个 tags 页面

1
hexo new page tags

tags页面文件 source/tags/index.md 的头部修改为:

1
2
3
4
5
6
---
title: 标签
date: 2022-04-26 18:12:05
type: "tags" # 类型一定要为tags
comments: false # 提示这个页面不需要加载评论
---

新建一个 categories 页面

1
hexo new page categories

categories 页面文件 source/categories/index.md 的头部修改为:

1
2
3
4
5
6
---
title: 文章分类
date: 2022-04-26 18:12:05
type: "categories"
comments: false
---

新建一个 404 页面

首先在source目录下创建自己的 404.html

注意:Hexo 博客的基本内容是一些 Markdown 文件,放在 source/_post 文件夹下,每个文件对应一篇文章。除此之外,放在 source 文件夹下的所有开头不是下划线的文件,在 hexo generate 的时候,都会被拷贝到 public 文件夹下。但是,Hexo 默认会渲染所有的 HTML 和 Markdown 文件。

因此我们可以简单地在文件开头加上 layout: false 一行来避免渲染:

1
2
3
4
5
6
7
8
9
10
11
12
layout: false

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script>
</body>
</html>

配置 hexo 本地搜索

本地搜索的原理:
对于动态网站来说,可以通过 php 实现。但是,Hexo 博客是静态网站,用不了 phpNexT主题已经实现这个功能,它用了Hexo的拓展包 hexo-generator-searchdb,预先生成了一个文本库 search.xml,然后传到了网站里面。在本地搜索的时候,NexT 直接用 javascript 调用了这个文件,从而实现了静态网站的本地搜索。

设置过程

安装插件:

1
npm install hexo-generator-searchdb --save

然后我们修改站点配置_config.yml 文件,添加如下内容:

1
2
3
4
5
6
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 100
  • path:索引文件的路径,相对于站点根目录
  • field:搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面
  • limit:限制搜索的条目数

然后修改主题配置文件next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/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

设置 hexo 中的 rss 订阅

安装插件:

1
npm install hexo-generator-feed --save

在站点配置文件_config.yml 中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:

底部 footer 可以开关显示 hexo 信息、theme 信息、建站时间等个性化配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
since: 2018 # 建站开始时间
icon:
name: user # 设置 建站初始时间和至今时间中间的图标,默认是一个'小人像',更改user为heart可以变成一个心
animated: true
color: "#808080" # 更改图标的颜色,红色为'#ff0000'
powered:
enable: true # 开启hexo驱动
version: true # 开启hexo版本号
theme:
enable: true # 开启主题驱动
version: true # 开启主题版本号
custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> # 这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages

头像信息设置

1
2
3
4
5
avatar:
url: /images/neozhang.png # 设置头像资源的位置
rounded: true # 开启圆形头像
opacity: 1 # 不透明的比例:0就是完全透明
rotated: false # 不开启旋转

社交信息和友链配置

社交信息配置:

1
2
3
4
5
6
7
8
social: 
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
Google: https://plus.google.com/yourname || google

social_icons:
enable: true # 显示社交图标
icons_only: false # 只显示图标,不显示文字

友链配置:

1
2
3
4
5
6
7
# Blog rolls
links_icon: link # 友链的图标 参考上文
links_title: Links # 友链的title 比如你可以更改为 友情链接
links_layout: block # 友链摆放的样式:按块(一行一个)
#links_layout: inline # 友链摆放的样式:按线摆放(一行很多个),注意,同时只能一种样式
links:
Title: http://example.com/ # 友链的地址

官方提供的友链放在侧边栏下面,视觉上比较臃肿。
推荐这篇文章Hexo-NexT 新增友链

首页文章不展示全文显示摘要

接在文章中添加 <!-- more --> 来精确控制摘要内容。

首页文章属性

1
2
3
4
5
6
7
post_meta:
item_text: false # 设为true 可以一行显示,文章的所有属性
created_at: true # 显示创建时间
updated_at:
enabled: true # 显示修改的时间
another_day: true # 设true时,如果创建时间和修改时间一样则显示一个时间
categories: true # 显示分类信息

页面阅读统计

1
2
3
4
5
6
7
8
busuanzi_count:
enable: false # 设true 开启
total_visitors: true # 总阅读人数(uv数)
total_visitors_icon: user # 阅读总人数的图标
total_views: true # 总阅读次数(pv数)
total_views_icon: eye # 阅读总次数的图标
post_views: true # 开启内容阅读次数
post_views_icon: eye # 内容页阅读数的图标

字数统计、阅读时长

首先安装插件:

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

主题配置文件next.yml 修改如下:

1
2
3
4
5
6
symbols_count_time:
separated_meta: true # false会显示一行
item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
item_text_total: true # 底部footer是否显示字数统计属性文字
awl: 4 # 计算字数的一个设置,没设置过
wpm: 275 # 一分钟阅读的字数

站点配置文件_config.yml 新增如下:

1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

内容页里的代码块新增复制按钮

1
2
3
4
codeblock:
copy_button:
enable: false # 增加复制按钮的开关
show_result: false # 点击复制完后是否显示 复制成功 结果提示

配置微信,支付宝打赏

1
2
3
4
5
6
7
8
9
10
11
12
13
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
comment: 金额随意,一元也是鼓励^_^

reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

文章原创申明

主题配置文件:

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 默认显示版权信息
language:

相关文章推荐

安装推荐文章的插件:

1
npm install hexo-related-popular-posts --save

主题配置信息如下:

1
2
3
4
5
6
7
8
9
10
related_posts:
enable: true
title: 相关文章推荐 # 属性的命名
display_in_home: false # false代表首页不显示
params:
maxCount: 5 # 最多5条
#PPMixingRate: 0.0 # 相关度
#isDate: true # 是否显示日期
#isImage: false # 是否显示配图
isExcerpt: false # 是否显示摘要

代码块风格美化为mac样式

主题next.yml配置文件修改:

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: mac

添加豆瓣个人主页

hexo-douban是可以在 Hexo 页面中嵌入豆瓣页面的插件。

安装插件:

1
npm install hexo-douban --save

在站点的配置文件_config.yml里写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
user: mythsman
builtin: false
book:
title: 'This is my book title'
quote: 'This is my book quote'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
game:
title: 'This is my game title'
quote: 'This is my game quote'
timeout: 10000
  • user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:”https://www.douban.com/people/xxxxxx/" ,其中的”xxxxxx”就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入hexo s和hexo g中,默认是false,另一可选项为true(1.x.x版本新增配置项)。
  • title: 该页面的标题.
  • quote: 写在页面开头的一段话,支持html语法.
  • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

如果只想显示某一个页面(比如movie),那就把其他的配置项注释掉即可。

需要注意的是,通常大家都喜欢用hexo d来作为hexo deploy命令的简化,但是当安装了hexo douban之后,就不能用hexo d了,因为hexo doubanhexo deploy的前缀都是hexo d

如果配置了builtin参数为true,那么除了可以使用hexo douban命令之外,hexo ghexo s也内嵌了生成页面的功能。

本地呈现的效果
电影:

读书:

游戏:

小结

用了大概两天左右的闲暇时间,完成了博客的美化和配置,非常感谢这次出故障的经历,使我翻找官方issue,解决了曾经博客上遗留的许多问题,也成功美化了我的博客,非常开心。

正如《武庚纪》中大剑士子羽被十刑大神抓进牢中后所说的:虽然不想承认,但十刑的直觉是对的,修习已久的炼气术被废,那也只能面对现实,从头练起就是了。首先,必须耐心地去修复错乱受损的经脉,虽然很吃力,但曾经四散的炼气,仍一点一滴重新凝聚起来,化为古剑。我发现,把以往的一切推倒重来,对于剑道反而有新的领悟,如今炼成的剑,只会比以往更强大,更霸道。

希望自己终将炼成属于自己的剑。

参考文章

hexo 主题 next7.8 版本配置美化
hexo theme next7.8 主题美化
Hexo-NexT (v7.0+) 主题配置

------ 本文结束------
如果本篇文章对你有帮助,可以给作者加个鸡腿~(*^__^*),感谢鼓励与支持!