hexo样式汇总

更改超链接格式（文字颜色）

参考链接:Von

插图编号| 醒目文字

1
2
3
4
5
6
7
8
9

{% note default %} 默认样式 {% endnote %}
{% note primary %} 主要样式 {% endnote %}
{% note success %} 成功样式 {% endnote %}
{% note info %} 信息样式 {% endnote %}
{% note warning %} 警告样式  {% endnote %}
{% note danger %} 危险样式  {% endnote %}


默认样式

主要样式

成功样式

信息样式

警告样式

危险样式

使用选项卡

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab，默认在第1个选项卡，如果是-1则隐藏
<!-- tab -->
**选项卡 1** 
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

效果展示：

选项卡 1

选项卡 2

选项卡 3 名字为A

自动生成目录（hexo-toc）

主题自带的配置项，生成的目录是不能够点击到文章目录自动滑动到页面指定位置的。

1
2
3
4
5
6
7
8
9
# Table Of Contents in the Sidebar
toc:
  enable: false

  # Automatically add list number to toc.
  number: true

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

通过hexo-toc生成的目录可以实现点击调转到指定页面位置，同时可以支持目录级别选择。

参考链接:hexo-toc，但是此链接还是无法解决目录的生成问题

所以，重点是解决hexo-next主题自带的toc目录，锚点失效的原因：

参考链接:hexo-toc锚点失效—有效解决办法

目录锚点失效的原因

报错文件路径: themes/next/source/js/post-details.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// TOC item animation navigate & prevent #item selector in adress bar.
  $('.post-toc a').on('click', function (e) {
    e.preventDefault();
    var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));

    <!-- 添加下面这行代码, 重新解析 URL ->
    targetSelector = decodeURI(this.getAttribute('href'))

    var offset = $(targetSelector).offset().top;

    hasVelocity ?
      html.velocity('stop').velocity('scroll', {
        offset: offset  + 'px',
        mobileHA: false
      }) :
      $('html, body').stop().animate({
        scrollTop: offset
      }, 500);
  });

经过上面的处理自动生成的目录可以正常跳转了，但是会根据页面的滑动区域自适应目录的展示，这对于需要根据目录直达指定内容的访客来说，很不方便，于是在css样式中对代码进行以下修改： 修改文件目录: themes/next/source/css/_common/components/sidebar/sidebar-toc.styl

找到如下的代码

1
.post-toc .nav .nav-child { display: none; }

修改为

1
2
.post-toc .nav .nav-child { display: block; }

next主题添加代码块一键复制功能

参考链接:hexo-next代码块复制粘贴—成功复现