搭建个人主页保姆级教程（三）

干货时刻

hexo个人主页系列教程：本文主要next主题的文章的相关优化工作。

增加标签和分类页面

我们按照路径themes/next/_config.yml打开主题配置文件，找到menu字段，更改为：

menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

tags为标签页界面，以标签为分类基准展示整个站点的文章；categories为归类页界面，以类别为分类基准展示文章。

例如tags: /tags/ || fa fa-tags中，/tags/为页面的前端路由。fa为图标的标签属性，用于统一化样式。fa-tags为图标的名称，next主题默认使用的图标库是 Font Awesome，如果想更换图标，只需要到该网站记下对应图标的名称，然后在配置文件中替换即可。

OK，设置好后进入终端，键入：

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

此时，我们已经新建了两个页面，在themes/sources文件夹下可以看到这两个同名文件夹，每个文件夹下都有一个index.md文件。我们分别打开，进行修改：

# tags/index.md
---
title: 我是选择标签的页面
date: 2022-04-14 10:58:17
type: "tags" # 设置页面类型
comments: false
---
# categories/index.md
---
title: 我是选择类别的页面
date: 2022-04-14 12:13:13
type: "categories"
comments: false
---

给文章添加标签和分类

上节说到，我们已经增加了标签和分类两个页面，接下来，我们就要给文章添加标签和分类。

打开一篇文章，我们可以看到开头已经有yaml语法的框架了，不知道或者想回顾yaml语法的话移步：开发者必须要掌握的 YAML 知识点。将其修改为：

---
title: 张三的自我救赎
date: 2022-04-24 10:25:34
categories:
  - 随笔
tags:
  - 张三
  - 笔记
keywords:
  - 张三
  - 救赎
description: "这是张三的自我救赎。"
---

title是文章的标题；date是文章的创建时间；categories是一个数组，[随笔]表示该文章的类别是随笔，[随笔, 子随笔]表示该文章的类别是随笔下的子类别子随笔；tags数组中是要添加的标签；keywords数组中是文章关键词；description是文章的描述，在主页中会显示成摘要。接着走一波hexo clean; hexo g; hexo s就可以在tags和categories页面找到这篇文章啦。

调整文章间距和阴影效果

进入themes/next/source/css/_common/post/post.styl路径，找到.use-motion选择器，在if(hexo-config('motion.transition.post_block'))后面进行修改，添加上.post-block：

.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block, .pagination, .comments {
      opacity: 0;
    }
    .post-block {
      margin-top: 0px;
      margin-bottom: 20px;
      padding: 25px;
      background:rgba(255,255,255,0.9) none repeat scroll !important;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
  }

修改文章底部标签样式

进入路径themes/next/_config.yml，修改主题配置文件的tag_icon字段：

tag_icon: true

这将用图标，替换标签的#。

修改文章超链接样式

进入路径themes/next/source/css/_common/components/post/post.styl，找到.post-body p a选择器，将其替换为：

.post-body p a {
  color: #330099;
  border-bottom: none;
  border-bottom: 1px solid #330099;
  &:hover {
    color: #ff8c00;
    border-bottom: none;
    border-bottom: 1px solid #ff8c00;
  }
}

代码块高亮

进入路径themes/next/_config.yml，修改主题配置文件的codeblock字段：

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: false
    # Available values: default | flat | mac
    style: mac

codeblock字段会更改代码块的主题样式，感兴趣的同学不妨都尝试一下，找到自己喜欢的风格。

代码高亮

进入路径themes/next/_config.yml，修改主题配置文件的custom_file_path字段，将style的注释取消：

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  style: source/_data/styles.styl

在blog/source下新建一个_data文件夹，文件夹中新建一个styles.styl文件（不用VScode的同学，可以新建一个styles.txt，再更改它的后缀）。在上面编辑以下代码：

code {
  color: #ff7600;
  background: #fbf7f8;
  margin: 2px;
}
.highlight,
pre {
  margin: 5px 0;
  padding: 5px;
}
.highlight,
code,
pre {
  border: 1px solid #d6d6d6;
}

图片居中预览

进入路径themes/next/_config.yml，修改主题配置文件的mediumzoom字段：

mediumzoom: true

注意，fancybox和mediumzoom是冲突的，所以保存fancybox: false就好。

启用文章目录

进入路径themes/next/_config.yml，修改主题配置文件的toc字段：

toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # 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: true
  # Maximum heading depth of generated toc.
  max_depth: 6

添加本文结束标记

进入路径themes/next/layout/_macro，新建一个名为passage-end-tag.swig的文件，键入以下代码：

<div>
  {% if not is_index %}
  <div style="text-align:center;color: #ccc;font-size:14px;">
    ~~~~~~~~~~~~~~ 本文结束 <i class="fa fa-paw"></i> 感谢您的阅读
    ~~~~~~~~~~~~~~
  </div>
  {% endif %}
</div>

然后进入路径themes/next/layout/_macro/post.swig，找到{### END POST BODY} ###。在它的后面键入以下代码：

{% if not is_index and theme.passage_end_tag.enabled %}
<div>{% include 'passage-end-tag.swig' %}</div>
{% endif %}

如下图所示：

进入路径themes/next/_config.yml，在主题配置文件的末尾添加passage_end_tag字段：

# 文章末尾添加结束标记
passage_end_tag:
  enabled: true

文章末尾添加版权声明

进入路径themes/next/_config.yml，修改主题配置文件的creative_commons字段：

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language: deed.zh

开启文章打赏

进入路径themes/next/_config.yml，修改主题配置文件的reward_settings、reward字段：

reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  comment: 在线要饭 ~~

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

然后，进入themes/next/source/images路径，将你的收款二维码放在里面。

结束语

想要学习更多优质内容的同学，关注收藏一下作者的个人主页：东曜说 ~~