前言
截止到写这博客的时间,花费了一天左右的时间,将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: 评论数
注意空格,和下面保持对齐