博客优化更新日志

详细记录博客建立以来的各种优化，喜欢的朋友不妨参考参考

声明以next主题为例

站点配置文件在博客根目录下(BLOGDIR/_config.yml)
主题配置文件在主题目录下(BLOGDIR/theme/next/_config.yml)

添加多说评论

NexT主题默认支持多说评论，所以我们直接注册一个多说域名

进入多说首页登陆以后点击我要安装
创建站点，填写相关信息，多说域名就是duoshuo_shortname
创建完成以后在站点配置文件里面新增duoshuo_shortname,值为我们刚刚填的多说域名，注意中间有空格
以上就在我们的每篇文章下面开启了多说评论，如果某篇文章不想开启评论的话只需要在文章里面配置comments: false即可
想要优化我们的评论主题请继续更着我走
进入多说的后台管理
进入设置找到自定义CSS字段

直接将以下内容直接复制到里面,是的，不用担心装不下，哈哈

#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
	width: 54px;
	height: 54px;     /*設置圖像的長和寬，這裏要根據自己的評論框情況更改*/
	border-radius: 27px;     /*設置圖像圓角效果,在這裏我直接設置了超過width/2的像素，即為圓形了*/
	-webkit-border-radius: 27px;     /*圓角效果：兼容webkit瀏覽器*/
	-moz-border-radius: 27px;
	box-shadow: inset 0 -1px 0 #3333sf;     /*設置圖像陰影效果*/
	-webkit-box-shadow: inset 0 -1px 0 #3333sf;
	-webkit-transition: 0.4s;
	-webkit-transition: -webkit-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;     /*變化時間設置為0.4秒(變化動作即為下麵的圖像旋轉360讀）*/
	-moz-transition: -moz-transform 0.4s ease-out;
}

#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {

	/*設置鼠標懸浮在頭像時的CSS樣式*/    box-shadow: 0 0 10px #fff;
	rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
	-webkit-box-shadow: 0 0 10px #fff;
	rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
	transform: rotateZ(360deg);     /*圖像旋轉360度*/
	-webkit-transform: rotateZ(360deg);
	-moz-transform: rotateZ(360deg);
}

#ds-thread #ds-reset .ds-textarea-wrapper textarea {
	background: url(http://ww4.sinaimg.cn/small/649a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;
}

#ds-recent-visitors .ds-avatar {
	float: left
}
/*隱藏多說底部版權*/
#ds-thread #ds-reset .ds-powered-by {
	display: none;
}

添加留言板

修改点

主题配置文件(blog/themes/next/_config.yml)
语言配置文件(blogdir/themes/next/languages/zh-Hans.yml)

步骤

打开主题配置文件添加guestbook到menu中

menu:
  home: /
  #categories: /categories
  about: /about
  archives: /archives
  # tags: /tags
  #commonweal: /404.html
  guestbook: /guestbook

打开语言配置文件，添加guestbook: 留言板到menu中

menu:
  home: 首页
  archives: 所有文章
  categories: 文章分类
  tags: 文章标签
  about: 自我介绍
  search: 站内搜索
  commonweal: 公益404
  guestbook: 留言板

新建一个guestbook页面
1
hexo new page "guestbook"
打开BLOGDIR/source/guestbook/index.md ,编辑你的留言界面吧，以下是我的

以上最后一行为多说的最近访客代码块

1	<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

如何扒别人的多说样式
看到好的样式，F12打开控制台，找到

<style type="text/css">就是这个css</style>

添加Fork Me On Github

在官网选好样式

复制里面的代码

<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>

修改href地址为你自己的github地址

1
2
3

<a href="https://github.com/you">
 改为:
<a href="https://github.com/Mayezi">

修改文件BLOGDIR/themes/next/layout/_layout.swig,找到如下位置，添加以上代码

<!doctype html>
<html class="theme-next {% if theme.use_motion %}use-motion{% endif %} {% if theme.scheme %}theme-next-{{ theme.scheme | lower }}{% endif %}">
<head>
  {% include '_partials/head.swig' %}
  <title>{% block title %}{% endblock %}</title>
</head>


<body>
  {% include '_partials/old-browsers.swig' %}

  <div class="container one-column {% block page_class %}{% endblock %}">
    <div class="headband"></div>
    
    
    <!----------- add Fork me on Github ------------>
    
    <a href="https://github.com/hhstore"><img style="position: absolute; top: 500; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
    
    <!----------- add Fork me on Github ------------>   
    
    
    <div id="header" class="header">
      <div class="header-inner">
        {% include '_partials/header.swig' %}
      </div>
    </div>

    <!-------------省略------------------->
    <!-------------省略------------------->


    <div class="back-to-top"></div>
  </div>

</body>

</html>

SEO优化

优化title

更改index.swig文件，文件路径BLOGDIR/themes/next/layout

将下面代码:

{% block title %} 
  {{ config.title }} 
{% endblock %}

改成:

{% block title %} 
  {{ config.title }} - {{ theme.description }} 
{% endblock %}

SEO进阶优化

继续修改，在Title中显示关键词

1
2
3

% block title %} 
  {{ theme.keywords }} - {{ config.title }} - {{ theme.description }} 
{% endblock %}

添加Swiftype站内搜索

详见官方文档添加Swiftype

添加友情链接

参考这篇文章
为NexT添加文章阅读统计功能
添加背景音乐
严格的说不算背景音乐，只是在页面中添加了音乐
bug很多，只能在当前页面播放，刷新以后只能从头播放
使用效果详见留言板

CDN加速

待填

添加RSS插件

打开gitbash，安装hexo-generator-feed插件
1
npm install hexo-generator-feed --save

打开站点配置文件，添加以下字段

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:

添加 InstantClick

这个功能通过预加载可以达到网页秒开的效果 (并没有实际提速)
进入官网InstantClick下载instantclick.min.js至使用主题目录下source/js文件夹里, 然后在\layout_partial里的footer.swig, 加上如下代码即可
1
2
<script src="/js/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
但是这个功能不会预加载评论，所以我暂时取消，待填坑

添加high一下

音乐不太合乎我的口味，所以我暂时没添加
参考这篇吧为NexT主题添加high一下

设置知识共享版权

维基详情知识共享
两张图就能表示清楚
本博客使用的BY-NC-SA

写在后面的话，周末陆陆续续写了这么一篇，主要是为了自己以后查看也方便，如果本文对你有用的话，那可真是开了个心。
留个言表示支持吧