风萧萧兮易水寒

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_pathfooter注释打开

然后 hexo ghexo 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 ghexo 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: 评论数

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

坚持原创技术分享,您的支持将鼓励我继续创作!