Hexo+Coding搭建免费博客之Next主题设置(二)

前言

或许是对默认的东西没有好感,总觉得默认的主题是很丑很丑的,完美控是接受不了这个东东的,还好hexo是可以修改主题的。这里首推NexT主题,精于心,简于形标语说的是真的不错。使用NexT主题的人比较多,这也说明这个主题确实很成熟了。优化,配置,扩展很多都集成了,比较简单。博文重质量,弄的太花哨确实没啥用。。。

一、安装Next主题

安装的过程很简单,就一行代码,不过要先进入博客根目录

1
2
cd /data/
git clone https://github.com/theme-next/hexo-theme-next themes/next

以上代码的意思是,从https://github.com/theme-next/hexo-theme-next将next主题下载到当前目录的theme/next文件夹中**

二、启用主题

修改站点配置文件(注意一下,这里分为站点配置文件和主题配置文件,下边的文章内容注意看我说的是站点配置文件还是主题配置文件,因为这两个文件的命名相同,但是所在位置却不同)

1
vim /data/_config.yml

ijTojS.png

三、设置主题外观

Scheme

是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

Muse

默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白

Mist

Muse 的紧凑版本,整洁有序的单栏外观

Pisces

双栏 Scheme,小家碧玉似的清新

Gemini

左侧网站信息及目录,块+片段结构布局

这次是修改主题配置文件(找到下图的位置,想使用哪个外观就去掉之前的#即可)

1
vim /data/themes/next/_config.yml

ijTLAs.png

四、设置语言

编辑站点配置文件,将language设置成你所需要的语言,这里我选择zh-CN,语言选择可以在这看到/data/themes/next/languages/

1
vim /data/_config.yml

ijTv90.png

五、修改站点标题,副标题,描述等

编辑站点配置文件

1
vim /data/_config.yml

ij7CB4.png

ijTzcT.png

上图是我修改的内容,我们Ctrl+C停掉Hexo之后再启动一次预览效果

ij7PHJ.png

六、设置菜单

菜单配置包括4个部分,第一是菜单名称,第二是菜单链接,第三是菜单项的显示文本,第四是菜单项对应的图标,Next主题使用的是Font Awesome提供的图标,Font Awesome提供了600+的图标,可以满足绝大多数的场景,同时不用担心图标显示模糊的问题

编辑主题配置文件

1
vim /data/themes/next/_config.yml

ij7V9x.png

注释:

ij7mjO.png

预览下效果

ij71UA.png

七、添加“分类”模块

1、新建一个分类页面
1
2
cd /data/
hexo new page categories
2、你会发现你的source文件夹下多了categories/index.md,打开index.md文件,修改如下
1
vim /data/source/categories/index.md
1
2
3
4
5
---
title: 分类
date: 2018-08-02 11:43:06
type: "categories"
---

ij734I.png

3、编辑主题配置文件,找到menu字段,将categories取消注释
4、往后写文章,要注明categories,如下图,就会自动创建分类名,并把文章加入到对应的分类中

ij7J8P.png

八、点击出现彩色桃心效果

1、在以下目录创建love.js文件,然后把下边的所有代码粘贴进去
1
vim /data/themes/next/source/js/src/love.js
1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
2、编辑以下文件,在文件末尾加入以下代码
1
vim /data/themes/next/layout/_layout.swig
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

ij7tv8.png

然后你就会发现,当你点击站点页面的时候,会有一些彩色桃心弹出来

ij7aDg.png

九、添加文章分享功能(百度分享不支持https)

编辑主题配置文件加入以下代码

1
vim /data/themes/next/_config.yml
1
2
baidushare:
type: button

ij70Ej.png

然后看一下效果,文章底部会多出分享的按钮

ij7D5n.png

十、侧边栏设置

侧栏设置包括:侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等

编辑主题配置文件,找到sidebar字段

ij7RrF.png

十一、主页文章加阴影

1
vim /data/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 5px;
margin-bottom: 20px;
padding: 5px;
-webkit-box-shadow: 0 0 20px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 20px rgba(202, 203, 204, .5);
}

ij74a9.png

效果如下图,文章之间多了阴影效果

ij7726.png

十二、设置网站图标

默认的网站图标是一个N,当然是需要定制一个了,你可以去网站自己找图标,或者自己制作一个,比如我就是自己制作的,将其放在/data/themes/next/source/images/里面,然后去主题配置文件中修改如下

1
vim /data/themes/next/_config.yml

修改前:

ij7HxK.png

修改后:

ij7Oqe.png

修改前效果

ij7vad.png

修改后效果

ijHSPI.png

十三、添加搜索功能

1、安装 hexo-generator-searchdb 插件
1
2
cd /data/
npm install hexo-generator-searchdb --save
2、编辑站点配置文件找到Extensions字段添加如下内容
1
vim /data/_config.yml
1
2
3
4
5
6
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000

ijHCxf.png

3、编辑主题配置文件找到Local search字段,将enable设置为true
1
vim /data/themes/next/_config.yml

ijHFsS.png

4、查看效果

ijHVaj.png

ijHuR0.png

十四、添加站点访问计数

编辑以下文件,在下图位置添加下面代码

1
vim /data/themes/next/layout/_partials/footer.swig
1
2
3
4
5
6
7
8
9
10
<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
<span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>

ijHQMT.png

查看效果

ijHGdJ.png

十五、在每篇文章末尾统一添加版权标记

1、创建文件并添加以下代码
1
vim /data/themes/next/layout/_macro/passage-end-tag.swig
1
2
3
4
5
6
7
8
9
<div>
{% if not is_index %}

<div style="text-align:center;color: #FF0000;font-size:14px;">版权声明:本文属于原创文章</i></div>

<div style="text-align:center;color: #FF0000;font-size:14px;">转载请注明:www.93bok.com原创文章+本文链接,谢谢合作!!</i></div>

{% endif %}
</div>
2、编辑以下文件,在下图位置添加以下代码
1
vim /data/themes/next/layout/_macro/post.swig
1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

ijHJo9.png

3、编辑主题配置文件,在末尾添加以下代码
1
vim /data/themes/next/_config.yml
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

ijHURx.png

4、查看效果

ijHwQK.png

十六、添加阅读全文按钮

因为在你的博客主页会有多篇文章,如果你想让你的文章只显示一部分,多余的可以点击阅读全文来查看,那么你需要在你的文章中添加

1
<!--more-->

ijHBLD.png

十七、添加“关于”模块

1、新建一个“关于”页面
1
2
cd /data/
hexo new page about
2、你会发现你的source文件夹下有了about/index.md,打开index.md文件即可编辑关于你的信息,可以随便编辑。
3、打开 主题配置文件 找到menu,将about取消注释

十八、文章添加密码

修改以下文件

1
vim /data/themes/next/layout/_partials/head/head.swig

添加代码

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

在该位置添加:

ijHsdH.png

然后往后写文章的时候在头部写上如下:

ijHcFA.png

十九、隐藏网站底部的powered By Hexo/强力驱动

编辑文件:

1
vim /data/themes/next/layout/_partials/footer.swig

添加的标识隐藏掉

ijb1pt.png

ijbN7Q.png

ijbdts.png

二十、网站底部字数统计

ijbwhn.png

1
2
cd /data/
npm install hexo-wordcount –save

然后修改:

1
vim /data/themes/next/layout/_partials/footer.swig

添加以下代码

1
2
3
4
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

位置如下:

ijbsXT.png

二十一、侧边栏弹出设置

我这里把侧边栏弹出关闭

1
vim /data/themes/next/_config.yml

前边加上#号即可

ijbg74.png

二十二、文章置顶

效果如下图

ijbWN9.png

1、卸载原有插件,安装另一个版本
1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
2、编辑
1
vim 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=ff6800>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

如下图:

ijbfhR.png

往后写文章,在顶部写上top: true即可实现

ijb491.png

二十三、打赏

如图:

ijbbHe.png

1、把微信和支付宝的打赏的图片上传到服务器的如下位置/data/themes/next/source/images/
2、编辑主题配置文件
1
vim themes/next/_config.yml

定位到reward

修改如下代码

1
2
3
4
5
# Reward
reward_comment: 如果此文为您解决燃眉之急或是带来些许明朗,不妨打赏小的一份狗粮
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

如图

ijbLAH.png

二十四、修改字体大小

1
vim /data/themes/next/source/css/_variables/base.styl

定位到font-size-base字段

修改:

ijbv9I.png

二十五、开启版权功能

1、 修改主题配置文件
1
vim /data/themes/next/_config.yml
2、 定位到post_copyright字段
3、 将enable后边的false改为true

ijbzgP.png

二十六、增加备案号

1
vim /data/themes/next/layout/_partials/footer.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
<span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>

<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
<span class="post-meta-divider">|</span>
<a href="http://www.miitbeian.gov.cn" target="_blank">桂ICP备17009723号</a>
</div>

ijqSjf.png

二十七、增加友情链接

编辑主题配置文件

1
vim /data/themes/next/_config.yml

定位到Blog rolls

修改如下

ijqCDS.png

博主QQ:1012405802
技术交流QQ群:830339411
版权声明:网站内容有原创和转载,如有侵权,请联系删除,谢谢!!
感谢打赏,93bok因你们而精彩!!(支付宝支持花呗)
0%