hexo theme next7.8 主题美化

本篇文章是针对 7.8.0 版本的美化笔记，具体效果可以查看我的博客 orduster 个人笔记

参考

小丁的个人博客

hexo 主题 next7.8 版本配置美化

1. 下载主题

最简单的安装方式就是直接克隆整个仓库：

# 进入你的博客目录
cd hexo

# 将仓库复制到博客目录的 themes/next 文件夹中
git clone https://github.com/theme-next/hexo-theme-next themes/next

下载完成之后，可以在博客的 themes 文件夹中看到多了一个名为 next 的目录，这个目录就是主题仓库。

2. 基本设置

2.1 next.yml

自从 NexT-7.3.0 开始，官方推荐使用数据文件将配置和主题分离，这样可以在不修改主题源码的情况下完成主题的配置，便于后续 next 版本更新。

我们将所有的主题配置都放在 hexo/source/_data/next.yml 中，所有的修改都将在这个文件中进行，不修改主题配置文件 next/_config.yml 。

具体步骤：

• 在 hexo/source/_data 目录下新建 next.yml 文件，如果 _data 目录不存在，则创建 _data 目录；
• 将主题配置文件 next/_config.yml 所有内容复制到 hexo/source/_data/next.yml 文件中；
• 将 hexo/source/_data/next.yml 文件中 override 选项设置为 true 。

2.2 使用主题

在站点配置文件 hexo/_config.yml 中，通过改变 theme 选项的值来选择主题。

# 选择 next 主题
theme: next

在 next.yml 中通过改变 scheme 来选择主题样式。

scheme: Gemini

预览，输入下面命令后，在 http://localhost:4000/ 查看效果。

hexo clean && hexo g && hexo s

2.3 设置博客文字描述和语言

站点配置文件 hexo/_config.yml 修改 site 。

# Site
title: orduster 学习笔记 # 网站的标题
subtitle: '' # 子标题
description: '' 
keywords: # 网站关键字
author: orduster # 网站作者
language: zh-CN # 网站采用语言，要跟/theme/***/languages/**.yml下的文件名对应
timezone: '' # 网站的时区

3. 主题美化

3.1 显示本地图片

安装 hexo-asset-image 插件。

npm install https://github.com/CodeFalling/hexo-asset-image --save  

站点配置文件 hexo/_config.yml 中设置 post_asset_folder 的值为 true ，这样新建文章时，hexo 会自动建立一个与文章同名的目录，可以将这篇文章所有的图片放入。

# 文章资源文件夹
post_asset_folder: true

# 使用这种方式引用图片
![](文件夹名/图片名称)

3.2 添加图片放大预览功能

next.yml 文件 fancybox 选项。

fancybox: true

3.3 设置博客文章持久化链接

安装 hexo-abbrlink 插件 。

npm install hexo-abbrlink --save

站点配置文件 hexo/_config.yml 修改 permalink 选项，添加下面内容。

permalink: post/:abbrlink/
abbrlink:
  alg: crc32   # 算法：crc16(default) and crc32
  rep: hex # 进制：dec(default) and hex

需要注意，如果 permalink 设置为 post/:abbrlink.html 可能导致本地图片加载失败

3.4 增加关于、标签、分类页面

主题配置文件 next.yml 修改 menu，将 about、tags、categories 的注释去除。

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

执行下面命令新建相关文件。

hexo new page "about"
hexo new page "tags"
hexo new page "categories"

修改生成页面所在位置和相关配置。

source\about\index.md
source\tags\index.md
source\categories\index.md

---
title: 关于
type: "about"
---

---
title: 标签
type: "tags"
---

---
title: 分类
type: "categories"
---

3.5 添加搜索功能

安装 exo-generator-searchdb 插件 。

npm install hexo-generator-searchdb --save

主题配置文件 next.yml 添加 search 选项，修改 local_search 选项。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
local_search:
  enable: true

3.6 回到顶部按钮

修改主题配置文件 next.yml back2top 选项。

back2top:
  enable: true
  # 将返回按钮设置在侧边栏
  sidebar: false
  # 按钮上显示进度百分比
  scrollpercent: