Hexo博客项目：页面美化

Hexo博客项目：页面美化

前言：我使用的主题是经过自己浏览各大佬对于博客每个部分的优化，自行设计和组装成型，需要此主题可以私聊我。其次，配置是使用的yml文件，不懂的可以先去学习了解一下！

---

项目最终效果

---

1.主题更改

1.将网上或者本地的theme包解压到本地Hexo的theme文件夹下

2.将Hexo根目录包中的_config.yml中的theme值修改为包名，比如：

3.修改根目录下_config.yml中的url值为你的网站主URL(要对标你的Pages服务，如：https://xxx.github.io)

4.修改根目录_config.yml中author值为你的名称(如：pure_hearted)

5.修改根目录下_config.yml中description值为你想要的一段描述(如：天行健，君子以自强不息)

比如下面我的设置：

---

2.代码高亮

本主题支持三种代码高亮方式，前两种是hexo内置的highlight和prismjs，后一种是使用的插件hexo-prism-plugin，我推荐使用prismjs

1.首先请先确保你的hexo版本为5.0以上,在根目录下的package.json中可以查看hexo的版本。如果不是5.0.以上，请先升级，例如在根目录下使用如下命令，这个下载的版本号是5.3.0版本，你可以指定下载最新的版本

npm install hexo@5.3.0

2.首先需要在根目录下的_config.yml 文件中，将highlight的enable设置为false，然后将prismjs的enable设置为true，如下所示

3.最后可以通过本主题目录下的_config.yml 文件中prismjs参数来选择主题，个人觉得okaidia和tomorrow好看，我还多留了几个主题

---

3.搜索功能

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

在主题文件夹下的_config.yml文件中设置search为true或者false控制显示隐藏

---

4.新建分类categories页

categories 页是用来展示所有分类的页面，也就是导航上的分类页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要手动或者使用命令新建一个，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2022-11-08 12:30:30
type: "categories"
layout: "categories"
---

---

5.新建分类tag页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2022-11-08 12:30:30
type: "tags"
layout: "tags"
---

---

6.中文链接转拼音插件

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

---

7.订阅功能

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

---

8.Pjax功能

Pjax用来使页面不刷新跳转，音乐可以不间断播放。关闭则跳转页面时候刷新页面

pjax:
  on: true
  animation: circle # false, nprogress, circle
  animationColor: 'orangered' # animation为 nprogress时候的动画颜色, red or #000 ...
  cacheBust: false # url 地址追加时间戳，用以避免浏览器缓存
  timeout: 5000    # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
  banUrl:          # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
      # - '/xxx/'     
      # - '/xxx/' 

---

9.美化最终效果展示