hexo配置最新next主题美化

前言

截止到写这博客的时间，花费了一天左右的时间，将next主题美化了一下，以此记录。
效果查看前往我的个人博客

模板

我的博客使用next模板为Mist，打开主题配置文件

添加背景线条效果

我是参考canvas-nest官方网站

创建文件

在根目录的source 文件夹下创建_data文件夹，然后创建footer.swig

注意不要将位置创建到主题里面去，然后将代码拷贝进去即可

<script color="0,0,0" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

其中color是颜色值，opacity是透明度，zIndex是现在层级，count是线条数量。

设置路径

打开主题配置文件
搜索 custom_file_path 将footer注释打开

然后 hexo g ， hexo s ，启动看看效果

首页文章之间周围有边框

刚开始这个首页文章之间没有边框，每个文章之间没有明显的间隔。
效果：

打开：\themes\next\source\css_common\components\post\post.styl

大概35行，找到motion.transition.post_block
修改前：

if (hexo-config('motion.transition.post_block')) {
    .post-block, .pagination, .comments {
      opacity: 0;
    }
  }

修改后：

  if (hexo-config('motion.transition.post_block')) {
    .post-block{
       opacity: 0;
       padding: 25px;
       -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
       -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
   }
   .pagination, .comments {
      opacity: 0;
    }
  }

然后 hexo g ， hexo s ，启动看看效果

修改文章之间的间隔

默认的文章间距120px，有点大。

打开：\themes\next\source\css_schemes\Mist_posts-expand.styl

大概24行，找到.post-block:not
修改前：

  .post-block:not(:first-child) {
    margin-top: 120px;
  }

将120px，修改为你想要的间距，我改成了20px
修改后：

  .post-block:not(:first-child) {
    margin-top: 20px;
  }

评论数显示为英文问题

我使用的Valine评论，但是文章标题下面显示的评论数为英文。
打开：\themes\next\languages\zh-CN.yml

在post下面新增：

comments.valine: 评论数

注意空格，和下面保持对齐