NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化

本文主要介绍对NexT主题升级更新以及如何对NexT7.7.2版本的一些主题美化操作

一、NexT主题升级

我觉得太痛苦了，原来用的NexT5.1.x版本，发现很多网上的东西不能用，然后就在从v5.1.x升级这个介绍进行了升级，直接升级到v7。

1. 在blog根目录下输入：

   git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

   这个指令下载最新的v7.7.2版本（今天是2020.3.29）到名字为next-reloaded的文件中

2. 然后在修改站点配置文件：

   theme: next-reloaded

   这一版本需要注意，中文由原来的zh-Hans变成了zh-CN

3. 最后 hexo s --debug

   就是全新版本了，很多东西需要重新配置了，尤其是原来/next/source/css/这个文件下很多东西都没了已经没有了,似乎都是统一到根目录下的source中了，我也没有太搞清楚。下文有实际案例具体介绍。

二、主题优化

说在前面：v7.7.2版本的很多东西都集成好了，可以直接在_config.yml进行true/false选择即可，只要仔细读读每一项的注释，很快就能配置好了。

下面一部分有关主题优化的是我觉得我读注释不太能理解的，以及注释没有提到的，当然后续可能也会更新一些新的主题优化相关的内容

1. 查看Hexo博客NexT版本

在主题文件中找到package.json可以看到

2.给文章添加阴影效果

首先主题配置文件取消如下代码的注释

style: source/_data/styles.styl

在 blog/source/_data下创建 styles.styl文件，_data文件也是我手动创建的，在styles.styl文件中添加如下内容：

// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

但是目前来看只有阅读文章的时候会出现阴影效果不知道为什么主页没有这个效果

3. 给文章添加 本文结束 标记

首先主题配置文件取消如下代码的注释

postBodyEnd: source/_data/post-body-end.swig

在 blog/source/_data下创建post-body-end.swig文件，（_data文件也是我手动创建的）在post-body-end.swig文件中添加如下内容：

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

效果如图：

4. 阅读全文按钮颜色设置

首先主题配置文件取消如下代码的注释

variable: source/_data/variables.styl

在 blog/source/_data下创建variables.styl文件，（_data文件也是我手动创建的）在variables.styl文件中添加如下内容：

// Buttons
// --------------------------------------------------
$btn-default-bg                 = white;
$btn-default-color              = #006762;
$btn-default-font-size          = $font-size-small;
$btn-default-border-width       = 2px;
$btn-default-border-color       = #006762;
$btn-default-hover-bg           = #456f95;
$btn-default-hover-color        = white;
$btn-default-hover-border-color = #456f95;

效果如图：

5. 如何添加文章版权

在主题配置文件找到creative_commons, 设置post为true，其中sidebar根据自己喜好选择

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

6.文章目录不自动编号

在主题配置文件中找到toc并设置number属性为false

7. 网页底部的动态桃心图像

在主题配置文件中找到下面内容，设置其中animated为true

icon:
		 name: user
    animated: true
   color: "#006762"

效果就是扑通扑通的跳动心脏

---

以后再有什么配置的再说吧。今天到此结束啦，累死了，搞了大半天，太痛苦。