Hexo-Next 主题美化

本文未完成

这类文章百度上应该很多吧,感谢您打开我的网站,我发几个自用修改,备份一下,顺便共享一下。

首先我不是大神!!!而且很多代码都是我从网上找到的,原作者我已经找不到了,如有侵犯还请联系我(提前说不好意思)!!

开始

1.文章置顶

插件安装

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

修改文章模板

打开hexo主文件夹,找到scaffolds文件夹。
修改post.md文件,加入这一行:

1
top : false

这样以来以后生成的post文件都自己带有top属性。
需要置顶的文章把false改为true就行了.

设置置顶标志

打开:/Hexo主目录/themes/next/layout/_macro 目录下面的post.swig文件,定位到<div class="post-meta">插入以下代码:

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

其中7D26CD是颜色的RGB值,可以更换。

以下是效果:

image

2.引入一言API

可在网站副标题处随机刷新一句话,来自一言API

打开Hexo配置文件_config.yml 注意是Hexo配置文件不是Next配置文件!

subtitle 那里填:

1
<script type="text/javascript" src="https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=50&encode=js&fun=sync&source="></script><div id="hitokoto"><script>hitokoto()</script>

然后hexo g就OK了

以下是效果:

image

3.添加文章底部分享按钮


看官若是觉得不错,就打发点猫粮钱吧