Hexo博客小知识

Posted on | In |

收集记录自己使用到的优化个人博客的知识和技巧，水滴石穿。

[2019年6月30日] Hexo 添加图表Mermaid特性

Hexo中插入mermaid diagrams

  1. 安装插件：npm install hexo-filter-mermaid-diagrams

  2. 配置hexo下面的_config.xml, 下面的配置增加到最后

    1
    2
    3
    4
    5
    6
    # mermaid chart
    mermaid: ## mermaid url https://github.com/knsv/mermaid
      enable: true  # default true
      version: "7.1.2" # default v7.1.2
      options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
        #startOnload: true  // default true

  3. js文件修改

  • 修改位置 （next主题为例）
    themes/next/layout/_partials/footer.swig
  • footer.swig 最后添加下面的内容
    1
    2
    3
    4
    5
    6
    7
    8
    {% if theme.mermaid.enable %}
      <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
      <script>
        if (window.mermaid) {
          mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
        }
      </script>
    {% endif %}

Hexo 使用七牛图床

如何用七牛和picGO设置免费图床
其中存储区域可以根据七牛官网查到，我的存储空间时华北的，所以设置为z1。

Hexo 站内链接

  1. 首先参考参照站内的 “文章链接变更为永久链接”, 为每篇文章添加urlname
    eg：我的《【网络编程】【RIB表与FIB表、ARP表与FDB表】》 文章对应的urlname是net_network_arp
  2. 链接过程中直接添加${urlname}.html
    eg: 我想要链接《【网络编程】【RIB表与FIB表、ARP表与FDB表】》文章
    【网络编程】【RIB表与FIB表、ARP表与FDB表
    1
    [【网络编程】【RIB表与FIB表、ARP表与FDB表](net_network_arp.html)

Hexo博客文章置顶功能

Hexo文章置顶的方法

Hexo添加站内搜索

Hexo开启站内搜索功能
1.hexo添加搜索插件
2.next主题启用搜索

自定义Hexo博客的文章模板

模板目录：scaffolds

1
2
3
4
├── scaffolds
│   ├── draft.md			//默认的草稿模板
│   ├── page.md 		    //默认的页面模板
│   └── post.md 			//默认的文章模板

可以在下面新增自己的模板格式：

1
2
3
cp post.md name.md  //name: 新模板名称
vi name.md  //编辑自己的文章模板
hexo new name "my new blog" //新建文章时使用新模板