Next模板的问题

最近研究并搭建了一个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博客不再维护了或者域名过期了。

17 条回复

轨迹 2018年8月20日 回复

请问下博主当前这个tp主题叫什么?

林海草原 2018年8月20日 回复

主题名字和链接见博客页脚。

姜辰 2018年8月21日 回复

你怎么会突然考虑用静态博客了?

林海草原 2018年8月22日 回复

我就是折腾折腾,没有把它真正用来写博客,哈哈哈

不开门 2018年8月22日 回复

静态博客真是一巨坑啊,有位大佬说vps ping值是多少,静态博客速度就是多少。
然而经过我的一番折腾,发现静态博客与动态博客速度相差无几。

林海草原 2018年8月22日 回复

对啊,我发现没差多少,决定速度的还是主机的性能和位置。

琛苏设计 2018年8月23日 回复

突然想起来,我还有个hexo博客托管在coding

林海草原 2018年8月23日 回复

哈哈哈,都忘了,是不是域名已经过期了?

琛苏设计 2018年8月27日 回复

去看了看,还可以用。重新解析了一下。

分板机 2018年8月23日 回复

现在比较流行伪静态吧,静态不方便?

林海草原 2018年8月23日 回复

如果是托管到类似于github的平台,是不方便,需要一定的技术。还有一些为你自动生成静态的平台,只需要上传内容,他们给你自动生成的,倒是简单,只是费用不便宜。

武保网 2018年8月24日 回复

从接触typecho就再没换过,可能是简洁到习惯了吧

林海草原 2018年8月24日 回复

是的,真的很简洁。

芭比 2018年8月26日 回复

我人老咯 目前就折腾wordpress 和 typecho

林海草原 2018年8月26日 回复

稳定最好,折腾也就是为了长长见识。

fooleap 2018年8月27日 回复

这款主题配色和阮大神的博客差不多。

林海草原 2018年8月28日 回复

哈哈,主题样式是模仿他的,原来是白色背景,后来我找了一个护眼色,然后发现和阮大神的很像。

发表回复