【配置】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 SchemePisces 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 _/_/_/_/_/