【配置】hexo及NexT主题的配置

发表于 | 分类于 |
| 字数统计: 1.7k 字 | 阅读时长 ≈ 8 分钟
hexo及NexT主题的简单配置，按需修改

一、网站标题栏背景颜色

打开 themes/next/source/css/_custom/custom.styl , 在里面写下如下代码：

1
2
3
.site-meta {
  background: rgb(85, 85, 85);
}

二、开启加载动画

修改 themes/next/_config.yml，搜索关键字 pace 并把 false修改为 true ，加载条有许多样式，可自行更换。

三、浏览页面的时候显示当前浏览进度

修改 themes/next/_config.yml ，搜索关键字 scrollpercent ， 并把 false 改为 true。

四、背景的设置

在主题配置文件中，查找canvas：

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: true

开启相应的背景，只要把对应的false设置为true，记得把其他都改为false

五、修改内容区域宽度

Next 对内容的宽度的设定如下：

  • 700px，当屏幕宽度 < 1600px
  • 900px，当屏幕宽度 >= 1600px
  • 移动设备下，宽度自适应

在主题目录下的 source\css_variables\custom.styl 文件，新增变量：

1
2
3
4
// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme， Pisces Scheme 编辑themes\next\source\css\_schemes\Picses\_layout.styl文件，更改以下 css 选项定义值：

1
2
3
.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}

六、NexT主题分页的翻页箭头显示

  • 修改: themes\next\layout\_partials\pagination.swig 为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% if page.prev or page.next %}
        <nav class="pagination">
          {{
            paginator({
              prev_text: '<',
              next_text: '>',
              mid_size: 1
            })
          }}
        </nav>
      {% endif %}

七、添加自定义menu菜单

  1. 修改themes/next/_config.yml，在menu下添加菜单项，格式为 Key: /link || icon ，icon即为 Font Awesome 提供的图标。注意统一缩进，如果出现地址多了 %20/ 无法访问，则删去 || 前的空格， 例如 skill: skill|| book。
  2. 修改 themes/next/languages/zh-Hans.yml ，在menu下添加对应Key的中文，例如 skill: 技能 ，注意统一缩进。
  3. 在博客根目录，即执行hexo操作的目录，运行 hexo new page "skill"，也就是第1步对应添加的Key然后编辑新建的 source/skill/index.md 即可。同样，我们也可以使用 技术: /tags/tech || wrench，实现按照标签进行自定义菜单。

八、搜索功能

  • 安装插件

    1
    npm install hexo-generator-searchdb --save

  • 打开 themes/next/_config.yml ，搜索关键字 local_search ，设置为 true

  • 打开hexo的站点配置 _config.yml，添加

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

九、统计功能

显示文章字数统计、阅读时长及总字数，

  • 安装插件

    1
    npm i --save hexo-wordcount

  • 打开 themes/next/_config.yml ，搜索关键字 post_wordcount，将所需选项的 false 改为 true

  • 打开 themes/next/layout/_macro/post.swig，搜索关键词 post.wordcount，添加 字 到末尾

    1
    2
    3
    <span title="{{ __('post.wordcount') }}">
        {{ wordcount(post.content) }} 字
    </span>

    同理，搜索关键词 post.min2read，添加 分钟 到末尾

    1
    2
    3
    <span title="{{ __('post.min2read') }}">
        {{ min2read(post.content) }} 分钟
    </span>

十、文章加密访问

打开 themes/next/layout/_partials/head.swig文件插入代码：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入密码') !== '{{ page.password }}'){
                alert('密码错误');
                history.back();
            }
        }
    })();
</script>

写文章时加上password: *：

1
2
3
4
5
---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---

十一、hexo在文章中添加图片

  1. 安装图片上传插件npm install hexo-asset-image --save

  2. 在_config.yml配置文件中，修改为 post_asset_folder: true

  3. 修改: /node_modules/hexo-asset-image/index.js 为

    查看详细
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     ...
        
      if(config.post_asset_folder){
        var link = data.permalink;
        /* 注释以下内容
        var beginPos = getPosition(link, '/', 3) + 1;
        var appendLink = '';
        // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
        // if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
        if(/.*\/index\.html$/.test(link)) {
          // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
          // image in xxtitle/ will go to xxtitle/index/
          appendLink = 'index/';
          var endPos = link.lastIndexOf('/');
        }
        else {
          var endPos = link.lastIndexOf('.');
        }
        link = link.substring(beginPos, endPos) + '/' + appendLink;
        */
        /* 修改为下面四行 */
        var link = data.permalink;
        var beginPos = getPosition(link, '/', 3) + 1;
        var endPos = link.lastIndexOf('/') + 1;
        link = link.substring(beginPos, endPos);

        var toprocess = ['excerpt', 'more', 'content'];

    ...

  4. 然后每次hexo n "文章标题"时，_posts文件夹里都会新建一个文章标题的文件夹，把你的图片素材统一放这里，然后md格式的文章正文里引用 [图片说明](文章标题/图片名.扩展名)

十二、部分图片禁用fancybox

打开 theme/next/source/js/src/utils.js，添加 if ($(this).hasClass('nofancybox')) return;

1
2
3
4
5
6
7
8
9
10
11
wrapImageWithFancyBox: function () {
    $('.content img')
      .not('[hidden]')
      .not('.group-picture img, .post-gallery img')
      .each(function () {
        var $image = $(this);
        
        if ($(this).hasClass('nofancybox')) return;
        
        var imageTitle = $image.attr('title');
        var $imageWrapLink = $image.parent('a');

使用时，在img标签使用的时候加上 class="nofancybox" 即可。

十三、添加代码块折叠功能

  1. 先创建 themes/next/scripts/custom/fold_tag.js，

    1
    2
    3
    4
    5
    6
    7
    8
    /* global hexo */
    // Usage: {% fold ???? %} Something {% endfold %}
    function fold (args, content) {
      var text = args[0];
      if(!text) text = "点击显/隐";
      return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
    }
    hexo.extend.tag.register('fold', fold, {ends: true});

  2. 以及 themes/next/source/custom/fold_action.js文件，

    1
    2
    3
    4
    5
    6
    7
    8
    $(document).ready(function(){
        $(document).on('click', '.fold_hider', function(){
            $('>.fold', this.parentNode).slideToggle();
            $('>:first', this).toggleClass('open');
        });
        //默认情况下折叠
        $("div.fold").css("display","none");
    });

  3. 然后创建文件 themes/next/layout/_custom/post-details.swig

    1
    2
    3
    4
    {# hexo-theme-next/layout/_custom/post-details.swig
    add to: themes/hexo-theme-next/layout/_scripts/pages/post-details.swig
    #}
    <script type="text/javascript" src="{{ url_for(theme.custom) }}/fold_action.js?v={{ version }}"></script>

  4. 并在`themes/next/layout/_scripts/pages/post-details.swig的末尾加上

    1
    {% include '../../_custom/post-details.swig' %}

  5. 修改主题下的_config.yml ，添加 custom: custom， 注意空格

    1
    2
    3
    4
    5
    # Assets
    css: css
    js: js
    images: images
    custom: custom

  6. 最后修改 themes/next/source/css/_custom/custom.styl，添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .hider_title{
    	font-family: "Microsoft Yahei";
    	cursor: pointer;
    }
    .close:before{
    	content: "▼";
    }
    .open:before{
    	content: "▲";
    }

十四、文章目录修改

  • 目录默认展开。打开 themes/next/source/css/_custom/custom.styl 添加以下内容

    1
    2
    //文章目录默认展开
    .post-toc .nav .nav-child { display: block; }

  • 取消自动编号，开启自动换行。打开 themes/next/_config.yml，搜索关键词 toc

    1
    2
    3
    4
    5
    6
    7
    8
    toc:
      enable: true

      # Automatically add list number to toc.
      number: false

      # If true, all words will placed on next lines if header width longer then sidebar width.
      wrap: true

十五、文章结束语

  • 添加模板文件

    在主题目录下\layout\_macro中新建 passage-end-tag.swig文件,并添加以下内容：

    1
    2
    3
    4
    5
    6
    7
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">
                  -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
            </div>
        {% endif %}
    </div>

  • 导入模板文件

    在\layout\_macro\post.swig文件中，找到：

    1
    2
    3
    {#####################}
    {### END POST BODY ###}
    {#####################}

    在上面代码之前添加：

    1
    2
    3
    4
    5
    <div>
          {% if not is_index %}
              {% include 'passage-end-tag.swig' %}
          {% endif %}
    </div>

  • 配置
    在主题配置文件中添加：

    1
    2
    3
    # 文章末尾添加“本文结束”标记
    passage_end_tag:
      enabled: true

十六、增强文章底部标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 #换成

1
<i class="fa fa-tag"></i>
_/_/_/_/_/ EOF _/_/_/_/_/