Hexo

hexo node npm git gitee github
07-Programming-Assistant
发布日期:   2022-09-17
更新日期:   2023-12-30
文章字数:   1.3k
阅读时长:   5 分
阅读次数:  

Hexo | Github 自定义博客生成工具

hexo安装

$ npm install hexo-cli -g
$ npm install yarn -g
$ hexo init B612-Factory
$ hexo server
$ hexo generate
$ hexo deploy

hexo 使用

创建文章

$ hexo new [layout] <title> [-p <directory>/<filename>]
  • 您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项 默认值 描述
layout config.default_layout 布局
title 文章的文件名 标题
date 文件建立日期 建立日期
updated 文件更新日期 更新日期
tags - 标签（不适用于分页）；没有顺序和层次
categories - 分类（不适用于分页）；具有顺序性和层次性

示例

---
title: Hexo Front-matter
date: 2022-10-13 15:00:00
categories:
  - [ 分类1, 分类1-1 ]
  - [ 分类1, 分类1-2 ]
  - [ 分类2 ]
tags:
  - 标签1
  - 标签2
---

摘要补充

  • Front-matter summary|excerpt
  • 文章需要截断的地方增加 <!--more-->，首页就会显示这条指令以上的所有内容，隐藏接下来的所有内容

Hexo 将文件内容作为代码片段插入到博客中

/* global hexo */

'use strict';

const fs = require('fs');

const fileCode = async (data) => {
    let content = data.content
    const regExp = /\[@fileCode]\((.*)\)/g;
    let match = null;
    const matches = [];
    while ((match = regExp.exec(content)) !== null) {
        matches.push(match)
    }
    const readFiles = matches.map(item => {
        const file = item[1];
        const splits = file.split('.');
        const fileType = splits.length > 1 ? splits[splits.length - 1] : '';

        let path = 'source/' + data.source;
        path = path.replace('.md', '/' + file)
        let fileContent = path
        return new Promise((resolve, reject) => {
            fs.readFile(path, (err, data) => {
                if (err) {
                    console.error('读取文件错误', path);
                    resolve(path);
                } else {
                    fileContent = data.toString();
                    const res = '```' + fileType + '\n' + fileContent + '\n```\n';
                    content = content.replaceAll(item[0], res)
                    resolve(content);
                }
            });
        })
    });

    await Promise.all(readFiles);
    data.content = content

    return data
}

// https://hexo.io/zh-cn/api/filter
// https://www.jianshu.com/p/c8964c5ffd7a
hexo.extend.filter.register('before_post_render', async function (data) {
    const {config: themeCfg} = this.theme;
    if (themeCfg.fileCode.enable && data.fileCode) {
        return await fileCode(data);
    } else {
        return undefined;
    }
}, 1);

更多配置

主题切换 theme

  • 在样式文件夹中下载合适的主题
$ cd ./B612-Factory/themes
$ git clone https://github.com/WANGJUEYA/hexo-theme-christmas-tree.git christmas-tree
  • 修改hexo根目录 _config.yml 中 theme 对应配置 配置必填项见主题说明
theme: christmas-tree

  • 可在hexo 主题仓库 挑选心仪的主题样式替换

    • christmas-tree ☞ https://github.com/WANGJUEYA/hexo-theme-christmas-tree.git
    • matery ☞ https://github.com/blinkfox/hexo-theme-matery.git
    • fluid ☞ https://github.com/fluid-dev/hexo-theme-fluid.git
    • tree ☞ https://github.com/wujun234/hexo-theme-tree.git
    • Theme Yuzu ☞ https://github.com/Cerallin/hexo-theme-yuzu.git

图片存储 post_asset_folder

  • 使用绝对路径

    • md相关URL资源引用

  • 使用相对路径

    • 修改hexo根目录 _config.yml 中 theme 对应配置 配置必填项见主题说明
    post_asset_folder: true # 修改之后会开启 Hexo 的文章资源文件管理功能
    • 开启资源管理后, Hexo 将会在我们每一次通过 hexo new <title> 命令创建新文章时自动创建一个同名文件夹, ![name](./example.jpg) 即可访问(该方法仅支持生成文档路径为一级,
      相对路径需要手动书写)

  • 使用 markdown 和 hexo 均支持的相对路径

安装插件

$ yarn add hexo-asset-img

![image file label]（markdown-file-name/local-image.png） -> {% asset_img label local-image.png %}

自动将目录生成分类

$ yarn add hexo-auto-category
# hexo-auto-category
auto_category:
  enable: true
  depth:

git发布

  • 生成并配置ssh

    • 配置全局配置
    $ git config --global user.name "GitHub用户名"
$ git config --global user.email "GitHub绑定邮箱"
    • 输入命令, 一直回车生成文件
    $ ssh-keygen -m PEM -t rsa -b 4096 -C "{注册邮箱地址}"
    • 打开 C:\Users\用户名\.ssh\id_rsa.pub, 复制内容
    • 在gitee及github设置中新增ssh

  • 安装部署所需要的插件

yarn add hexo-deployer-git
  • 修改hexo根目录 _config.yml 对应发布配置
deploy:
  type: git
  repository:
    github: git@github.com:用户名/用户名.github.io.git
    gitee: git@gitee.com:用户名/用户名.git
  branch: master
  • 点击发布即可 (gitee需要在Gitee Pages 服务手动更新)

自定义插件

其他插件介绍

流程图

{% mermaid %}
[内容]
{% endmermaid %}
graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car] 
{% mermaid %}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
{% endmermaid %}

脑图 hexo-markmap

公式

https://wangjueya.github.io/markdown/#公式渲染mathjax

快捷启动可用项目

需要环境 git npm

$ git clone git@github.com:WANGJUEYA/B612-Factory.git --recursive
$ cd B612-Factory
$ npm install
$ npm run server
  • 如果本地ssh密钥不为空会有 Permission denied报错, 使用 git-bash 客户端
  • 用自己的markdown文件替换 ./source/_posts 下所有文件

参考链接

文章作者: 艾茜茜
文章链接: http://wangjueya.github.io/hexo/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 艾茜茜 !
hexo node npm git gitee github
赏
  目录