最近研究并搭建了一个Hexo博客,测试好几个模板之后,最后用了赫赫有名的Next。然而,Next模板有几个问题,这里说一下。

首先说一下,我使用的Next模板版本是5.1.46.4.0。后者,是在我写这篇文章之前10天最后更新的,比release发布的版本新。

(一)Menu的大bug

这两个版本的模板都存在这个bug,这就说明官方一直没有修复。在github有人提交过有关的issue,因此我不再重复提交。

1.bug特征

(1)在模板文件夹下的_config.yml文件中,在Menu处使用默认设置:

home: /
archives: /archives/
about: /about/
……

或者修改为:

home: /
archives: archives/
about: about/
……

打开首页,页面显示正常。但是,如果点击archivesabout等菜单,则只会刷新首页,无法打开其他页面。

(2)如果使用如下设置:

home: /
archives: /archives
about: /about
……

或者

home: /
archives: archives
about: about
……

打开首页,页面显示正常。点击archives,可以进入archives页面。此时如果再点击首页,进入的还是archives页面;如果此时点击about菜单,则会试图打开archives/about

2.bug修复

针对这个问题,可以使用如下方式修复:

(1)针对5.1.4版本,打开/layout/_partials/header.swig,第43行:

<a href="{{ url_for(path.split(`||`)[0]) | trim }}" rel="section">

改为

<a href="{{path.split(`||`)[0] | trim }}" rel="section">

即可暂时性修复。

(2)针对6.4.0版本,打开layout/_macro/menu/menu-item.swig,第6行:

<a href="{{ url_for(itemURL) }}" rel="section">

修改为

<a href="{{itemURL}}" rel="section">

即可暂时性修复。

(二)首页评论数永远为0和文章页评论数不显示

_config.yml中,除Valine之外,其他评论设置都有一个count选项,这是首页显示评论数: 用来计数的,唯独Valine没有这个功能。这样的话首页评论数永远是0,文章页评论数不显示,只显示为评论数: 。我目前不知道如何修复,只能是把评论数: 0评论数: 干掉。以6.4.0为例,代码位置是layout/_macro/post.swig,147~208行,评论计数有关代码如下:

{% if post.comments %}
  {% if theme.facebook_comments_plugin.enable %}
    <span class="post-comments-count">
      <span class="post-meta-divider">|</span>
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
        <span class="post-meta-item-text">{{ __(`post.comments_count`) + __(`symbol.colon`) }}</span> <span class="post-comments-count fb-comments-count" data-href="{{ post.permalink }}" itemprop="commentCount">0</span>
      </a>
    </span>
  {% elseif theme.disqus.enable and theme.disqus.count %}
    <span class="post-comments-count">
      <span class="post-meta-divider">|</span>
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
      {% if __(`disqus`) !== `disqus` -%}
        <span class="post-meta-item-text">{{ __(`post.comments_count`) + __(`symbol.colon`) }}</span>
      {% endif %}
        <span class="post-comments-count disqus-comment-count"
    data-disqus-identifier="{{ post.path }}" itemprop="commentCount"></span>
      </a>
    </span>
  {% elseif theme.changyan.enable and theme.changyan.appid and theme.changyan.appkey %}
    <span class="post-comments-count">
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-comment-o"></i>
    </span>
    {% if is_post() %}
      <a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
        <span class="post-meta-item-text">{{ __(`post.comments_count`) + __(`symbol.colon`) }}</span> <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="{{ post.path }}" itemprop="commentsCount"></span>
      </a>
    {% else %}
      <a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
        <span class="post-meta-item-text">{{ __(`post.comments_count`) + __(`symbol.colon`) }}</span> <span id="url::{{ post.permalink }}" class="cy_cmt_count" data-xid="{{ post.path }}" itemprop="commentsCount" ></span>
      </a>
    {% endif %}
  {% elseif is_post() and theme.gitment.enable and theme.gitment.mint and theme.gitment.count %}
    <span class="post-comments-count">
      <span class="post-meta-divider">|</span>
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
        <span class="post-meta-item-text">{{ __(`post.comments_count`) + __(`symbol.colon`) }}</span> <span class="post-comments-count gitment-comments-count" data-xid="{{ url_for(post.path) }}" itemprop="commentsCount"></span>
      </a>
    </span>
  {% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
    <span class="post-comments-count">
      <span class="post-meta-divider">|</span>
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
        <span class="post-meta-item-text">{{ __(`post.comments_count`) + __(`symbol.colon`) }}</span> <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
      </a>
    </span>
  {% endif %}
{% endif %}

如果不切换为其他评论系统的话,就把这段代码干掉,首页就不会显示评论数: 0,文章页也不会显示评论数: 了。

(三)侧栏分类、标签的显示和超链接

如果文中没有设置分类、没有插入标签,则侧栏不显示分类标签

如果文中设置分类、插入标签,则侧栏显示分类标签,并显示有关数目,但是分类标签没有超链接。

要想让它有超链接,需要新建categoriestags页面。在两个index.md文件中,分别写入如下代码:

(1)categories页面:

---
title: 所有分类
date: 2018-08-18 07:58:05
type: "categories"
---

(2)tags页面

---
title: 所有标签
date: 2018-08-18 07:55:47
type: "tags"
---

上述两段代码,在---下面不需要写任何文字。title处写什么,页面显示什么。然后在_config.yml中,删除categoriestags前面的#

这样,就新建了categoriestags页面。侧栏分类标签便有了超链接,分别链接到这两个页面。

我没有启用太多功能,因此仅遇到以上问题。

(四)加入Disqus

众所周知,由于某些原因,Disqus被DNS污染,从而在中国大陆无法访问。但是它是全球最好用的第三方评论系统,没有之一。Hexo博客使用Disqus PHP API暂时实现墙内留言功能,整个过程进行了一系列的代码设置,现将更改的代码记录如下。

注:以下代码添加到Next 6.4.0的主题文件中。

(1)建立评论

/layout/_third-party/comments下新建disqusapi.swig,写入如下内容:

{% if theme.disqusapi.enable %}

{% if page.comments %}
    <link rel="stylesheet" href="//路径/iDisqus.min.css" />
    <script src="//路径/iDisqus.min.js"></script>
    <script>
        var disq = new iDisqus('comments', {
            forum: '{{ theme.disqusapi.forum }}',
            site: '{{ theme.disqusapi.site }}',
            api: '{{ theme.disqusapi.api }}',
            mode: {{ theme.disqusapi.mode }},
            badge: '{{ theme.disqusapi.badge }}',
            timeout: {{ theme.disqusapi.timeout }},
            init: true,
            identifier: '{{ page.path }}'
        });
        disq.count();
    </script>
{% endif %}

{% endif %}

在同文件夹下的index.swig写入:

{% include 'disqusapi.swig' %}

/layout/_partials/comments.swig下,最后一个{% endif %}前面,写入如下代码:

{% elseif theme.disqusapi.enable %}
    <div id="comments">
    </div>
{% endif %}

在主题的_config.yml里面,注释掉原来Disqus的有关设置,并加入新的设置:

# Disqus
# disqus:
#  enable: false
#  shortname:
#  count: true
#  lazyload: false

# Disqus APi
disqusapi:
  enable: true
  forum: ''  //此处填写Disqus设置中该网站对应的shortname
  site: 'https:// '  //如果已经开启https,此处一定要写https。作者说以后会修正这个问题
  api: ''  //此处是api网址
  mode: 1  //此处按api的Readme填写
  badge: '博主'
  timeout: 1000  //此处按api的Readme填写

搭建反向代理时,路径下的css和js一度无法访问,出现403提示。这时需要对文件夹“重设拥有者”,删除下面的.htaccess文件(如有),便可以正常访问了。

(2)增加提示

/layout/_macro下面新建passage-end-tag.swig,写入如下内容:

<div>
{% if not is_index %}
    <div style="text-align:center; color: #636363; font-size: 15px"><br/>本博客使用Disqus评论系统,目前暂时实现墙内留言功能。如果此时无法显示评论框,请使用代理访问。<br/></div>
{% endif %}
</div>

在同文件夹的post.swig中,找到如下代码:

{% set isLast = loop.index % page.per_page === 0 %}
{% if is_index and not isLast %}
  <div class="post-eof"></div>
{% endif %}

把下面代码加入到它的前面:

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

在主题_config.yml文件内,加入如下内容:

# 文本结束提示语
passage_end_tag:
  enabled: true

其他的就是反向代理的搭建。需要境外主机,有PHP 5.6+环境,有域名绑定,看官方Readme即可。搭建过程中得到了原作者Fooleap的帮助,在此表示感谢。

最后,放上我的Hexo博客链接:点击访问。如果发现这个链接访问的页面不是Hexo博客,或者无法访问了,那就说明这个Hexo博客不再维护了或者域名过期了。