hexo必备插件

主题

next

next是现在算是最火的主题吧。
直接clone并在项目配置中改动theme条目来使用。

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

改变壁纸

参见这里
改变 hemes\next\source\css _custom\custom.styl
增加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
body {
background:url(https://source.unsplash.com/random/1920x1080);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}

.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.95;
min-height: 500px;
}

主页文章折叠

详见这里
编辑themes/next/_config.yml,找到auto_excerpt并更改为true。

更改顶端一排的icon

找到next主题配置文件中menu:一项,在||符号右边的就是icon的名字。

icon的图片是next直接从FontAwesome读取的,直接配置名称就可以了。

更改顶端icon颜色

默认的是灰色的#555,继承于全局a的css样式(a代表超链接),全局搜索之后发现名字叫做black-light,再搜索该名称发现被base.styl的link-color使用。由于这个英文就代表着链接,所以就应该是改这里了。

改成black-deep颜色之后发现颜色正常,清晰。

注意deploy之后可能会发现外观没有变化,那是以为css样式文件被缓存了,清除网页缓存就可以了。

更改顶端brand配色

搜索得到类名.brand,颜色在site-meta中为brand-bg,修改这个颜色即可。

移动端缩小页边距

打开themes\next\source\css_schemes\Pisces_layout.styl 修改.content-wrap 中+mobile()中的padding为0.
打开themes\next\source\css_schemes\Muse_layout.styl 在+mobile()中加入

1
{padding: 0px}

添加目录页

详见这里

插件

LaTex插件

一个显示公式的插件,公式的语法和插件的安装详见该网站

输入技巧

输入图片

首先要在项目的config文件里边把post_asset_folder改成true。

1
post_asset_folder: true

然后当你生成一片新的文章的时候,就会在_post文件夹多生成同名的文件夹。然后就可以往里面放图片。
插入图片的时候,一般md语法是使用

1
![图片描述](图片相对地址,不加/)

但是这个方法不能让图片在主页中显示。如果想要图片也在主页显示,需要用hexo插件语法(该语法在3.0以上已被集成)。

1
{% asset_img 图片路径 This is an image %}

这样子就可以在主页也显示出来图片了。

接入评论系统

听说gitalk最好,所以接入gitalk。
首先参考以下两篇文章:
文章一
文章二

这两篇文章分别有问题和矛盾的地方,建议先跟着第一篇做,然后根据文章二修改next主题中关于gitalk的配置。文章一中的gitalk配置是不全的,会造成gitalk.swig在构建var gitalk = new Gitalk()的过程中产生语法问题,导致无法正确渲染div内容。

文章二中在index.swig中加入.gt-container a{border-bottom: none;}这个操作不需要,改成:

1
{% include 'gitalk.swig' %}

可能出现的问题

另外一个问题是评论上方可能会出现Error: i.concat(...).join is not a function字样的报错,修复方式参考这里:修改gitalk.swig

1
labels: '{{ theme.gitalk.labels }}'.split(',').filter(l => l),

Error: Validation Failed
详见这里

原理

为了方便我们不太懂前端的同学理解,说起来就是:

  1. 在网页的底端插入一个id为gitalk-container的div
  2. gitalk会根据参数来创建一个Gitalk对象,然后传入div的名称,渲染该div

接入访问统计

参见这里
原理是申请了一个免费数据库,每次访问的时候通过js脚本把次数加一。

Buy Me A Coffee / 捐一杯咖啡的钱
分享这篇文章~
0%
//