不会飞的章鱼

熟能生巧，勤能补拙；念念不忘，必有回响。

Hexo NexT主题7.8.0新版本美化

发表于 分类于
本文字数： 8.9k 阅读时长 ≈ 8 分钟

崩溃的边缘

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

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

准备阶段

本文将省略xxx.github.io等Github Pages的配置，并且默认你已经安装完Hexo和Node，因此我们的关注点就是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.yml和themes/next/_config.yml文件中，只要谁的override为true，就用哪一个当做配置文件，那我们当然是选择_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 博客是静态网站，用不了 php。 NexT主题已经实现这个功能，它用了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 douban跟hexo deploy的前缀都是hexo d。

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

本地呈现的效果
电影：

读书：

游戏：

小结

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

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

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

参考文章

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

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