【教程篇】Hexo+ NexT 博客美化配置教程

二叶草

1214
文章

0
评论

2020年1月26日22:58:45美化教程评论阅读模式

嗨，大家好，今天还是继续next主题的美化教程。加油。

教程：

1.修改主题页面布局为圆角

修改主题页面为圆角，有两种方法：

第一种：

打开文件，路径：/themes/next/source/css/_variables/custom.styl

复制粘贴以下代码：

// 修改主题页面布局为圆角
// Variables of Gemini scheme
// =================================================
@import "Pisces.styl";
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color = #eee
// Borders.
// --------------------------------------------------
$box-shadow-inner = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)
$border-radius-inner = initial
$border-radius = initial
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

保存后本地预览，可以看到四周都为圆角了。

第二种：

打开文件，路径：themesnextsourcecss_variablesGemini.styl ，添加以下代码：

// 修改主题页面布局为圆角
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

保存后本地预览，四周为圆角。

2.去掉顶部黑线

顶部黑线如下图：

打开文件，路径：themesnextsourcecss_customcustom.styl ，添加以下代码：

//去掉顶部黑线：
.headband {display:none;}

保存后本地预览，顶部黑线已经去掉。

3.添加动态背景—粒子漂浮聚合

我还以为把动态背景已经写到了教程里了，结果一看没有，赶紧补上。还有好几种动态背景，之后补上。

该功能由 theme-next-canvas-nest 插件提供，在根目录下执行如下命令：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

然后在主题配置文件中找到canvas_nest，修改为：canvas_nest: true 。

保存后本地预览，可以看到线条漂浮聚合效果。

4.文章添加结束标记

在路径：themesnextlayout_macro下新建passage-end-tag.swig文件。

打开passage-end-tag.swig，粘贴以下代码：

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

字体、颜色等等我按照我的喜好修改的，你们按照自己的喜好来。

打开文件，路径：themesnextlayout_macropost.swig，在post-body之后，post-footer之前（如果找不到位置的按照我下图的位置添加）添加以下代码：

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

打开主题配置文件，在最后位置添加以下代码：

post_end_tag:
enabled: true # 是否开启文末的本文结束标记

保存后本地预览，打开文章后会发现文章结束时出现以下效果。

5.设置标题样式

打开文件，路径：themesnextsourcecss_commoncomponentspostpost.styl

粘贴以下代码：

/*修改博文标题样式*/
.page-post-detail .post-title {
font-size: 26px;
text-align: center;
word-break: break-word;
font-weight: $posts-expand-title-font-weight
background-color: #b9d3ee;
border-radius:.3em;
line-height:1em;
padding-bottom:.12em;
padding-top:.12em;
box-shadow:2px 2px 7px #9fb6cd;
+mobile() {
font-size: 22px;
}
}

保存后本地预览，可以看到文章标题样式效果出现。

如果想把主页文章标题一起修改，那么只要去掉 .page-post-detail即可。

保存后本地预览，可以看到主页文章标题也已经有了样式。

6.修改文章底部#为图标

我们正常写的文章，如果有标签的话会在文章末尾出现标签。

但是#不太好看，我们把它换为图标。

打开文件，路径：/themes/next/layout/_macro/post.swig 搜索找到 rel="tag"># 把#替换为如下代码：

保存后本地预览，可以看到文章末尾标签不再是#了，换成标签图标了。

7.设置门户的图标

首先访问网站：

https://www.easyicon.net/

找一张（32*32）的ico图标，或者自己制作也行，图标名称改为favicon.ico 。放在路径：/themes/next/source/images 里。

之后打开主题配置文件，搜索并找到favicon，修改为：

favicon:
small: /images/favicon.ico
medium: /images/favicon.ico

保存后本地预览，可以看到门户图标已经不是默认的了。

8.创建标签页

看似最简单的一个问题搞得我差点心态崩了。请看我踩的坑。

新建标签页首先在根目录下执行命令：

hexo new page tags

执行后会在根目录source文件夹里新建tags。而index.md就是标签页。

打开index.md，最后面添加一行type: "tags" 注意冒号后有一空格。

保存之后本地预览，出现了错误，还是显示找不到标签。

这个看似简单的问题真的是搞得我，查找了好多资料。在快要放弃时找到了，原来是Bug。在主题配置文件里，菜单设置里/后面应该没有空格直接跟||。但是主题默认的是有空格的。所以导致找不到标签页。

删除中间的空格。

保存后本地预览，可以看到标签页已经可以使用了。至于标题是英语，换一下标题就行。

在tags文件夹里的index.md文件把title修改为标签就OK 了。

看到已经完全OK了。太难了，这个坑的我。

9.创建分类页

创建分类页、关于页等等菜单与第8步一样。

命令：

hexo new page categories

修改.md文件，主要title和type，type为categories。相对应。

10.创建关于页

命令：

hexo new page about

修改.md文件，主要title和type，type为about。相对应。

11.显示当前浏览进度

打开主题配置文件，搜索找到b2t和scrollpercent。修改为true。

保存后本地预览

12.个性化回到顶部

自己找一张图片，或者直接用我这张。

下载链接：

https://www.lanzous.com/i8nozmh

把图片放在sourceimages 下。

打开文件，路径：themesnextsourcecss_customcustom.styl。在最后粘贴以下代码：

//自定义回到顶部样式
.back-to-top {
right: 60px;
width: 70px; //图片素材宽度
height: 900px; //图片素材高度
top: -900px;
bottom: unset;
transition: all .5s ease-in-out;
background: url("/images/scroll.png");

//隐藏箭头图标
> i {
display: none;
}

&.back-to-top-on {
bottom: unset;
top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
}
}

保存后本地预览，就可以看到动态效果了，但是这种返回顶部要使第11步的两项为false，否则会出现Bug。