Hexo博客插件推荐

本文最后更新于 2024年2月7日 上午

Hexo本身和本人使用的Hexo Fluid主题应该是内置支持了很多插件，不再需要单独安装。所以，本文只推荐一些本人额外安装的一些插件。

hexo-asset-img

hexo-asset-img：转换Markdown文件中引用图片的相对路径为asset_img标签。

存在的问题

因为Hexo的语法和路径要求导致的，在本地和Hexo博客上不能同时加载出图片。

安装配置流程

Hexo博客解决插入图片的路径问题 。

hexo-abbrlink

hexo-abbrlink: 通过 Hex 算法生成永久的文章链接。

存在的问题

Hexo文章链接默认的生成规则是:year/:month/:day/:title，即按照年、月、日、标题的顺序。当文件名为中文时，会导致 url 链接中也出现中文。这样的链接非常不利于阅读，也不美观。更重要的是，太复杂的网址不利于被搜索引擎检索推荐到。因此，选择使用hexo-abbrlink插件为文章生成更加简洁方便的永久链接。

安装配置流程

  1. 安装hexo-abbrlink插件

    在./Blog/即博客根目录下打开Git Bash，输入以下内容：

    1
    npm install hexo-abbrlink --save

  2. 修改./Blog/目录下的站点配置文件_config.yml：

    1. 将：

      1
      permalink: :year/:month/:day/:title/

      使用#注释掉，替换为：

      1
      2
      3
      4
      # permalink: :year/:month/:day/:title/
      permalink: posts/:abbrlink/
      # or
      permalink: posts/:abbrlink.html

      网址以/结尾和以.html结尾的区别：

      1. 单从链接属性来说，/结尾的链接是目录形式，.html结尾的链接是文章页面形式。
      2. 对SEO（按照搜索引擎的算法，提升你的文章在搜索引擎中的自然排名）来说，影响不大。

    2. 另外，可以添加的配置选项包括：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      # abbrlink config
      abbrlink:
        alg: crc32      #support crc16(default) and crc32
        rep: hex        #support dec(default) and hex
        drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
        # Generate categories from directory-tree
        # depth: the max_depth of directory-tree you want to generate, should > 0
        auto_category:
           enable: true  #true(default)
           depth:        #3(default)
           over_write: false 
        auto_title: false #enable auto title, it can auto fill the title by path
        auto_date: false #enable auto date, it can auto fill the date by time today
        force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.

      其中，hexo-abbrlink插件支持 16 位、32 位以及十进制，十六进制共 4 种不同的模式，你可以按照需求选择。生成链接的样式：

      1
      2
      3
      4
      5
      6
      7
      8
      # crc16 & hex
      https://post.zz173.com/posts/66c8.html
      # crc16 & dec
      https://post.zz173.com/posts/65535.html
      # crc32 & hex
      https://post.zz173.com/posts/8ddf18fb.html
      # crc32 & dec
      https://post.zz173.com/posts/1690090958.html

  3. 在部署博客后，可以发现./Blog/source/_posts目录下的.md博客文档开头的Front-matter中多了一项abbrlink: xxx。其中，xxx就是你博客文章对应的永久链接了，例如：

    1
    https://post.zz173.com/posts/xxx/

    可以通过修改这里的abbrlink: xxx来修改链接？（暂未尝试）

hexo-all-minifier

hexo-all-minifier：可以一次对html、css、js和image进行压缩。

存在的问题

压缩文件，加快博客的访问速度。

安装配置流程

目前未安装。

hexo-all-minifier的参考安装链接。

更换Markdown渲染插件

hexo-renderer-markdown-it：支持大量Markdown扩展功能。

@traptitech/markdown-it-katex：将KaTeX渲染添加到Markdown。

Markdown基本语法

存在的问题

Hexo内置的默认渲染插件是hexo-renderer-marked，缺少很多功能，比如 GFM (GitHub Flavored Markdown)、高亮、上下标、脚注、emoji和对数学公式的支持等。

安装配置流程

  1. 在./Blog/即博客根目录下打开Git Bash，输入以下内容：

    1
    2
    3
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-markdown-it --save
    npm install @traptitech/markdown-it-katex --save

  2. 在./Blog/目录下的站点配置文件_config.yml中添加（默认参数）：

    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
    30
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    markdown:
      preset: 'default'
      render:
        html: true
        xhtmlOut: false
        langPrefix: 'language-'
        breaks: true
        linkify: true
        typographer: true  # 自动替换常见的排版元素
        quotes: '“”‘’'
      enable_rules:
      disable_rules:
      plugins:
      anchors:
        level: 2  # 点击文章中至少几级目录才会实现跳转
        collisionSuffix: ''
        permalink: false
        permalinkClass: 'header-anchor'
        permalinkSide: 'left'
        permalinkSymbol: '¶'
        case: 0
        separator: '-'
      images:
        lazyload: false
        prepend_root: false
        post_asset: false
      inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

    注意，preset参数有三个选项：

    • commonmark：将解析器配置为严格的Common Mark模式。

    • default：类似于GFM，当没有预设名称时使用。启用所有可用的规则，但仍然没有 html、排版和自动链接器。也就是当你只配置了preset: 'default'而没有自定义其他 参数时：

      1
      2
      3
      4
      markdown:
        preset: 'default'
        render:
        anchors:

      会自动使用如上的默认参数。

    • zero：禁用所有规则。通过开启.enable()来快速设置您的配置。例如，当您只需要粗体和斜体标记而不需要其他任何东西时。

    其它内容解释和配置效果可以参见hexo-renderer-markdown-it的README.md或hexo更换 markdown渲染器。

  3. 我的最终配置如下：

    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    markdown:
      preset: 'default'
      render:
        html: true
        xhtmlOut: false
        langPrefix: 'language-'
        breaks: true
        linkify: true
        typographer: false  # 自动替换常见的排版元素
        quotes: '“”‘’'
      enable_rules:
      disable_rules:
      plugins:
        - "@traptitech/markdown-it-katex"
        - markdown-it-abbr
        - markdown-it-attrs
        - markdown-it-cjk-breaks
        - markdown-it-container
        - markdown-it-deflist
        - markdown-it-emoji
        - markdown-it-footnote
        - markdown-it-ins
        - markdown-it-mark
        - markdown-it-sub
        - markdown-it-sup
      anchors:
        level: 1  # 点击文章中至少几级目录才会实现跳转
        collisionSuffix: ''
        permalink: false
        permalinkClass: 'header-anchor'
        permalinkSide: 'left'
        permalinkSymbol: '¶'
        case: 0
        separator: '-'
      # 去掉了images和inline参数
Hexo博客搭建
Hexo博客插件推荐
http://zeyulong.com/posts/7b14eacc/
作者
龙泽雨
发布于
2024年1月3日
许可协议