{% if config.archive_dir != '/' and site.posts.length > 0 %}
             <div class="site-state-item site-state-posts">
             {% if theme.menu.archives %}
               <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
             {% else %}
               <a href="{{ url_for(config.archive_dir) }}">
             {% endif %}
                 <span class="site-state-item-count">{{ site.posts.length }}</span>
                 <span class="site-state-item-name">{{ __('state.posts') }}</span>
               </a>
             </div>
{% endif %}

改为

{% if config.archive_dir != '/' and site.posts.length > 0 %}
              <div class="site-state-item site-state-posts">
                <a href="{{ url_for(config.archive_dir) }}">
                  <span class="site-state-item-count">{{ site.posts.length }}</span>
                  <span class="site-state-item-name">{{ __('state.posts') }}</span>
                </a>
              </div>
{% endif %}

也就是把原来的第3、4、5、7行删掉。

15.（next旧版本才适用，新版本已修复该bug）

next文章点目录树不跳转打开F12点击目录树显示错误

找到\themes\next\source\js\src\post-details.js，打开文件

找到文件的72行左右

$('.post-toc a').on('click', function (e) {
  e.preventDefault();
  var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
  var offset = $(targetSelector).offset().top;

在第三行下加一行代码，变为

$('.post-toc a').on('click', function (e) {
  e.preventDefault();
  var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
  targetSelector = decodeURI(this.getAttribute('href'))
  var offset = $(targetSelector).offset().top;

这样点击目录树可以跳转了。

16.(是Next5.1.4旧版本的权宜之计，在更新Next 8新版本后问题得到解决。强烈推荐更新)

语法要求是：在写md文件的时候标题有h1到h6，目录之间不能跳级跨级。比如h1就后面只能h2，不能h1下面接着h3。

同时，next5.1.4版本有Bug，当目录名为中文的时候就无法展开下一级目录。这个目前还无法修复，只能暂时使用英文来代替，或者用html语言跳转方法绕过bug

先在要跳转到的位置写上

1	<a id=""></a> 在""之间写一个任意的跳转ID

文章显示的时候不会把这串代码显示出来，所以直接在后面写你自己跳转显示部分的内容就行了。

在设置跳转按钮的地方写上

1	[链接名称](#锚点id) 链接名称任意选，id面前记得有一个#号

17.新版本Next已经支持内置显示文章更新时间

显示文章更新时间

只有发布时间其实是不够准确的。我们需要一个能够显示更新时间功能。

1	打开themes\next\layout\_macro\post.swig

找到这段

<div class="post-meta">
         <span class="post-time">
           {% if theme.post_meta.created_at %}
             <span class="post-meta-item-icon">
               <i class="fa fa-calendar-o"></i>
             </span>
             {% if theme.post_meta.item_text %}
               <span class="post-meta-item-text">{{ __('post.posted') }}</span>
             {% endif %}
             <time title="{{ __('post.created') }}" itemprop="dateCreated datePublished" datetime="{{ moment(post.date).format() }}">
               {{ date(post.date, config.date_format) }}
             </time>
           {% endif %}

改为

<div class="post-meta">
  <span class="post-time">
    {% if theme.post_meta.created_at %}
      <span class="post-meta-item-icon">
        <i class="fa fa-calendar-o"></i>
      </span>
      {% if theme.post_meta.item_text %}
        <span class="post-meta-item-text">{{ __('post.posted') }}</span>
      {% endif %}
      <time title="{{ __('post.created') }}" itemprop="dateCreated datePublished" datetime="{{ moment(post.date).format() }}">
        {{ date(post.date, config.date_format) }}
      </time>
    {% endif %}
   {%if post.updated and post.updated > post.date%}
        <span class="post-updated">
        &nbsp; | &nbsp; {{ __('post.updated') }}
        <time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
        {{ date(post.updated, config.date_format) }}
       </time>
      </span>
    {% endif %}

1	再打开\themes\next\languages\zh-Hans.yml

在post栏处加上一行

1 2	post: updated: 更新于

1	再打开\themes\next\_config.yml

文件最后处加上

1	display_updated: true

18.在hexo-asset-image的加持下快速插入多张本地图片

直接将本地图片拖入相对应的文件夹内，然后把图片拖入typora中。这时直接拖图片进来显示的路径是绝对路径。在Typora中打开源代码模式全选复制

再把复制到word中，利用word的“替换”功能，把绝对路径前面部分替换成无

再把代码拖入typora即可（不过现在用图床，这个插件可以说基本用不上了）

19.Hexo对花括号的支持很差，很容易出问题，能不在md文件中使用花括号就不使用。否则有可能出现hexo d部署之后文章只显示一部分的bug。

20.hexo-blog-encrypt这个博文密码加密插件，在使用next主题的情况下，加密博文打开后不会有目录树功能。

关于这个bug，作者已经在github的 readme 上写了解决办法

然而next主题是没有这个文件的

参考：https://github.com/D0n9X1n/hexo-blog-encrypt/issues/58

next对应的,找到themes\next\layout\_macro\sidebar.njk"中的第四行

1	{%- set toc = toc(page.content, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}

换成

{%- if page.encrypt == true %}
    {%- set toc = toc(page.origin, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}
{% else %}
     {%- set toc = toc(page.content, {class: 'nav', list_number: page.toc.number, max_depth: page.toc.max_depth}) %}
{%- endif %}

不过这样，加密的文章目录在输入正确密码之前也会显示出来，toc功能正常能用了但暴露了toc的内容，看自己怎么取舍。
个人觉得toc显示出来也没问题，但toc功能还是要有的，于是解禁了。

21.在md编辑器中打一行空格实际上在网页里是没有空行的，要做出空行来，请在空行输入

<br>

22.在除了侧边栏以外区域显示文章目录：

安装插件

1	npm install hexo-toc --save

再在config里加以下内容

toc:
  maxdepth: 3
  class: toc
  slugify: transliteration
  decodeEntities: false
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

接着直接在md文章内要显示文章目录的地方加上

1	<!-- toc -->

这个显示的效果等效于在csdn许多文章开头显示的的内容目录。

但是使用这个插件会和next侧边栏的目录冲突，导致Next的侧边栏目录树不能正常跳转

可以使用这个插件的修改版：https://github.com/erictt/hexo-toc-dllcn ，防止了和next侧边栏导航的冲突。

安装插件（记得先卸载上面的原hexo-toc插件）：

1	npm i @dllcnx/hexo-toc

在根目录的config文件下添加

mdtoc:
  maxdepth: 3
  class: toc
  decodeEntities: false
  anchor:
    symbol: '#'
    style: header-anchor

用法和原hexo-toc一样，都是在文章需要添加目录的地方输入

1	<!-- toc -->

Next文章目录的标题开头第一个字不要使用特殊符号，否则有可能造成无法点击目录树跳转。

但是使用这个插件的时候会有几个问题。

第一个是标题内英文必须全小写，否则无法跳转。同时基本上标题几乎不能有任何标点符号，否则都有可能无法跳转。

或者使用其他markdown生成toc目录的项目，github上面有很多，比如markdown-toc，但是hexo-toc插件比这些项目都更傻瓜化，使用方法更简单。

next自带的目录树会自动在目录前面加数字，因为个人更喜欢自己添加序号，不太喜欢这个功能

可以在config里面关闭自动添加数字

把number一项改为false

同时，expand_all: true可以让文章的目录默认全部展开

23.关于在typora内写文章

在一行文字后回车，下一行的文字和上一行的文字会有间隔，取消间隔的办法是shift+回车，这样上下行之间就没有间隔了。

24.在文中折叠部分内容

格式如下：

<details>
  <summary>点击展开折叠内容</summary>
****
</details>

第一个<summary>标签前要打四个英文空格
在两个<summary>标签之间写折叠的提示信息
第三行****处意味着要写入的被折叠信息。可以多行等操作。
这个格式，被折叠的内容是默认折叠的，如果要默认展开，则把<details>改为<details open>

2024.5.23

也可以使用插件，我觉得不好用。
折叠相关的插件：hexo-sliding-folding hexo-hide

前者不能嵌套折叠，后者太过简陋
于是在next主题文件内添加folding文件来增加折叠功能。
参考来源：https://github.com/theme-next/hexo-theme-next/pull/1489
这个Pull requests一直没有得到合并，所以就按照作者写的文件来自己手动创建吧。

themes\next\scripts\tags文件夹下新建一个folding.js文件

'use strict';

// Usage:
// {% folding 参数（可选）, 标题 %}
//
// ![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
//
// {% endfolding %}
// 颜色: blue, cyan, green, yellow, red
// 状态: 状态填写 open 代表默认打开。

// 举例：
// {% folding cyan open, 查看默认打开的折叠框 %}
//
// 这是一个默认打开的折叠框。
//
// {% endfolding %}
function postFolding(args, content) {
  args = args.join(' ').split(',');
  let style = ''
  let title = ''
  if (args.length > 1) {
    style = args[0].trim()
    title = args[1].trim()
  } else if (args.length > 0) {
    title = args[0].trim()
  }
  if (style != undefined) {
    return `<details ${style}><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
              <div class='content'>
              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
              </div>
            </details>`;
  } else {
    return `<details><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
              <div class='content'>
              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
              </div>
            </details>`;
  }

}

hexo.extend.tag.register('folding', postFolding, {ends: true});

themes\next\source\css\_common\scaffolding\tags下添加一个folding.styl

// gap
$gap = 16px // base gap
$gap-h2 = 48px
$gap-h3 = 32px
$gap-h4 = 16px
$gap-paragraph = 1rem // 区块间距
$gap-row = .5rem // 行间距
$gap-card = $gap
// border radius
$border-codeblock = 4px
// common
$color-card = white
$color-text = #555
$color-block =  #f6f6f6
// font size
$fontsize-meta = .875rem   // 14px
$fontsize-list = .9375rem // 15px
//color
$color-p = #555
$color-md-blue = #e8f4fd
$color-md-blue1 = rgba(33,150,243,0.3)

$color-mac-cyan = #e8fafe
$color-mac-cyan1 = rgba(27,205,252,0.3)
$color-mac-green = #ebf9ed
$color-mac-green1 =rgba(61,197,80,.3)
$color-mac-yellow = #fff8e9
$color-mac-yellow1 = rgba(255,189,43,0.3)
$color-mac-red = #feefee
$color-mac-red1 = rgba(254,95,88,0.3)
// transition time
$time = 0.28s

details
  display: block
  padding: $gap
  margin: $gap-row 0
  border-radius: $border-codeblock
  background: $color-card
  font-size: $fontsize-list
  transition: all $time ease
  -moz-transition: all $time ease
  -webkit-transition: all $time ease
  -o-transition: all $time ease

  summary
    cursor: url(/images/ayuda.cur),auto;
    padding: $gap
    outline:none;
    margin: 0 - $gap
    border-radius: $border-codeblock
    color: alpha($color-p, .7)
    font-size: $fontsize-meta
    font-weight: bold
    position: relative
    line-height: normal


    >p, h1, h2, h3, h4, h5, h6
      display: inline !important
      border-bottom: none !important
      cursor: url(/images/ayuda.cur),auto;

    &:hover
      color: $color-p

      &:after
        position: absolute
        content: '+'
        text-align: center
        top: 50%
        transform: translateY(-50%)
        right: $gap

  border: 1px solid $color-block

  > summary
    background: $color-block

  &[blue]
    border-color: $color-md-blue

    > summary
      background:$color-md-blue

  &[cyan]
    border-color:$color-mac-cyan

    > summary
      background:$color-mac-cyan

  &[green]
    border-color:$color-mac-green

    > summary
      background:$color-mac-green

  &[yellow]
    border-color:$color-mac-yellow

    > summary
      background:$color-mac-yellow

  &[red]
    border-color:$color-mac-red

    > summary
      background:$color-mac-red

details[open]
  border-color: alpha($color-p, .2)

  > summary
    border-bottom: 1px solid alpha($color-p, .2)
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

  &[blue]
    border-color: alpha($color-md-blue1, .3)

    > summary
      border-bottom-color: alpha($color-md-blue1, .3)

  &[cyan]
    border-color: alpha($color-mac-cyan1, .3)

    > summary
      border-bottom-color: alpha($color-mac-cyan1, .3)

  &[green]
    border-color: alpha($color-mac-green1, .3)

    > summary
      border-bottom-color: alpha($color-mac-green1, .3)

  &[yellow]
    border-color: alpha($color-mac-yellow1, .3)

    > summary
      border-bottom-color: alpha($color-mac-yellow1, .3)

  &[red]
    border-color: alpha($color-mac-red1, .3)

    > summary
      border-bottom-color: alpha($color-mac-red1, .3)

  > summary
    color: $color-p
    margin-bottom: 0

    &:hover
      &:after
        content: '-'

  > div.content
    padding: $gap
    margin: 0 - $gap
    margin-top: 0

    p > a:hover
      text-decoration: underline

    >
    p, .tabs, ul, ol, .highlight, .note, .fancybox, details
      &:first-child
        margin-top: 0

      &:last-child
        margin-bottom: 0

在同目录的index.styl下，在末尾添加一行

1	@import 'folding';

具体如何在文中用，themes\next\scripts\tags文件夹下的folding.js`文件的首几行已经有详细介绍，这里不多赘述。

25.在markdown内，可以用`来显示代码段内容，使其在文章中更为凸显。

效果展示：一个函数 print()

用法：

`print()`

26.有时想修改博文但是由于post文件夹内的md文件名都是随便起的，找到对应的md文件总需要很多时间。

可以在备份到github上的hexo原文件的仓库来查找，复制对应博文的一部分文字到搜索栏中搜索即可。
同样的，通过这个办法可以通过关键词搜索博客所有的源文件。

27.关闭特定文章的评论区

在文章页头上添加

1	comments: false

28.深色模式

next自带的深色模式不能切换，用第三方插件替换

1	npm install hexo-next-darkmode --save

config.yml里写

darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

不过这个深色模式，还不如小米自带浏览器的深色模式功能。

关于插件

hexo本身有很多的插件可以使用，你可以根据自己的情况来下载一些自己喜欢的插件来完善自己的网站。

https://hexo.io/plugins/

最后

比起建站几十分钟的时间耗费来看
后期维护和完善blog所要耗费的时间会比这多更多。