动动手指,NexT主题与Hexo更搭哦(基础篇)
林土晓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-key
2.在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综合查询检查。
评论 | 0 条评论