动动手指，NexT主题与Hexo更搭哦（基础篇）

林土晓 7年前 (2015-06-19) 440 次

NexT主题安装使用

从 GitHub 下载与安装

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

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

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把下面的代码

{％如果 page.comments％}
  < div  class = “评论”  id = “评论” > {％if（config.duoshuo和config.duoshuo.shortname）或config.duoshuo_shortname％}
      < div  class = “ ds-thread”  data-thread-key = “ {{page.path}} ”
            data-title =“ {{page.title}} ” data-url =“ {{page.permalink}} ” >  {％elseif config.disqus_shortname％}
      < DIV  ID = “disqus_thread” > < NOSCRIPT >请激活JavaScript以浏览< 一个HREF = “//disqus.com/?ref_noscript” >评论Disqus供电。   {％endif％}
  </div>
{％endif％}

复制到

    {{page.content}}
  {％endif％}
  //上面的代码复制到这里
</div>

接着将下面的代码

{％阻止 comment_system％}
  {％包括 '_scripts / comments / duoshuo.swig'％}
  {％包括 '_scripts / comments / disqus.swig'％}
{％endblock％}

复制到下面代码的底部

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

保存。

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

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

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

   {% 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>

插在下面代码之间

        {{ list_categories() }}
      </div>
    </div>
//代码插在这里
  {% else %}
    {{ page.content }}

接着将下面的代码

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

复制到下面代码的底部

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

保存。

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

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

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

改成下面代码即可

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

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

经过上个步骤你现在可以任意指定某些页面支持多说系统，现在我们实现指定guestbook page支持多说系统，从而实现留言功能。指定guestbook页面支持多说系统很简单，只需要把上面提到的仅在指定的单个页面page支持多说评论这例子中的page.type === "about"改成page.type === "guestbook";即可。修改完毕后，接下来要做的是：
找到你NexT主题_config.yml（主意是NexT主题的_config.yml，不是hexo站点目录下的_config.yml），文件路径your-hexo-site/themes/next/_config.yml，添加 guestbook 到 menu 中，如下:

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

找到你NexT主题zh-Hans.yml文件（我的网站是简体语言的），文件路径your-hexo-site/themes/next/languages/zh-Hans.yml，添加 guestbook: 留言到 menu 中，如下:

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  commonweal: 公益404
  guestbook: 留言

新建一个 guestbook 页面：

hexo new page "guestbook"

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

原来主题也有介绍了如何在增加腾讯公益404页面，但是整个页面跳了出去，我个人比较喜欢下面404页面嵌在内页这种风格

使用方法一样，新建404.html页面，将下面代码拷进去保存，放到主题的source目录下即可：

<!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="//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-key2.在swiftype官网后台控制面板中选择 install，填完外观(appearance)一项后进入安装代码(install code)即可看到自己的 swiftype_key ,填外观(appearance)一直按next默认样式即可。

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

4.最后进入(activate)这一项，点击右下角的ACTIVATE SWIFTYPE按钮即可完成swiftype的所有配置了。
5.可能遇到的问题：swiftype的爬虫一直抓取不了你的页面，一直搜索失败。后台提示如下：Our crawler hasn’t downloaded any pages yetIf 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.我一开始填写网址的时候是填了https://www.imatx.com,后来改成https://www.imatx.com/多了/后就成功了。

hexo NexT主题首页title的优化

更改index.swig文件，文件路径是your-hexo-site hemes extlayout，将下面代码

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

改成

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

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

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

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

转载请注明来源：动动手指，NexT主题与Hexo更搭哦（基础篇） - 林晓博客