hexo常见指令、配置与插件

发表于 更新于 分类于 ， 阅读次数：

nodeJS安装v16.18.1 LTS版本

2023年8月31日下载：Latest LTS Version: 18.17.1 (includes npm 9.6.7)

安装配置

1
2
3
npm uninstall hexo -g
npm install -g hexo
hexo init

记得按教程修改_config.yml

注意：本站使用git套git维护

请务必保证 Miaplacidus\.deploy_git\.git 存在且指向 github pages 仓库，否则hexo会直接部署到文本维护仓库。

维护仓库push / pull有问题，检查overstars_hexo_backup\.git\config 文件。

升级步骤

按照hexo官网选择合适版本nodeJS

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
#以下指令均在Hexo目录下操作，先定位到Hexo目录
#查看当前版本，判断是否需要升级
$ hexo version

#全局升级hexo-cli
$ npm i hexo-cli -g

#再次查看版本，看hexo-cli是否升级成功
$ hexo version

#安装npm-check，若已安装可以跳过
$ npm install -g npm-check

#检查系统插件是否需要升级
$ npm-check

#安装npm-upgrade，若已安装可以跳过
$ npm install -g npm-upgrade

#更新package.json
$ npm-upgrade

#更新全局插件
$ npm update -g

#更新系统插件
$ npm update --save

#再次查看版本，判断是否升级成功
$ hexo version

选择主题

将主题解压到theme文件夹后在_config.yml内指定。

更改主题文件夹下的_config.yml

编写文章及生成上传

新建文章：hexo new title "It is a title"

清空：hexo clean

生成：hexo g

上传：hexo d

本地预览：hexo s，之后打开localhost:4000

功能添加

博客添加评论区

giscus

Ayer中文说明

在github新建一个Public仓库，Settings - General，开启Discussions ，为此项目安装 giscus app 。接入方法下面二选一。

方法1

安装插件

1
npm install hexo-next-giscus --save

编辑hexo的_config文件，添加如下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
giscus:
  enable: true
  # Github repository name
  repo: Overstars/Hexo-Site-Comments-Section
  # Github repository id
  repo_id: R_kgDOKgH-yg
  # Github discussion category
  category: Announcements
  # Github discussion category id
  category_id: DIC_kwDOKgH-ys4CaHxz
  # Available values: pathname | url | title | og:title
  mapping: title
  # Available values: 0 | 1
  reactions_enabled: 1
   # Available values: 0 | 1
  emit_metadata: 0
  # Available values: light | dark | dark_high_contrast | transparent_dark | preferred-color-scheme
  theme: light_high_contrast
  # Available values: en | zh-CN
  lang: zh-CN
  # Place the comment box above the comments
  input_position: top
  # Load the comments lazily
  loading: lazy

保存之后重新部署即可，这里按照本方法实践。

方法2

使用giscus生成一个插入代码，Discussion 分类选择announcements，主题随便选一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://giscus.app/client.js"
        data-repo="Overstars/Hexo-Site-Comments-Section"
        data-repo-id="R_kgDOKgH-yg"
        data-category="Announcements"
        data-category-id="DIC_kwDOKgH-ys4CaHxz"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="light_high_contrast"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

自行在主题中插入即可。

开启友链

在 /themes/next/languages/zh-CN.yml 文件中 menu 下增加中文描述： links: 友链 。

在 sources 目录下新建 links.md 文件，，内容如下：

1
2
3
4
5
6
7
---
title: 友情链接
date: 2022-05-15 02:45:35
toc:
  enable: false
type: "links"
---

在 /themes/next/layout/_partials/page/ 新建 links.njk 文件，内容如下：

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 {% block content %}
  {######################}
  {### LINKS BLOCK ###}
  {######################}

    <div id="links">
        <style>

            #links{
               margin-top: 5rem;
            }

            .links-content{
                margin-top:1rem;
            }

            .link-navigation::after {
                content: " ";
                display: block;
                clear: both;
            }

            .card {
                width: 300px;
                font-size: 1rem;
                padding: 10px 20px;
                border-radius: 4px;
                transition-duration: 0.15s;
                margin-bottom: 1rem;
                display:flex;
            }
            .card:nth-child(odd) {
                float: left;
            }
            .card:nth-child(even) {
                float: right;
            }
            .card:hover {
                transform: scale(1.1);
                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
            }
            .card a {
                border:none;
            }
            .card .ava {
                width: 3rem!important;
                height: 3rem!important;
                margin:0!important;
                margin-right: 1em!important;
                border-radius:4px;

            }
            .card .card-header {
                font-style: italic;
                overflow: hidden;
                width: 236px;
            }
            .card .card-header a {
                font-style: normal;
                color: #2bbc8a;
                font-weight: bold;
                text-decoration: none;
            }
            .card .card-header a:hover {
                color: #d480aa;
                text-decoration: none;
            }
            .card .card-header .info {
                font-style:normal;
                color:#a3a3a3;
                font-size:14px;
                min-width: 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
        <div class="links-content">
            <div class="link-navigation">

                {% for link in site.data.linkslist.mylinks %}

                    <div class="card">
                        <img class="ava" src="{{ link.avatar }}"/>
                        <div class="card-header">
                           <div>
                              <a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a>
                              <a href="{{ link.site }}" target="_blank"><span class="focus-links">关注</span></a>
                           </div>
                           <div class="info">{{ link.info }}</div>
                        </div>
                    </div>

                {% endfor %}

            </div>
            {{ page.content }}
            </div>
        </div>

  {##########################}
  {### END LINKS BLOCK ###}
  {##########################}
{% endblock %}

修改 /themes/next/layout/page.njk 文件，在开头的 block title 内部（schedule下面）添加如下内容

1
2
3
<!-- 友情链接-->
{% elif page.type === 'links' and not page.title %}
  {{- __('title.links') + page_title_suffix }}

在 page.njk 下方的 PAGE BODY 内部，引入上一步新建的 links.njk 文件：

1
2
{% elif page.type === 'links' %}
  {%- include '_partials/page/links.njk' -%}

在 source/_data/ 文件夹中新建 linkslist.yml 文件，用于存放数据

编辑 theme\_config 下的menu标签，启用links即可 ：

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || fa fa-home
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
  links: /links/ || fa fa-link
  about: /about/ || fa fa-user
  #commonweal: /404/ || fa fa-heartbeat

访问次数统计

打开next主题配置文件\themes\next_config.yml，设置busuanzi_count下enable为true。

在该文件中搜索footer，在其下添加counter:true

打开themes\next\layout_partials\footer.swig，添加如下代码：

1
2
3
{%- if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{%- endif %

hexo-theme-next-8.18.0\layout\_macro\post.njk则需要，应该也可以加到 hexo-theme-next-8.18.0\layout\_partials\post\post-meta.njk 中

一些必要的插件安装

部署需要，否则ERROR Deployer not found: git

1
2
npm install hexo-deployer-git --save
hexo c && hexo g && hexo d

文章置顶

在themes\your theme\layout\_macro\post.swig的<div class="post-meta">下面添加

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

在新增文章的开头中加入top: true即可

如果为 hexo-theme-next-8.18.0 则在 hexo-theme-next-8.18.0\layout\_partials\post\post-meta.njk 中插入如下代码：

1
2
3
4
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
{% endif %}

调整archive页 和 tag页 显示的文章数量

1
2
npm install hexo-generator-tag --save
npm install hexo-generator-archive --save

安装后在系统配置文件 _config.yml 下添加内容：

1
2
3
4
5
6
7
8
9
10
# hexo-generator-archive@2.0.0
archive_generator:
    per_page: 50   # 0表示不分页，全部显示
    yearly: true
    monthly: true
    daily: false

# hexo-generator-tag@2.0.0
tag_generator:
    per_page: 0

文章隐藏

1
2
3
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
npm install hexo-hide-posts --save

设置 hidden: true 即可生效，只是在首页隐藏，仓库里还是有的。

不想发布的话可以设置 published: false。

添加置顶功能

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

图片引用

https://github.com/xcodebuild/hexo-asset-image，这个插件似乎有点问题：[传送门](https://zhuanlan.zhihu.com/p/542101567)。

1
npm install hexo-asset-image --save

进入node_modules修改hexo-asset-image的index.js:
node_modules –> hexo-asset-image –> index.js

第58行的

1
$(this).attr('src', config.root + link + src);

改为

1
$(this).attr('src', src);

即可使用![](文章同名文件夹/图片.jpg)的方式引入图片（下面的prependRoot和postAsset设置为false）

使用![](image.jpg)的方式插入图片，格式后缀区分大小写：

1
npm install hexo-renderer-marked --save

并且设置config.yaml配置

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: false
  postAsset: false

也可使用标签引用图片，多hexo s调试检查元素看看，生成的引用路径对不对…

1
2
3
4
# 本地图片资源，不限制图片尺寸
{% asset_img image.jpg This is an image %}
# 网络图片资源，限制图片显示尺寸
{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet %}

也可在关注下hexo-asset-img这个插件。

1
npm install hexo-asset-img --save

站内跳转

Hexo 文章跳转（链接）

引用文章

使用如下语句引入站内其他文章

1
{% post_link filename [title] [escape] %}

默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用 escape 选项，设置 false 则禁止对特殊字符进行转义。

站长认证

站点平台会让你在 index.html 的 里面加一个 html 语句，来验证站点的所有权。例如BING：

1
<meta name="msvalidate.01" content="074EBDF1D98366D8B8F4E44E93FE8D10" />

插入在themes\hexo-theme-next-8.18.0\layout\_partials\head下的head.njk中

sitemap.xml

1
npm install hexo-generator-sitemap --save

robots.txt

robots.txt 文件必须放在网站的根目录，指定搜索引擎收录的内容。

mermaid插件

  1. 安装插件，你会发现\themes\hexo-theme-next-8.18.0\layout_third-party\tags下多了一个mermaid.njk
1
$ npm install hexo-filter-mermaid-diagrams --save

  1. 修改主题配置文件_config.yml，非根目录下那个

    1
    2
    3
    4
    5
    6
    7
    # Mermaid (markdwon to flow chart, seq chart, class chart ...)
    mermaid:
      enable: true
      # Available themes: default | dark | forest | neutral
      theme:
        light: forest
        dark: dark

  2. 修改对应主题的配置文件\themes\hexo-theme-next-8.18.0\layout\page.njk，并添加CDN，似乎并不用。

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({theme: 'forest'});
    }
  </script>
{% endif %}

Local Search启用

安装插件

1
npm install hexo-generator-search --save

编辑根配置文件_config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题中启用，编辑主题配置文件_config.yml：

1
2
3
4
5
6
7
8
9
10
11
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

如果部署有问题，先hexo clean再生成。

支持五线谱abc.js

使用前记得hexo clean 一下。

安装插件：

1
npm install --save hexo-tag-abcjs

在根目录配置_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
# hexo-tag-abcjs 五线谱渲染
abcjs:
  enable: true    # 开启
  per_page: true  # 是否在每个页面均开启
  js: '/js/abcjs_midi_5.9.1-min.js'
  css: '/css/abcjs-midi.css'
  midi: true
  animation: true
  animationColors: ['#000000', '#3d9afc']
  options: {
    startingTune: 0,
    print: false,
    visualTranspose: 0,
    scale: 1,
    responsive: 'resize',
    inlineControls: {
      loopToggle: true,
      standard: true,
      tooltipLoop: 'Click to toggle play once/repeat.',
      tooltipReset: 'Click to go to beginning.',
      tooltipPlay: 'Click to play/pause.',
      tooltipProgress: 'Click to change the playback position.'
    }
  }
  scriptId: 'hexo-tag-abcjs'

使用方式：

1
2
3
{% abcjs [autoplay] [no-midi] [no-animation] %}
here is your abcString
{% endabcjs %}