2024-08-13-Hexo的瓶瓶罐罐

alt text

Hexo

1. 基础介绍

1.1 目录介绍

1
2
3
4
5
6
7
8
9
10
├── _config.fluid.yml
├── _config.yml
├── db.json
├── node_modules
├── packag$$e-lock.json
├── package.json
├── public
├── scaffolds
├── source
└── themes
  1. _config.fluid.yml: 这是一个配置文件，用于配置Hexo的插件、主题等。
  2. _config.yml: 这是一个配置文件，用于配置Hexo的插件、主题等。
  3. db.json: 这是一个数据库文件，用于存储Hexo的博客数据。
  4. package.json: 这是一个配置文件，存储应用程序的信息。 EJS, Stylus 和 Markdown 渲染引擎 已默认安装，您可以自由移除。 如果您想，可以稍后卸载它们。
  5. scaffolds: 模版 文件夹。 当您新建文章时，Hexo 会根据 scaffold 来创建文件。
  6. source: 资源文件夹。 是存放用户资源的地方。 除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去
  7. themes: 主题文件夹。 Hexo 会根据主题来生成静态页面。

1.2 配置文件

您可以在_config.yml中修改大部分的配置。

1.3 资源文件夹

1.3.1 全局资源文件夹

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

1.3.2 文章资源文件夹

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

1
post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过hexo new [layout] <title>命令创建新文章时自动创建一个文件夹。 这个资源文件夹将会有与这个文章文件一样的名字。 将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。
使用vscode时，为了适配hexo，需要做一些小的配置 参考与vscode的集成

1.3.3 使用 Markdown 嵌入图片

hexo-renderer-marked3.1.0引入了一个新的选项，其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片
如需启用: 

1
2
3
4
5
_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后，资源图片将会被自动解析为其对应文章的路径。 例如：image.jpg位置为/2020/01/02/foo/image.jpg，这表示它是/2020/01/02/foo/文章的一张资源图片，![](image.jpg)将会被解析为<img src="/2020/01/02/foo/image.jpg">

1.4 数据文件夹

有时，您可能需要在模板中使用一些无法直接在帖子中使用的数据，或者您想在其他地方重复使用这些数据。 对于这种情况，Hexo 3 引入了新的数据文件。 此功能会加载source/_data内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

举例来说，在source/_data文件夹中新建menu.yml文件：

1
2
3
Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些数据：

1
2
3
<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

render like this :

1
2
3
4
这个代码片段使用了 HTML 标签来创建三个超链接。
<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

1.5 Front-matter

Front-matter 是文件开头的 YAML 或 JSON 代码块，用于配置写作设置。 以 YAML 格式书写时，Front-matter 以三个破折号结束；以 JSON 格式书写时，Front-matter 以三个分号结束。

YAML

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

JSON

1
2
3
"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

设置 & 默认值

1
2
3
4
5
6
7
8
9
10
11
12
layout: 布局	config.default_layout
title: 标题	文章的文件名
date: 建立日期	文件建立日期
updated: 更新日期	文件更新日期
comments: 开启文章的评论功能	true
tags: 标签（不适用于分页）	
categories: 分类（不适用于分页）	
permalink: 覆盖文章的永久链接. 永久链接应该以 / 或 .html 结尾	null
excerpt: 纯文本的页面摘要。 使用 该插件 来格式化文本	
disableNunjucks: 启用时禁用 Nunjucks 标签 {{ }}/{% %} 和 标签插件 的渲染功能	false
lang: 设置语言以覆盖 自动检测	继承自 _config.yml
published: 文章是否发布	对于 _posts 下的文章为 true，对于 _draft 下的文章为 false

2. 常用功能

2.1 写作

你可以执行下列命令来创建一篇新文章或者新的页面。

1
hexo new [layout] <title>

post是默认的布局，但你也可以提供自己的布局。 您可以通过编辑_config.yml中的default_layout设置来更改默认布局。

2.1.1 布局（Layout）

Hexo 有三种默认布局：post、page 和 draft。通过主题创建的文件保存在不同路径。新创建的文章(posts)会被保存到source/_posts文件夹中。

2.1.2 草稿

draft布局用于保存草稿， Drafts 是未发布的文章， Drafts 会被保存到source/_drafts文件夹中。可以用publish命令发布草稿到_posts文件夹中。publish类似于hexo new命令，但会自动将草稿移动到_posts文件夹中。

1
hexo publish [layout] <title>

2.1.3 Scaffold

在新建文章时，Hexo 会根据scaffolds文件夹内相对应的文件来建立文件。 例如

1
hexo new tech "My Gallery"

在执行这行指令时，Hexo 会尝试在scaffolds 文件夹中寻找tech.md，并根据其内容建立文章。

2.2 与Vscode的集成

使用Vscode时，可直接编辑 markdown文件。为了适配hexo，需要做一些小的配置

  1. 图片引用：在vscode设置中搜索markdown找到Copy Files的Distination,

item设置为*.md, value设置为../img/${documentBaseName}/${fileName}

如有更多vscode配置参考glob-patterns

2.3 自定义命令

2.3.1 Hexo 的插件机制

Hexo 本质上是一个基于 Node.js 的静态网站生成器，它的插件机制是围绕 JavaScript 构建的。通过 JavaScript 编写的插件，可以无缝集成到 Hexo 中，利用 Hexo 提供的 API 和功能。这使得插件可以直接与 Hexo 的内部机制交互。

  • 访问 Hexo 的配置和上下文：可以轻松访问 Hexo 的配置文件、路径、内容处理器等。
  • 利用 Hexo 的 API：如文件生成、路径解析、内容渲染等 API，这些 API 是通过 JavaScript 暴露的。
  • 跨平台支持：JavaScript 是跨平台的，Hexo 本身就是用 JavaScript 编写的，因此使用 JavaScript 使插件更容易在各种操作系统上运行。

2.3.2 创建一个自定义命令 hexo nnn

  1. 引入依赖
    在项目根目录下，修改package.json文件，添加以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    {
        "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "nnn": "hexo nnn" // 新增内容
      },

      "dependencies": {
        "aplayer": "^1.10.1",
        "hexo": "^6.3.0",
        "inquirer": "^8.0.0", // 新增内容
        "moment": "^2.29.1" // 新增内容
      }
    }

    引入后执行npm install命令安装依赖

    可通npm config set registry https://mirror.cloud.huawei.com/npm/registry添加华为云npm镜像
    通过npm config get registry查看当前镜像源

  2. 创建插件文件
    在你的 Hexo 项目根目录下，创建一个名为scripts的文件夹（如果它不存在的话），然后在scripts文件夹中创建一个新的JavaScript 文件，nnn.js

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
const inquirer = require('inquirer');
const moment = require('moment');
const fs = require('fs');
const path = require('path');
// const hexo = require('hexo'); // node_modules/hexo/lib/hexo/index.js:303:18已经声明

hexo.extend.console.register('nnn', 'Generate a new post with layout selection', async function(args) {
  const scaffoldsDir = path.join(hexo.base_dir, 'scaffolds');
  const scaffolds = fs.readdirSync(scaffoldsDir)
                      .filter(file => file.endsWith('.md'))
                      .map(file => file.replace('.md', ''));
  const defaultLayout = 'tech'; // 默认模板为 tech.md
  const questions = [
    {
      type: 'list',
      name: 'layout',
      message: 'Choose a layout:',
      choices: scaffolds,
      default: defaultLayout // 设置默认选项
    },
    {
      type: 'input',
      name: 'title',
      message: 'Enter the post title:'
    }
  ];

  const answers = await inquirer.prompt(questions);

  const date = moment().format('YYYY-MM-DD');
  const dayOfWeek = moment().format('ddd'); // 获取星期几的缩写（如 Mon, Tue, Wed）
  let title = answers.title.trim();
  // 获取模板文件名的首字母并转换为大写
  const initial = answers.layout.charAt(0).toUpperCase();

  if (title === '') {
    console.log('Title cannot be empty!');
    return;
  }
  title = `${date}-${dayOfWeek}-${initial}-${title}`;
  const slug = `${title.replace(/\s+/g, '')}.md`;


  const targetPath = path.join(hexo.source_dir, '_posts', slug);
  
  // 使用指定的布局创建文章内容

  const scaffoldPath = path.join(scaffoldsDir, `${answers.layout}.md`);
  let content = fs.readFileSync(scaffoldPath, 'utf-8');
  
  // 替换内容中的默认占位符
  content = content.replace(/title:\s*.+/, `title: ${title}`);
  content = content.replace(/date:\s*.+/, `date: ${moment().format('YYYY-MM-DD HH:mm:ss')}`);

  // 写入目标文件
  fs.writeFileSync(targetPath, content);
  
  console.log(`Post generated at: ${targetPath}`);
});


配置hexo generate前置操作, 在生成public内容前，完成图片资源路径的替换。以达到本地markdown编辑器预览和Hexo博客上图片均可以显示。

1
2
3
4
5
6
7
8
9
10


hexo.extend.filter.register('before_post_render', function(data) {
    // 使用正则表达式查找并替换所有布局类型的图片路径
    
    data.content = data.content.replace(/!\[([^\]]*)\]\(([0-9]{4}-[0-9]{2}-[0-9]{2}-[a-zA-Z]{3}-[A-Z]{1}-[\u4E00-\u9FA5A-Za-z0-9_]+)(\/)([^)]+\))/g, '![$1]($4)'); //正则表达式还得多学啊！！！！！
     
    return data;
  });

要是Hexo生效，还需修改配置文件_config.yml，添加以下内容：

1
2
3
4
5
post_asset_folder: true # 启用文章资源文件夹
marked:
  prependRoot: true
  postAsset: true

  1. 运行命令
    在命令行中，输入hexo nnn，即可生成一个新的文章，并在生成过程中让用户选择布局和输入文章标题。

    tips: layout可在/scaffolds目录下增加

Tech
#Tech
2024-08-13-Hexo的瓶瓶罐罐
http://example.com/2024/08/13/2024-08-13-Wed-T-Hexo的瓶瓶罐罐/
Author
Fei
Posted on
August 13, 2024
Licensed under