使用 Hexo 写作
安装与新建
安装 Hexo。
npm install -g hexo-cli
安装完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
hexo init <folder>
cd <folder>
npm install
初始化后,项目文件夹将如下所示:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
配置
写作
创建新页面
执行下列命令来创建一篇新文章或者新的页面。
hexo new [layout] <title>
Front-matter
Front-matter 是 YAML 格式,它位于文章的开头,用 --- 包围。
---
title: 使用 Hexo 写作
date: 2021-02-21 21:12:56
tags: Hexo
---
设置 & 默认值:
| 设置 | 描述 | 默认值 |
|---|---|---|
| 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 |
标签插件
引用块
在文章中插入引言,可包含作者、来源和标题。
别名: quote
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
例如:
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}
显示效果:
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
文章摘要和截断
在文章中使用 <!– more –>,那么 <!– more –> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。
代码块
可以将代码片段添加到您的帖子的有用功能。
别名: code
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}
以 option:value 的格式指定额外选项,例如:line_number:false first_line:5。
| 额外选项 | 描述 | 默认值 |
|---|---|---|
| line_number | 显示行号 | true |
| line_threshold | 只有代码块的行数超过该阈值,才显示行数 | 0 |
| highlight | 启用代码高亮 | true |
| first_line | 指定第一个行号 | 1 |
| mark | 突出显示特定的行,每个值用逗号分隔。 使用破折号指定数字范围例如:mark:1,4-7,10 将标记第 1、4 至 7 和 10 行 |
|
| wrap | 用 <table> 包裹代码块 | true |
普通的代码块:
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
alert('Hello World!');
指定语言:
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
附加说明和网址:
{% codeblock lang:js Array.map https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - JavaScript | MDN %}
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
{% endcodeblock %}
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x \* 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
反引号代码块
另一种形式的代码块,不同的是它使用三个反引号来包裹。
``` [language] [title] [url] [link text] code snippet ```
iframe
在文章中插入 iframe。
{% iframe url [width] [height] %}
链接
在文章中插入链接,并自动给外部链接添加 target="_blank" 属性。
{% link text url [external] [title] %}
资源的引用
资源(Asset)代表
source文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的 Hexo 项目中只有少量图片,那最简单的方法就是将它们放在source/images文件夹中。然后通过类似于的方法访问它们。
将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开,这样 Hexo 将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个与文章同名的文件夹,当然也可以手动创建。
_config.ymlpost_asset_folder: true
通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。使用以下 Hexo 标签来加载资源:
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
例如:{% asset_img Pikachu.jpg Pikachu %}
部署
- 安装 hexo-deployer-git
- 在
_config.yml中添加以下配置(如果配置已经存在,请将其替换为如下):deploy: type: git repo: https://github.com/<username>/<project> # example, https://github.com/hexojs/hexojs.github.io branch: gh-pages - 执行
hexo clean && hexo deploy