Hexo进阶

本文最后更新于：2022年5月18日 晚上

Hexo生成的Blog主要目录结构

使用hexo init <folder>创建博客根目录后，在该目录下安装默认插件npm install后，目录组成如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
├── node_modules=：Hexo第三方插件安装目录
├── scaffolds：新建文章时使用的Markdown文件模板
|   ├── draft.md：草稿模板，生成的文章位于source/_drafts
|   ├── page.md：分页模板，生成的文章位于source
|   └── post.md：默认文章模板，生成的文章位于source/_posts
├── source用于存放原始的Markdown文章和图片
|   ├── _drafts：存放草稿文章的目录
|   └── _posts：存放主要文章的目录
├── themes：主题存放目录
├── _config.landscape.yml：默认主题配置文件
├── _config.yml：博客网站配置文件
├── package.json：Hexo相关脚本与包管理信息
└── package-lock.json：第三方插件信息

相关链接：

Hexo使用模板文件生成文章

1
2
3
4
5
生成文章命令：
hexo new [layout] <title>   #该方法生成的文章文件全部存放于`_posts`下

[layout] : draft / page / post
<title>  : 文章名称
1
2
3
4
5
6
生成文章并新建相应的路径文件夹：
hexo new [layout] --path "path/title" title

[layout] : draft / page / post
path/title  : 文章存放路径，需包含文章名称
title  : 文章名称

  • draft（草稿）：
    文件路径为： ./source/_drafts

    该目录下的文章，在使用hexo g编译时，会被忽略，所以也不会显示在网页上。
    如果想要把草稿文章显示出来，可以使用hexo publish [layout] <title>，将草稿文章移动到 ./source/_posts下，重新编译，就可以将文章显示出来。

  • page（分页）：
    文件路径为： ./source

    直接将文章放置在资源文件根目录。

  • post（文章）
    生成文章路径为： ./source/_posts

    该目录为网页显示正文文章。

相关链接：

Hexo资源文件夹

  • 资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

  • 对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 _config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
2
3
...
post_asset_folder: true
...
    • 当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。
    • 通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。
1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
  • 比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 ![](example.jpg) ，它将不会出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

1
{% asset_img example.jpg This is an example image %}

通过这种方式，图片将会同时出现在文章和主页以及归档页中。

上述方法虽然可以显示出图片，但是不支持在Markdown编辑器中预览图片，只支持在网页中显示，所以使用第三方插件来达到Markdown和网页都能预览图片。

安装第三方插件

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

  • 不要使用这条命令来安装：npm install hexo-asset-image --save，该插件被hexo”渲染”后，生成的HTML图片引用路径有问题。

  • 以后使用hexo new {title}新建文章，会生成一个和{title}名称相同的文件夹，将图片放入该文件夹，然后使用Markdown语法：![img](./{title}/img_name.png)，图片路径为相对路径，即可在网页和Markdown编辑器中都显示图片。

Hexo主题

Hexo Live2D

  1. 安装模块
    1
    npm install --save hexo-helper-live2d
  2. 配置模块
    请向Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    debug: false
    model:
     use: live2d-widget-model-wanko  #模型文件名称
    display:
     position: right #模型位于网页中的位置
     width: 150
     height: 300
    mobile:
     show: true
    react:
     opacity: 0.7
  3. 下载模型

    使用npm install {packagename}安装以下模型:

    • live2d-widget-model-chitose
    • live2d-widget-model-epsilon2_1
    • live2d-widget-model-gf
    • live2d-widget-model-haru/01 (use npm install –save live2d-widget-model-haru)
    • live2d-widget-model-haru/02 (use npm install –save live2d-widget-model-haru)
    • live2d-widget-model-haruto
    • live2d-widget-model-hibiki
    • live2d-widget-model-hijiki
    • live2d-widget-model-izumi
    • live2d-widget-model-koharu
    • live2d-widget-model-miku
    • live2d-widget-model-ni-j
    • live2d-widget-model-nico
    • live2d-widget-model-nietzsche
    • live2d-widget-model-nipsilon
    • live2d-widget-model-nito
    • live2d-widget-model-shizuku
    • live2d-widget-model-tororo
    • live2d-widget-model-tsumiki
    • live2d-widget-model-unitychan
    • live2d-widget-model-wanko
    • live2d-widget-model-z16