Hexo进阶

本文最后更新于：2025年4月9日 下午

Hexo生成的文件夹目录结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Blog/
.
├── node_modules #Hexo第三方模块安装目录
│   ├── hexo-theme-fluid
├── public
│   ├── ...      #Hexo生成的网页文件目录
├── scaffolds    #新建文章时使用的Markdown文件模板
│   ├── draft.md #草稿模板，生成的文章位于source/_drafts
│   ├── page.md  #分页模板，生成的文章位于source
│   └── post.md  #默认文章模板，生成的文章位于source/_posts
├── source       #用于存放原始的Markdown文件
│   ├── _drafts  #存放草稿文章的目录
│   ├── _posts   #存放主要文章的目录
│   ├── about    #“关于”页面
│   ├── js       #JavaScript脚本
│   └── share    #“分享”页面
├── themes       #主题存放目录
├── _config.fluid.yml     #fluid主题配置文件
├── _config.landscape.yml #默认主题配置文件
├── _config.yml           #博客网站配置文件
├── db.json               #自动生成的数据库文件
├── package-lock.json     #第三方插件信息
└── package.json          #Hexo相关脚本与包管理信息

相关链接：_config.yml配置介绍

Hexo使用模板文件生成文章

  1. 生成文章命令：

    1
    hexo new [layout] "title"

    [layout] : draft / page / post，该参数可省略，默认为post。
    title : 文章标题

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

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

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

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

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

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

    相关链接：scaffolds使用方法

  2. 将生成的文章存放到指定路径：

    1
    hexo new [layout] --path "path/title.md" "title"

    [layout] : 使用示例模板：draft / page / post
    path/title.md : 指定文章存放路径/文章标题及后缀
    title : 文章标题

Hexo资源文件夹

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

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源，通过修改 _config.yml 文件中以下配置来开启资源文件管理功能：

1
post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹名称会与这个文章文件名保持一致。接下来将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

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

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

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

Hexo主题

Hexo-Theme-Fluid - 一款 Material Design 风格的主题

Hexo看板娘

  1. 安装模块

    1
    npm install --save hexo-helper-live2d

  2. 配置模块

    请在Blog根目录的_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. 下载看板娘模型

    使用以下命令安装模型：

    1
    npm install {packagename}

    {packagename}：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    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
Hexo
#主题 #Hexo #博客 #Live2D
Hexo进阶
https://dongxunz.github.io/2021/12/03/Hexo/Hexo进阶/
作者
dongxunz
发布于
2021年12月3日
许可协议