hexo博客搭建以及next美化教程

发表于 | 更新于: | 分类于 | | 热度: 2℃
字数统计: 7.8k | 阅读时长 ≈ 35

兰州小红鸡

前言

本文虽然是非常详细的小白教程
但是也需要一点点的姿势，额，知识储量

知识储量

  • 了解css和html，会写一点html基础语句
  • 用过GitHub，知道建仓库过程以及在命令行推送的一些git基础语句
  • 会灵活地使用搜索引擎（最重要）

关于hexo

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架
Hexo同时也是GitHub上的开源项目，参见：hexojs/hexo 如果想要更加全面的了解Hexo，可以到其官网 了解更多的细节，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看

hexo 主题很多 可以在下面选择自己的喜欢的一款：

知乎：有哪些好看的hexo主题 hexo官网

关于next主题

所有主题中，Next 主题简。配置些许不同，参照配置后先本地预览，看是否达到预期效果，再上传github哦。

现在越来越多的人喜欢利用Github搭建静态网站，原因不外乎简单省钱。
我之前有在阿里云买过云主机，学生机一年120还是很便宜的，用wordpress搭建的博客。也是很方便的
但是由于后来微信小程序也不做了，服务器就没怎么用，一直闲着。
最近看到用github page做博客的文章，便想把之前的博客搬过来。

准备工作

本地搭建hexo静态博客

  • 新建一个文件夹，如MyBlog
  • 进入该文件夹内，右击运行git，输入：hexo init（生成hexo模板，可能要翻墙）
  • 生成完模板
  • 最后运行：hexo server （可跳过）（运行程序，访问本地localhost:4000可以看到博客已经搭建成功，）
  • 本地端一般直接推送到GitHub，不用开hexo server查看（我是这样的）

将博客与Github关联

  • 在Github上创建名字为XXX.github.io的项目，XXX为自己的github用户名。
  • 打开本地的MyBlog文件夹项目内的_config.yml配置文件，将其中的type设置为git
1
2
3
4
deploy:
  type: git
  repository: https://github.com/yourname/yourname.github.io.git
  branch: master

记得替换上面的yourname
本教程提到的yourname都是指你的github账号id

  • 运行：npm install hexo-deployer-git –save
  • 运行：hexo g（本地生成静态文件）
  • 运行：hexo d（将本地静态文件推送至Github）

此时，打开浏览器，访问http://yourname.github.io

绑定域名

博客已经搭建好，也能通过github的域名访问，但总归还是用自己的域名比较舒服。因为我们需要设置将自己的域名绑定到github这个博客项目上。

  1. 域名提供商设置

添加2条A记录：
$ @—>192.30.252.154
$ @—>192.30.252.153
$ 添加一条CNAME记录：
$ CNAME—>yourname.github.io

  1. 博客添加CNAME文件

    配置完域名解析后，进入博客目录，在source目录下新建CNAME文件，写入域名，如：thief.one

  2. 运行：hexo g

  3. 运行：hexo d

(也可以直接: hexo d -g)

next主题安装

访问主题列表，获取主题代码。

进入themes目录，进入以下操作：

下载主题 (以next主题为例)

1
git clone https://github.com/iissnan/hexo-theme-next.git（主题的地址）

打开站点__config.yml文件，将themes修改为next（下载到的主题文件夹的名字）

  • hexo g
  • hexo d

关于hexo-next主题下的一些个性化配置，参考：Next主题配置

更新博客内容

至此博客已经搭建完毕，域名也已经正常解析，那么剩下的问题就是更新内容了。

更新文章

  1. 在MyBlog目录下执行：hexo new “我的第一篇文章”，会在source\_posts文件夹内生成一个.md文件。
  2. 编辑该文件（遵循Markdown规则）
  3. 修改起始字段
1
2
3
4
5
6
7
8
9
10
11
title 文章的标题
date 创建日期 （文件的创建日期 ）
updated 修改日期 （ 文件的修改日期）
comments 是否开启评论 true
tags 标签
categories 分类
permalink url中的名字（文件名）
编写正文内容（MakeDown）
hexo clean 删除本地静态文件（Public目录），可不执行。
hexo g 生成本地静态文件（Public目录）
hexo deploy 将本地静态文件推送至github（hexo d）
  1. 编写正文内容（MakeDown）
  2. hexo clean 删除本地静态文件（Public目录），可不执行。
  3. hexo g 生成本地静态文件（Public目录）
  4. hexo deploy 将本地静态文件推送至github（hexo d）

添加菜单

进入theme目录，编辑_config_yml文件，找到menu:字段，在该字段下添加一个字段。
NexT主题菜单设置，用于设置博客上方导航栏，在主题配置文件中修改。

1
2
3
4
5
6
7
menu:
  home: /                       #主页
  categories: /categories	      #分类页（需手动创建）
  #about: /about 			        	#关于页面（需手动创建）
  archives: /archives		       	#归档页
  tags: /tags				           	#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）
  • 只是在menu选项中设置还不能让标签页面、分类页面生效，需要我们手动创建 *

标签页面

  1. 运行以下命令
1
hexo new page "tags"

同时，在/source目录下会生成一个tags文件夹，里面包含一个index.md文件

  1. 修改/source/tags目录下的index.md文件
1
2
3
4
title: tags
date: 2015-09-29 14:37:02
type: "tags"
---
  1. 修改主题配置文件
    去掉tags的注释
1
2
3
4
5
6
7
menu:
  home: /                       #主页
  categories: /categories	    	#分类页（需手动创建）
  #about: /about			         	#关于页面（需手动创建）
  archives: /archives	      		#归档页
  tags: /tags				           	#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

分类页面

  1. 运行以下命令
1
hexo new page "categories"

同时，在/source目录下会生成一个categories文件夹，里面包含一个index.md文件

  1. 修改/source/categories目录下的index.md文件
1
2
3
4
title: categories
date: 2015-09-29 14:47:21
type: "categories"
---
  1. 修改主题配置文件
    去掉categories的注释
1
2
3
4
5
6
7
menu:
  home: /                       #主页
  categories: /categories	    	#分类页（需手动创建）
  #about: /about			         	#关于页面（需手动创建）
  archives: /archives		       	#归档页
  tags: /tags				           	#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

主题美化

侧边栏头像设置

编辑站点配置文件，增加avatar字段

1
2
# 头像
avatar: /images/avatar.png

头像图片须放置在主题的/source/images/目录下

文章中添加居中模块

文章Markdown中填写如下：

1
<blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>

在文章底部增加版权信息

在目录 next/layout/_macro/下添加 my-copyright.swig：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}>{{ page.title }}/a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }}的个人博客">{{ theme.author }}/a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}/p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}/p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }} title="{{ page.title }}>{{ page.permalink }}/a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig，在代码

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码：

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

1
@import "my-post-copyright"

如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

1
2
3
4
5
6
7
---
title: 
date: 
tags: 
categories: 
copyright: true
---

自定义hexo new生成md文件的选项

在/scaffolds/post.md文件中添加：

1
2
3
4
5
6
7
8
---
title: {{ title }}date: {{ date }}tags:
categories: 
copyright: true
permalink: 01
top: 0
password:
---

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除。

1
2
3
4
5
6
7
8
9
<!--
<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" rel="external nofollow" href="https://hexo.io">Hexo</a>') }}</div>
<div class="theme-info">
  {{ __('footer.theme') }}-
  <a class="theme-link" rel="external nofollow" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}  </a>
</div>
-->

文章加密访问

打开themes->next->layout->_partials->head.swig文件,在meta标签后面插入这样一段代码：

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

然后文章中添加：

1
password: nmask

如果password后面为空，则表示不用密码。

文章置顶

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章中添加 top 值，数值越大文章越靠前，如:

1
2
3
4
5
---
......
copyright: true
top: 100
---

默认不设置则为0，数值相同时按时间排序。

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件，在maximum-scale=1”/>后添加如下代码:

1
2
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

添加文章热度

next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig
在”leancloud-visitors-count”>标签后面添加℃。
然后打开，/themes/next/languages/zh-Hans.yml，将visitors内容改为热度即可。

主页文章添加阴影效果

打开\themes\next\source\css_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成 🏷

鼠标点击小红心的设置

将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件， 在文件的后面， 标签之前 添加以下代码：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

鼠标点击四级单词

同上道理将里面改的js文件下载
文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件， 在文件的后面， 标签之前 添加以下代码：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/cet4.js"></script>

鼠标点击文明和谐

将上述的love.js(或者自己新建一个js文件也都可以)改成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript">
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
        y = e.pageY;
        $i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 120,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
"top": y - 180,
"opacity": 0
        },
        1500,
function() {
            $i.remove();
        });
    });
});
</script>

背景的设置

将 particle.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件， 在文件的后面，标签之前 添加以下代码：

1
2
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>

搜索功能

安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

添加来必力评论

多说已经宣布下线了，找了个来必力评论系统来替换，以下是替换的教程，教程内容来自：https://blog.smoker.cc/web/add-comments-livere-for-hexo-theme-next.html

来必力评价
优点：界面美观
缺点：不支持数据导入，加载慢

首先在 _config.yml 文件中添加如下配置：

1
livere_uid: your uid

其中 livere_uid 即注册来必力获取到的 uid。
在 layout/_scripts/third-party/comments/ 目录中添加 livere.swig，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  {% endif %}
{% endif %}

优先使用其他评论插件，如果其他评论插件没有开启，且LiveRe评论插件配置开启了，则使用LiveRe。其中脚本代码为上一步管理页面中获取到的。在layout/_scripts/third-party/comments.swig文件中追加：

1
{% include './comments/livere.swig' %}

引入 LiveRe 评论插件。
最后，在 layout/_partials/comments.swig 文件中条件最后追加LiveRe插件是否引用的判断逻辑：

1
2
3
{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

解决来必力评论系统加载慢的方法

  • 灵感：大家平常说的加载慢，其实是因为来必力这个框架它是等读者把滚动条拉到文末评论的位置的时候才开始加载。
    如果是让他从我们点进文章的时候就开始加载，那么等读者看完文章，评论也早就加载完了（除非有人一进来就去底下看评论）

所以只要我们在文章章加载后就去加载来必力评论系统，等看完文章，评论也早就加载完了，也不会察觉到它的加载

方法

方法其实很简单，但是我实验了好久才找到这个，先说方法

我们打开\yourhexo\themes\next\layout_partials\comments.swig

找到来必力的评论模块

将这段代码

1
2
3
<div class="comments" id="comments">
  <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
</div>

改成

1
<iframe title="livere" src="https://was.livere.me/comment/city?id=city&refer={{page.permalink}}&uid={{theme.livere_uid}}&site={{page.permalink}}&title={{page.title}}" scrolling="" frameborder="0" id="lv-comment-399" style="min-width: 100%; width: 100px; min-height: 400px; overflow: auto; border: 0px; z-index: 124212; height: 500px;" ></iframe>

然后就ok啦重新编译和提交博客内容，不过需要先清除缓存

博客根目录命令行打开

  • hexo clean
  • hexo d -g

以上你就解决了来必力评论系统加载慢的问题

出现的问题

昨天发现用的iframe框架没法自适应高度，如果评论多了，只能在页面滚动展现

所以我有找了个方法，不过这个方法比较麻烦

不推荐！

喜欢折腾的朋友可以尝试

就是将上面说的\yourhexo\themes\next\layout_partials\comments.swig

将这段代码

1
2
3
<div class="comments" id="comments">
  <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
</div>

换成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div id="container" data-id="city" data-title="{{page.title}}" data-logo="" data-desc="" data-uid="{{theme.livere_uid}}" data-site="{{page.permalink}}" data-refer="{{page.permalink}}" data-redirectorigin="" data-highlightseq="" data-discuss="false" data-facebookpageid="" data-facebookuploadurl="">
        <script type="text/javascript">
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-75302230-1', { sampleRate: 1 });
            ga('send', 'pageview');
      </script>
    <noscript>Please enable JavaScript to view the LiveRe comments</a></noscript>
 </div>

<link type="text/css" rel="stylesheet" href="https://cdn-city.livere.com/css/comment.zero.css">
<link type="text/css" rel="stylesheet" href="https://cdn-city.livere.com/css/theme/realblack.zero.css">
<script type="text/javascript" src="https://cdn-city.livere.com/js/lib.zero.js"></script>
<script type="text/javascript" src="https://cdn-city.livere.com/js/comment.zero.zh-cn.dist.js"></script>

就是直接将框架里的代码复制出来，不用框架。
但是这也会造成一个问题，没了框架的保护，来必力提供的外联样式表会与本地 css 样式冲突，导致本地的部分样式变形。

这就需要你自己动手去调整本地的样式！

所以会有前端基础的朋友可以试试

我是用chrome浏览器，控制台检查本地出错样式的name

然后在themes\next\source\css\_custom\custom.styl文件里自己写样式
具体怎写就不细说了，可能不同主题博客也不一样
看想不想折腾了

添加gitalk评论

  • gitalk优点：稳定
  • gitalk缺点：只能GitHub登陆，对普通用户不友好

gitalk：一个基于 Github Issue 和 Preact 开发的评论插件
详情Demo可见：https://gitalk.github.io/

Register Application

在GitHub上注册新应用，链接：https://github.com/settings/applications/new

兰州小红鸡

参数说明：

1
2
3
4
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如https://asdfv1929.github.io
Application description # 描述，随意
Authorization callback URL：# 网站URL，https://asdfv1929.github.io

点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

兰州小红鸡

gitalk.swig

新建/layout/_third-party/comments/gitalk.swig文件，并添加内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

comments.swig

修改/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

1
2
{% elseif theme.gitalk.enable %}
 <div id="gitalk-container"></div>

index.swig

修改layout/_third-party/comments/index.swig，在最后一行添加内容：

1
{% include 'gitalk.swig' %}

_config.yml

在主题配置文件next/_config.yml中添加如下内容：

1
2
3
4
5
6
7
8
gitalk:
  enable: true
  githubID: github帐号  #    
  repo: 仓库名称   # 名字，不是地址
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 #指定可初始化评论账户
  distractionFreeMode: true

以上就是NexT中添加gitalk评论的配置，博客上传到GitHub上后，打开页面进入某一博客内容下，就可看到评论处。

部分问题解决方法，可参见：
https://liujunzhou.cn/2018/8/10/gitalk-error/#more

设置网页背景图片

在themes\next\source\css_custom\中添加

1
2
3
4
5
6
7
body {
 background-color: #fff; /*Default bg, similar to the background's base color*/
 background-image:url(/images/bg.jpg);  //你的背景图片地址
 background-position: right bottom; /*Positioning*/
 background-attachment: fixed;
 background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

将你的背景图片放在theme/next/source/images目录
上面的css代码我只设置图片放在网页右下角，可以根据个人爱好设置

在主页添加标签云

在目录themes\next\layout找到index.swig文件
在下面标记地方添加标记内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% block content %}

//在这里添加下面内容

 <p style="background-color: #000; color: #fff;font-weight: 800;font-size: 15px; width: 60px;text-align: center;" >
	<标签>
</p>
 <div class="tag-cloud">
            <div class="tag-cloud-tags" align="left">
              {{ tagcloud({min_font: 14, max_font: 14, amount: 300, color: true, start_color: '#888', end_color: '#888'}) }}            </div>
          </div>

//上面内容

  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
      {{ post_template.render(post, true) }}    {% endfor %}
  </section>

设置字体

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后 为了解决 Google Fonts API 不稳定的问题，NexT 在 5.0.1 中引入此特性。

通过此特性，你可以指定所使用的字体库外链地址；与此同时，NexT 开放了 5 个特定范围的字体设定，他们是：

  • 全局字体：定义的字体将在全站范围使用

  • 标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）

  • 文章字体：文章所使用的字体

  • Logo字体：Logo 所使用的字体

  • 代码字体： 代码块所使用的字体
    各项所指定的字体将作为首选字体，当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组：

  • 非代码类字体：Fallback 到 “PingFang SC”, “Microsoft YaHei”, sans-serif

  • 代码类字体： Fallback 到 consolas, Menlo, “PingFang SC”, “Microsoft YaHei”, monospace

另外，每一项都有一个额外的 external 属性，此属性用来控制是否使用外链字体库。 开放此属性方便你设定那些已经安装在系统中的字体，减少不必要的请求（请求大小）。

**配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

***更改 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：

高亮主题设置示例

1
2
3
4
# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中。

  1. 链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

配置示例

1
2
3
4
5
6
7
8
# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等
  1. 设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

配置示例

1
2
3
4
5
6
7
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

开启打赏功能

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

打赏功能配置示例

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

友情链接

编辑 主题配置文件 添加：

友情链接配置示例

1
2
3
4
5
# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 http://www.ixirong.com/404.html
使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

站点建立时间

这个时间将在站点的底部显示，例如 © 2013 - 2015。 编辑 主题配置文件，新增字段 since。

配置示例

1
since: 2013

订阅微信公众号

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后
在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

  1. 在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。
  2. 然后编辑 主题配置文件，如下：
1
2
3
4
5
6
配置示例
# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

SEO优化

seo优化对于网站是否能被搜索引擎快速收录有很大帮助，因此适当做一些seo还是有必要的，以下内容参考：https://lancelot_lewis.coding.me/2016/08/16/blog/Hexo-NexT-SEO/

添加sitemap文件
安装以下2个插件，然后重启hexo后，网站根目录（source）下会生成sitemap.xml与baidusitemap.xml文件，搜索引擎在爬取时会参照文件中的url去收录。

1
2
3
4
npm install hexo-generator-sitemap --save-dev
hexo d -g
npm install hexo-generator-baidu-sitemap --save-dev
hexo d -g

添加robots.txt

新建robots.txt文件，添加以下文件内容，把robots.txt放在hexo站点的source文件下。

1
2
3
4
5
6
7
8
9
10
User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://thief.one/sitemap.xml
Sitemap: http://thief.one/baidusitemap.xml

首页title的优化

更改index.swig文件，文件路径是your-hexo-site\themes\next\layout，将下面代码

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

改成

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

观察首页title就是标题+描述了。

sitemap插件

Sitemap 可方便管理员通知搜索引擎他们网站上有哪些可供抓取的网页，有助于让别人更好地通过搜索到自己的博客。

sitemap安装配置

  1. 安装
1
$ npm install hexo-generator-sitemap --save
  1. 修改站点配置文件
1
2
3
# Extensions
plugins:
- hexo-generator-sitemap

使用以下命令后，你可以在站点的/public目录下找到一个sitemap.xml文件，这个文件就是你的站点地图，里面包含你的站点的网页地址。

1
2
hexo clean
hexo g
如何向google提交sitemap

sitemap.xml无法生成问题

问题:
使用以下命令安装sitemap插件后,按上面步骤配置，执行hexo g命令无法生成sitemap.xml文件。

1
$ npm install hexo-generator-sitemap

观察发现博客根目录下的package.json文件中dependencies并没有sitemap插件的依赖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.1.1"
  },
  "dependencies": {
    "hexo": "^3.1.0",
    "hexo-deployer-git": "0.0.4",
    "hexo-generator-archive": "^0.1.2",
    "hexo-generator-category": "^0.1.2",
    "hexo-generator-index": "^0.1.2",
    "hexo-generator-tag": "^0.1.1",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-renderer-stylus": "^0.3.0",
    "hexo-server": "^0.1.2"
  }
}

解决方法：
如果已安装sitemap插件，卸载sitemap插件

1
$ npm uninstall hexo-generator-sitemap

安装sitemap插件时，加上- -save参数，如下

1
$ npm install hexo-generator-sitemap --save

安装完成后，我们再查看博客根目录下的package.json文件，发现dependencies中已经有了sitemap插件，然后我们再执行hexo g命令，就能够在/public目录下找到一个sitemap.xml文件了。

baidusitemap安装配置

普通的Sitemap格式不符合百度的要求，所以我们要安装以下插件

  1. 安装
1
$ npm install hexo-generator-baidu-sitemap --save
  1. 修改站点配置文件
1
2
3
4
5
6
# Extensions
plugins:
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap
baidusitemap:
    path: baidusitemap.xml

同理，使用以下命令后，你可以在站点的/public目录下找到一个baidusitemap.xml文件。

1
2
hexo clean
hexo g
  1. 将baidusitemap.xml提交给百度

百度搜索引擎提交入口

使用hexo d命令将博客部署到github后,这里填写github上的baidusitemap.xml地址即可。

参考文章

参考文章1 参考文章2 参考文章3







我是小鸡，这篇文章的标题是——hexo博客搭建以及next美化教程
喜欢的话可以转载，不过记得标记出处

2018年11月07日