搭建个人博客心得---配置主题Next

  本文是记录如何修改配置Next,增加百度统计功能、评论区、RSS、爬虫等模块。是在前面几篇文章的扩展记录。

  注意这些第三方插件,当我们的博客布在github和coding两边时,数据是可以共用的!只要id和key是同样,在服务供应商那边记录域名和网站后,就可以顺利共用数据。

  
Next的使用说明

  开头先贴官方配置说明。这里的头像位置、昵称等等,请通过这个官方配置说明链接来配置。本文只分享官方文档里面难的部分,以及文档里面没有的部分。记住配置文件“:”后面需要打空格,然后才加内容!

  注意,打开这些第三方服务,会拖慢网站打开速度,请酌情使用。

  官方指导链接

评论系统&文章阅读量统计功能

  因为文章访问数量那个系统我用的leancloud ,发现配置文件里面刚好也支持它,我就也用的这个服务。

  官方文档里面有提到这个阅读理解统计的:

为NexT主题添加文章阅读量统计功能

  一起凑合着看吧。由于它支持我们改数据,所以我就使用它了。(没事可以偷偷上去改个阅读量999999!)

Result pic 1

Result pic 1

Result pic 1

  注意,第一次创建应用,在这里添加class,需要等2分钟,所以要耐心等。另外,免费版的,不能删除class,所以别加太多了。注意这里:评论的是Comment,文章阅读量的是Counter。

  然后就是去获取key和id。这里不能直接鼠标拉选,不过可以右键,定位到元素,然后在代码里面找到这个字符串,就能复制了。

Result pic 1

Result pic 1

Result pic 1

  最后,千万记得要去“安全中心”设置“web安全域名”!因为这个id和key是明文,谁都能抓取到的!

Result pic 1

  还可以设置邮件提醒Valine 评论系统中的邮件提醒设置

百度统计

  文档里面说得很简略,下面我就介绍一下详细的过程。

Result pic 1

  怎么打开?

Result pic 1

Result pic 1

Result pic 1

  先在百度统计那边复制key,然后到配置文件里面ctrl f找到baidu_analytics 字段,打一个空格后把key复制进去。hexo clean,再生成,让html重新编译,会自动加代码进去的。

Result pic 1

  如果不会,可以直接发布。然后到百度统计那边检查。

Result pic 1

内容分享服务

Result pic 1

  第一个JiaThis,搜索有新闻说已经关闭分享服务了。第三个好像是国外,搞推特的,国内访问应该比较慢,也不考虑。后面找了Mob,但是不支持https,所以也用不了。

  剩下一个百度,结果,打开后发现很丑,还只能分享图片,不能整篇文章分享(得改代码)。所以我就没开该项。请自取哈。

Result pic 1

Result pic 1

  分享的效果也不好,点击后调整的界面不好看。

字数统计&阅读时长

Result pic 1

  里面已经内置了,开启就能使用了。但是单纯改配置文件,数字是显示不出来的,得添加插件:

npm install hexo-wordcount –save -dev

  安装完成后,hexo clean;hexo g。启动服务就能看到效果了。如果想像我这边一样加文字:

  到目录:/themes/next/layout/_macro/post.swig

  用记事本打开后搜索post_wordcount:

Result pic 1
  
Result pic 1

RSS

npm install hexo-generator-feed –save -dev

  然后到主配置文件最底下添加:

1
2
3
4
5
6
7
8
# Extensions
plugins:
hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

Result pic 1

  这个插件的作用是统计记录你的文章,生成一个xml格式的文件atom.xml。别人通过订阅分析你这个文件变动来了解你文章的更新情况。

Result pic 1

百度sitemap

npm install hexo-generator-baidu-sitemap –save -dev

Result pic 1

  在百度里面搜索site:域名。检验是否被百度收录。如果没有的,需要进行登记。这里google的操作比较简单。

  百度的,由于被github屏蔽爬虫,所以只能考虑放coding上面。coding的免费玩家,是会强制301转址的,所以这时候放百度验证,是无法成功的,百度验证不会像浏览器那样跳转识别,在说明那里也提到:“如果存在转址,请暂时取消”。

Result pic 1

  那怎么玩?只能想办法完成这个coding要求了。加图标的话,布局上没想到怎么改。所以我选择加文字版:

Result pic 1

Result pic 1

  刚开始还去翻代码,结果发现原来NexT考虑到这个问题了,直接给我们加在配置文件里面,只需要去设置这个属性就行,不用改代码。

Result pic 1

  这里会遇到一个问题,当你把coding那边那个代码复制过来时,hexo g会报错!原来是由于没换行的概念,hexo读配置属性,是根据“:+空格”来判断的,所以只需要把那个空格删掉,它就不识别成属性,就不会报错。

  接下来就是等通过验证然后来搞百度收录了。

百度收录链接

  收录前需要进行的验证网站所有权 。就是上面提到的验证。

  这里有三种方式可以做到:挂文件/在html加代码/CNAME。推荐第一种,因为第二种就直接明文了。当然,最后我还是用了第三种,CNAME,只需要去dns服务商那边设置就行了,马上就生效了,不用等coding过检。

挂文件

  就是把密码文件下载下来后,放在source根目录,然后到主配置文件找skip_render属性:

1
2
skip_render: 
- baidu_verify_XXXXXX.html

  防止hexo添加代码到该密码文件,百度爬虫才能识别到该文件。

加代码

  找到文件\themes\next\layout_partials\head.swig。然后直接在这里的空白处插入代码。

Result pic 1

  百度统计那边功能蛮多的,不过现在博客暂时还没收录,等收录后体验下其他的功能。

  在配置好后,到配置文件启用:

1
2
baidusitemap:
path: baidusitemap.xml

  再到百度提交收录:

Result pic 1

  建议开启百度自动推送,就sitemap左边那个。代码已经集成在Next了,只要开启主题配置文件的属性“baidu_push”:

Result pic 1

Google收录

npm install hexo-generator-sitemap –save -dev

  开vpn,Google站长工具 类似百度收录的操作,都是下载密码html文件,放在根目录,然后到主配置文件添加忽略编译属性。

  好处是github没有屏蔽google,所以直接用github那边的挂谷歌。而且他们都是国外的,所以挂github的话,比挂国内的coding对搜索排名要有利。

Result pic 1

  在配置好后,到配置文件启用:

1
2
3
#sitemap
sitemap:
path: sitemap.xml

  同样要去提交收录。但是超级快,一下就能在谷歌搜索到了。

其他第三方服务

Result pic 1

  到该目录下,列了目前NexT集成的第三方服务,可以根据文件名来选择要不要开启,都是在配置文件里面能找到开启选项的。其实这里的作用,就是把全部js脚本放在这里,然后用一个配置文件属性,判断要不要加这个脚本到html里面。

其他优化

  第三方的东西我目前只加了这些,其他就是代码上的修改了。

文章末尾添加“—end—”

  打开themes\next\layout\ _macro\post.swig,找到“wechat_subscriber”的地方,这个就是文章结尾时,“请加我好友”的图标所在的地方。复制如下代码:

1
2
3
   {% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:20px;">-------------------------------------------------------- The End --------------------------------------------------------</div>
{% endif %}

  这里文字大小和长度,请根据自己喜好进行修改。

  或者是使用hr写法。注意这里文本文字在DIV中垂直水平居中显示

1
2
3
   {% if not is_index %}
<div style="height:85px;line-height:85px;text-align:center;color:#ccc;"><hr size="7" color="coral" style="vertical-align:middle;float:left" width="40%"> The End <hr size="7" color="coral" style="vertical-align:middle;float:right" width="40%"><br style="clear:both"/></div>
{% endif %}

  但在手机端效果不行,换行了。

取消打赏的文字摇晃

  自带的摇晃太魔性了,建议去掉。到位置:next/source/css/_common/components/post/post-reward.styl ,搜“animation”:

1
加“/*  */

Result pic 1

浏览页面的时候显示当前浏览进度

  到主题配置文件,搜scrollpercent,改为true。

Result pic 1

  还可以放到左边:修改scrollpercent上方的b2t为true。

Result pic 1

Result pic 1

fork me on github

右上角

  到GitHub Corners 选择喜欢的样式,复制代码。然后定位到next/layout/_layout.swig,搜索headband。将代码贴在下面:

Result pic 1

左上角

  到Fork_me_on_GitHub 选样式,像上面一样操作。当然也可以自己根据实际情况微调。

将标签前缀“#”换为图标

  到next/layout/_macro/post.swig,搜索

1
rel="tag"
1
将 #号 换成<i class="fa fa-tag"></i>

Result pic 1

Result pic 1

添加加载页面

Result pic 1

  在next的配置文件搜“pace-theme”:这里我这个是pace-theme-center-atom,还有其他一堆可以选。

Result pic 1

添加站内搜索

npm install hexo-generator-searchdb –save

  这里可能下载不下来,按照我前面说copy怎么下载那样,在npm失败后,会显示一个html,拿到百度云离线下载,下下来后,用记事本打开,搜version,找到最新版本,然后看barl的下载链接,再复制到百度云离线下载,然后当做本地文件来安装,就能安装了。

  到主配置文件最后添加:

1
2
3
4
5
6
#表示站内搜索
search:
path: search.xml
field: post
format: html
limit: 10000

  然后到NexT配置文件搜索“local_search”,启动enable:

Result pic 1

修改访问URL路径

  默认情况下是年月日一串很长的url路径。是在主配置文件进行的修改:搜索“permalink”

permalink: :category/:title/ #分类/标题

Result pic 1

添加文章置顶功能

  现在应该都是新版本了,所以直接介绍新版本的方式:

先卸载老插件,然后装新插件:

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

  然后在文章开头加 “top: 数字”

Result pic 1

  这样就能看的效果了。不过推荐加一下置顶图标在前面:

  打开next/layout/_macro/post.swig,搜索

1
<div class="post-meta">

  然后加入如下代码:

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

Result pic 1

Result pic 1  

添加coding部分的一键复制功能

  本博客没启用该功能,具体请访问该链接:添加coding部分的一键复制功能

  由于有中文,该链接通过中文转码处理,如果失效,请通过域名查找。

添加Robot和nofollow

  新建robots.txt文件在source根目录下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#hexo robots.txt
User-agent: *

Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/

Disallow: /404/
Disallow: /contentimg/
Disallow: /css/
Disallow: /images/
Disallow: /js/
Disallow: /lib/



Sitemap: http://yaojx.net/search.xml
Sitemap: http://yaojx.net/sitemap.xml
Sitemap: http://yaojx.net/baidusitemap.xml

  当没这个文件时,默认全部内容可以爬,这个文件就是告诉那些可以爬,那些不行。

npm install hexo-autonofollow –save

  当文章中有链接时,爬虫会顺着链接爬出去。所以得加这个nofollow。

  安装完后,到主配置文件最底下添加:

1
2
3
4
nofollow:
enable: true
exclude:
- yaojx.net

  然后就是去百度站长提交robot文件了。

qq点击后直接开打联系我的窗口

  该功能使用的是腾讯的开放接口:

Result pic 1  

1
http://wpa.qq.com/msgrd?v=3&uin=659771655&site=qq&menu=yes

  uin改成自己的qq就行了。

压缩gif

  通常录屏文件要好几M,会导致网页加载严重缓慢,这里就需要进行压缩了,但是不建议进行脚本压缩,建议一张一张根据实际情况压缩。

  这里需要安装gifsicle。国内资料比较少,这里有个说明文档

npm install gifsicle –global

  目前我会用的功能比较少,主要使用了压缩色调:

gifsicle -o3 1.gif -o 4.gif –colors 32

gifsicle -o3 需要压缩的文件 -o 输出的文件名 –colors 数字

  通常情况下,录屏产生的gif是256色调的大体积文件,可以通过压缩成128、64、32、16等等色调,达到体积变小的目的。具体情况可以压缩试试看效果。这个操作是通过丢弃部分颜色值,达到压缩的效果的,所以色调越低,压缩越多,当然,照片也就失真越明显。

pdf显示

  目前大家做这个博客,应该大部分会把自己的简历放上去,那是放html文件?绝大部分是pdf文件的。但是要怎么处理这个pdf文件的显示?用js代码,插入iframe,电脑端是可以的,但是移动端不支持,会直接提示下载文件。实际上有个开源前端插件,可以直接使用。可以看我另一篇文章,有提到markdown扩展

这里有几篇文章是讲怎么修改整个主题的,重点推荐:
基于Hexo搭建个人博客——进阶篇(从入门到入土)
Hexo搭建GitHub博客—打造炫酷的NexT主题–高级(四)
Hexo+Next个人博客主题优化


The End

姚佳鑫 wechat
如果您对我的文章感兴趣,可以添加我的微信
感谢您的支持