NexT主题个性化修改与调试方案

看不懂任何代码慎入。

NexT的确是一款非常优秀的主题，挑选和初步配置Hexo主题提到：

我选择时主要考虑：可供性强、界面简洁、素雅、交互设计、移动适配、文档技术支持完善程度等。最终选择了Next.Mist。

除此之外，第三方插件集成成熟，提供了相当多的插件接口，并且预制了代码。只需要在 ‘_config.yml’做少量修改，就可以生效；现在iissnan还在支持不断更新主题版本，我提出的问题很快得到了解答,在此一并感谢。
本文会详细记录自己针对插件的个性化配置与调整，给出调整理由，欢迎大家留言讨论。

调整实例

侧边栏改动

NexT的侧边栏设计非常巧妙，但是站点概览中的“分类”与“标签”并不能直接连接到对应的页面。如果在首页的上方按钮区域没有新增“分类”、“标签”按钮，那么读者点开侧边栏看到了分类与标签会本能的点击，但是没有效果。如果首页添加了“分类”、“标签”按钮，用户点击了侧边栏，看到了分类与标签字样也是可以点击的，就会在一个页面出现重复的点击位置，用户体验不太好。技术上没有实现的具体原因参考hexo-theme-next的讨论。Never_yu’s Blog给出了修改方法：

找到需要修改的文件地址：

1	your blog dir／themes/next/layout/_macro/sidebar.swig

把对应的代码段调整，将原来的通过”theme.menu.categories”和“theme.menu.tags”判断链接的逻辑修改为直接增加链接到对应页面的逻辑。
修改前的代码如下：

{% if site.categories.length > 0 %}
    <div class="site-state-item site-state-categories">
        {% if theme.menu.categories %}<a href="{{ url_for(theme.menu.categories) }}">{% endif %}
            <span class="site-state-item-count">{{ site.categories.length }}</span>
            <span class="site-state-item-name">{{ __('state.categories') }}</span>
        {% if theme.menu.categories %}</a>{% endif %}
    </div>
{% endif %}

{% if site.tags.length > 0 %}
    <div class="site-state-item site-state-tags">
        {% if theme.menu.tags %}<a href="{{ url_for(theme.menu.tags) }}">{% endif %}
        <span class="site-state-item-count">{{ site.tags.length }}</span>
        <span class="site-state-item-name">{{ __('state.tags') }}</span>
        {% if theme.menu.tags %}</a>{% endif %}
    </div>
{% endif %}

修改后代码如下：

{% if site.categories.length > 0 %}
    <div class="site-state-item site-state-categories">
        <a href="{{ url_for(theme.menu.categories+'/categories') }}">
            <span class="site-state-item-count">{{ site.categories.length }}</span>
            <span class="site-state-item-name">{{ __('state.categories') }}</span>
        </a>
    </div>
{% endif %}


{% if site.tags.length > 0 %}
    <div class="site-state-item site-state-tags">
        <a href="{{ url_for(theme.menu.tags+'/tags') }}">
            <span class="site-state-item-count">{{ site.tags.length }}</span>
            <span class="site-state-item-name">{{ __('state.tags') }}</span>
        </a>
    </div>
{% endif %}

注意：在做上面的修改之前，需要先保证新建了对应的页面，页面的新建方法见后续文章内容。

新增页面

博客一般都会有“关于”页面，介绍博客与博主的基本信息，贴上自己的简历、作品集等也是不错的选择，我增加了一个“学习”的页面，这时候就需要用到新建页面的功能。
在博客根目录下执行下面的语句：

1	hexo new page page_name

page_name换为自己的页面文件名称，不要用中文。然后your_blog_dir/soruce/下会新建一个page_name的文件夹，其中包含index.md文件。该文件的内容将来会展示到对应的页面中。

还需要在菜单栏的显示，先在your_blog_dir/themes/next/_config.yml中设置进行如下调整，这里的设置让对应的菜单找到文件的目录，／后面的内容是source后对应的文件夹名称。

menu:
  home: /
  #categories: /categories
  #archives: /archives
  #tags: /tags
  #sitemap: /sitemap.xml
  #commonweal: /404.html
  learning: /learning
  about: /about

因为Hexo是可以做多语言支持，而NexT开启了这个功能（有一些简单的模版没有开启，所以不需要这个步骤，判断标准之一是查看模版中是否有languages文件夹），所以要到
your_blog_name/themes/next/languages/下找到你对应的语言文件，我用的是中文的zh-Hans.yml文件。找到对应的位置

menu:
  home: 首页
  archives: 归档
  categories: 分类
  schedule: 日程
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  learning: 学习

只要按照这个格式，根据自己的内容修改即可。如果不修改语言的内容，menu也会有显示，会直接显示变量的名称，类似于:menu.tags的样式。另外，标签和分类的页面新建是一样的方法，但是在文章中还要进行一些基本配置，参考官方文档

Tips:

如果不想让页面显示名称，去掉title:后面的内容。
如果不想让页面显示评论框，在页面上方信息部分增加comments: false。
一劳永逸的方法是在your_blog_dir/scaffolds/page.md修改代码如下：
1
2
3
4
5
---
title:
date: {{ date }}
comments: false
---

取消评论数显示

启动“多说”的评论之后，会在博文标题下方增加一行“您有N条评论”的说明字样。对于一个长期的，相当一部分为小众技术类文字的博客来说，这个信息并不是非常重要。另外，考虑到多说的稳定性会影响到这里的显示（这几天就遇到了类似的问题），所以决定去掉显示。
首先要找到对应的文件目录:your_blog_dir/themes/next/layout/_macro/post.swig，在该目录下搜索”duoshuo”，删掉对应的内容。

{% if post.comments %}
    {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
        <span class="post-comments-count">
            <span class="post-meta-divider">|</span>
            <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
                <span class="post-comments-count ds-thread-count" data-thread-key="{{ post.path }}" itemprop="commentCount"></span>
            </a>
        </span>
    {% elseif theme.facebook_comments_plugin.enable %}
        <span class="post-comments-count">
            <span class="post-meta-divider">|</span>
            <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
                <span class="post-comments-count fb-comments-count" data-href="{{ post.permalink }}" itemprop="commentCount">0</span> comments
            </a>
        </span>
    {% elseif theme.disqus_shortname %}
        <span class="post-comments-count">
            <span class="post-meta-divider">|</span>
            <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
                <span class="post-comments-count disqus-comment-count" data-disqus-identifier="{{ post.path }}" itemprop="commentCount"></span>
            </a>
        </span>
    {% elseif theme.hypercomments_id %}
    <!--noindex-->
        <span class="post-comments-count">
            <span class="post-meta-divider">|</span>
            <span class="post-meta-item-icon">
                <i class="fa fa-comment-o"></i>
                <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
                    <span class="post-comments-count hc-comment-count" data-xid="{{ post.path }}" itemprop="commentsCount"></span>
                </a>
            </span>
        </span>
        <!--/noindex-->
        {% endif %}
    {% endif %}

这一段代码把几种可能的评论情况都规避掉了，如果以后还想要，找到对应的位置加上即可。

修改分享

我启动了多说的分享功能，但是默认的分享功能显示的内容分享到微博、QQ空间、微信等，内容太多。只需要放微信、微博即可，其他内容在更多（前面的加号）里会有体现。
首先找到对应的文件目录：

1	your_blog_dir/themes/next/layout/_partials/share/duoshuo_share.swig

修改代码，把不需要显示的内容去掉即可。

<ul  class="ds-share-icons-16">

<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
<li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
<li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>

</ul>

调整页脚

由于增加了UV、PV的展示，两行内容变为了三行，长短跨度较大，也是有碍美观，所以我把三行的内容改成了两行显示，并且稍微修改了显示的文字。

找到要修改的文件地址：

1	your_blog_dir/themes/next/layout/_partials/footer.swig

调整后的代码如下

<div class="copyright" >
{% set current = date(Date.now(), "YYYY") %}
&copy; {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>

<div class="theme-info"> |
{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io" rel="external nofollow">Hexo</a>') }}

{{ __('footer.theme') }} -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
NexT.{{ theme.scheme }}
</a>
</div>
</div>

还需要调整语言的目录，上面已经提到，不再赘述，文件位置如下：

1	your_blog_dir/themes/next/languages/zh-Hans.yml

找到footer部分，修改为自己喜欢的显示文字即可。

1
2
3

footer:
powered: " %s "
theme: theme

插件配置

在主题的_config.yml文件中，有大量的关于插件的配置信息。在Next主题配置文件说明有详细的解释说明，这里给出部分示例。
注意：由于yml文件的严格的格式要求，有一些下面的格式可能有错误，一般来说如果报错了，在对应的行前面空两格空格即可。

MathJax Support

在科学写作的博客中有解释，这里只需要把enabel和per_page改为true，cdn如果不知道是什么建议先不要动。

# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:
  enable: true
  per_page: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

百度分析和主动推送

# Baidu Analytics ID
baidu_analytics: 722****26

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

在百度统计中找到自己的ID，现在是32位的数字和字母混合码。

多说留言和分享

# Duoshuo ShortName
duoshuo_shortname: wangjunyublog

# Share
duoshuo_share: true

上面的shortname是多说中每一个不同域名用户自己设置的”shortname”。下面的分享制药开启即可。

Google分析和站长工具

需要“科学上网”，注册Google帐号。Webmaster的认证，认证之后可以像百度站长一样查看google的站点收录数据。Google提供了多种认证方式，我最后用的其他的认证方式，一旦认证了之后，这里就不需要了。

Google Analytics的ID，也是需要注册之后取得对应的ID，类似于UA-八位字母-一位数字的格式

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:


# Google Analytics
google_analytics: UA-****-1

CNZZ 统计

注册之后可以查看站点的统计情况，siteid是十位数字

1 2	# CNZZ count cnzz_siteid: 1****2

文章和网站统计量显示

leancloud用于显示每篇文章的统计量，即“阅读次数 XX”。注册之后，做基础的设置，然后找到app_id和app_key，设置方法参考官方文档。不蒜子显示全站的UV、PV，设置方法参考官方文档。

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: D***z
app_key: g***N

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:

其他调整

在博客的应用中还做了其他的一些博客的配置和调整，

运维方法

个人处理

博客的技术运维与任何一个技术类项目一样，需要采用开发的方法来处理。重建Hexo的教训的经历让我认识到博客的生产环境和测试环境有必要完全分离，数据备份也非常的重要。我的博客运维中最重要的几个事项如下：

NexT主题备份
- 新建github仓库，下载官方主题文件，再把文件通过 git submoduel的形式加载到主题源码中。保证了主题文件的个人配置备份，每一次修改要及时更新文件。
博客源码备份
- 通过github和codingnet双备份。结合下一条，保证源码内容在修改之前有备份，调试成功才会部署。
博客生产和测试环境分离
- 保留测试环境为text开头的源文件，一旦和生产环境产生差异，立刻重新拷贝文件，主要命令如下：
  1
  2
  3
  ls|grep test
  rm -rf test.blog.junyu.pro/
  cp -R blog.junyu.pro test.blog.junyu.pro/

团队处理

优秀的开源社区都有一群默默奉献的极客，和你的开源社区建立连接，获得一手资料技术支持，也能够推动自己更加积极的参与到社区的建设中来。hexo-theme-next主题仓库，可以提交Issue；theme-next-docs文档仓库，可以提交Issue，和社群沟通。请咨询有价值的问题，提问前多搜一搜，试一试，拒绝伸手党。

优秀案例

iissnan|主题的设计者，表示感谢。
Never_yu’s Blog|全栈工程师，学到很多。
ARAO’S BLOG|有一些有价值的博客配置文档，最后更新2015年7月，留言已长草。
更多优秀案例参见：NexT主题优秀案例

完

声明: 本文转载需标明出处，禁止用于商业目的。

ChangeLog

161123