动动手指,NexT主题与Hexo更搭哦(基础篇)

macbook下的hexo主题NexT.Mist预览

NexT主题安装使用

GitHub 下载

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

更改站点 _config.yml 中的 theme 字段设置为 next

1
theme: next

NexT主题特色:精于心,简于形

NexT主题是我接触Hexo的第一款主题,一见钟情的一款Hexo主题。
虽然NexT主题简约却并不简单,功能特性多样;响应式设计,电脑手机访问体验好,超级nice,你值得拥有!
如果结合你自己网站的实际增删改其中一些细节,那更加prefect了。

NexT主题创建 “留言” 页面

让你的page页面也支持 多说 / DISQUS 评论系统

Next主题默认page模板是没有评论的,如生成的标签云页面,分类页面,about页面等,都是不支持评论的。
如果想默认page模板也支持评论,需要更改NexT主题page.swig文件。
page.swig的路径: your-hexo-site/themes/next/layout/page.swig
把下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if page.comments %}
<div class="comments" id="comments">
{% if (config.duoshuo and config.duoshuo.shortname) or config.duoshuo_shortname %}
<div class="ds-thread" data-thread-key="{{ page.path }}"
data-title="
{{ page.title }}" data-url="{{ page.permalink }}">
</div>
{% elseif config.disqus_shortname %}
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
{% endif %}
</div>
{% endif %}

复制到

1
2
3
4
    {{ page.content }}
{% endif %}
//上面的代码复制到这里
</div>

接着将下面的代码

1
2
3
4
{% block comment_system %}
{% include '_scripts/comments/duoshuo.swig' %}
{% include '_scripts/comments/disqus.swig' %}
{% endblock %}

复制到下面代码的底部

1
2
3
4
{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}
//代码插在这里

保存。
这时候,你新建的page页面除了标签云页面、分类页面均支持评论了,如about页面,效果如下:
about支持评论

仅在指定的单个页面page支持多说评论

经过上面的修改,默认你新建的page页面都支持 多说 / DISQUS 评论系统,但是我想指定仅是某个页面支持评论那怎么办呢?
例如,我仅仅是想about页面支持多说评论系统(我使用的是多说评论系统, DISQUS 评论系统就不考虑了,你们自行修改吧)
还是更改NexT主题page.swig文件。
page.swig的路径: your-hexo-site/themes/next/layout/page.swig
找到page.swing文件(没经过任何修改的,也就是经过上面提到的让你的page页面支持评论系统处理的),将下面代码

1
2
3
4
5
6
7
   {% elif page.type === 'about' %}
{{ page.content }}
<div class="comments" id="comments">
<div class="ds-thread" data-thread-key="{{ page.path }}"
data-title="
{{ page.title }}" data-url="{{ page.permalink }}">
</div>
</div>

插在下面代码之间

1
2
3
4
5
6
        {{ list_categories() }}
</div>
</div>

//代码插在这里
{% else %}
{{ page.content }}

接着将下面的代码

1
2
3
{% block comment_system %}
{% include '_scripts/comments/duoshuo.swig' %}
{% endblock %}

复制到下面代码的底部

1
2
3
4
{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}
//代码插在这里

保存。

指定多个page页面支持多说评论

例如我想指定仅仅我的about页面和新生成的留言guestbook页面支持多说评论系统(怎样生成留言页后面会提到),只需将上面

1
{% elif page.type === 'about' %}

改成下面代码即可

1
{% elif page.type === 'about'|| page.type === 'guestbook' %}

为你的hexo网站NexT主题增加留言页

经过上个步骤你现在可以任意指定某些页面支持多说系统,现在我们实现指定guestbook page支持多说系统,从而实现留言功能。指定guestbook页面支持多说系统很简单,只需要把上面提到的仅在指定的单个页面page支持多说评论这例子中的page.type === &#39;about&#39;改成page.type === &#39;guestbook&#39;即可。修改完毕后,接下来要做的是:

  1. 找到你NexT主题_config.yml(主意是NexT主题的_config.yml,不是hexo站点目录下的_config.yml),文件路径your-hexo-site/themes/next/_config.yml,添加 guestbook 到 menu 中,如下:

    1
    2
    3
    4
    5
    6
    7
    8
    menu:
    home: /
    #categories: /categories
    about: /about
    archives: /archives
    # tags: /tags
    #commonweal: /404.html
    guestbook: /guestbook
  2. 找到你NexT主题zh-Hans.yml文件(我的网站是简体语言的),文件路径your-hexo-site/themes/next/languages/zh-Hans.yml,添加 guestbook: 留言 到 menu 中,如下:

    1
    2
    3
    4
    5
    6
    7
    8
    menu:
    home: 首页
    archives: 归档
    categories: 分类
    tags: 标签
    about: 关于
    commonweal: 公益404
    guestbook: 留言
  3. 新建一个 guestbook 页面:

    1
    hexo new page "guestbook"

NexT主题添加腾讯空间404公益页面

原来主题也有介绍了如何在增加腾讯公益404页面,但是整个页面跳了出去,我个人比较喜欢下面404页面嵌在内页这种风格
腾讯空间404
使用方法一样,新建404.html页面,将下面代码拷进去保存,放到主题的source目录下即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<title>404 - arao'blog</title>
<meta name="description" content="404错误,页面不存在!">
<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"/>
</head>
<body>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js" charset="utf-8"></script>
</body>
</html>

Swiftype站内搜索

呃,NexT主题github上给的教程有点旧了,那就粗略说下最新的使用swiftype实现站内搜索方法吧,基于swiftype v2.0.0版本。
1.在站点的配置文件中增加
swiftype_key: your-swiftype-key

2.在swiftype官网后台控制面板中选择 install,填完外观(appearance)一项后进入安装代码(install code)即可看到自己的 swiftype_key ,填外观(appearance)一直按next默认样式即可。
your-swiftype-key

3.在进入搜索框(search field)一项时,主意将搜索框的ID改成NexT主题搜索框的ID#st-search-input
swiftype搜索框ID

4.最后进入(activate)这一项,点击右下角的ACTIVATE SWIFTYPE按钮即可完成swiftype的所有配置了。

5.可能遇到的问题:swiftype的爬虫一直抓取不了你的页面,一直搜索失败。后台提示如下:
Our crawler hasn’t downloaded any pages yet
If this message doesn’t disappear in a few minutes, please check that your website’s Robots.txt file does not block the “Swiftbot” User-agent, and that your website does not have Robots meta tags that prevent web crawlers from visiting your pages.
我一开始填写网址的时候是填了http://www.arao.me,后来改成http://www.arao.me/多了/后就成功了。

hexo NexT主题首页title的优化

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

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

改成

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

这时候你的首页标题会更符合网站名称 - 网站描述这习惯。
进阶,做了seo优化,把关键词也显示在Title标题里,可改成

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

注意:别堆砌关键字,整个标题一般不超过80个字符,可以通过chinaz的seo综合查询检查。