hexo详细使用方式
hexo24 分钟 读完 (大约 3579 个字)

hexo详细使用方式

前提是已经安装了nodejs和git

安装并初始化

安装hexo

1
2
3
4
5
6
7
8
9
10
11
12
# 本地全局安装hexo
$ npm install hexo-cli -g

# 初始化博客目录
$ hexo init blog_dir

# 进入初始化好的博客目录并安装依赖包
$ cd blog_dir
$ npm install

# 本地启动server查看效果
$ hexo server

cnpm

若npm速度慢，可以使用cnpm代替。

cnpm安装：

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpm：

1
$ cnpm install [package_name]

目录结构

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的配置信息

package.json

安装了的应用

scaffolds

模板文件夹（hexo new的时候，hexo根据scaffolds文件夹中的模板来建立文件）

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

配置

在_config.yml文件中

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。使用半角逗号 , 分隔多个关键词。
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。
url 网址 默认值
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
pretty_urls 改写 permalink 的值来美化 URL
pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html，设置为 false 时去除 true
pretty_urls.trailing_html 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) true

其他配置一般不需要改动

命令

1
2
3
4
5
6
7
8
9
# init
$ hexo init [folder]

# new post
#若没有指定layout，则默认使用_config.yml中的default_layout参数代替
$ hexo new [layout] <title>

# 如果标题包含空格，则使用引号包裹
$ hexo new "new post"
参数 描述
-p, --path 自定义新文章的路径
-r, --replace 如果存在同名文章，将其替换
-s, --slug 文章的 Slug，作为新文章的文件名和发布后的 URL

自定义文章路径：

1
$ hexo new page -p about/me "About me"

以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"

1
2
3
4
# 生成静态文件
$ hexo generate
# or
$ hexo n
选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
-b, --bail 生成过程中如果发生任何未处理的异常则抛出异常
-f, --force 强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate
-c, --concurrency 最大同时生成文件的数量，默认无限制

简写为：

1
$ hexo g
1
2
# publish发表草稿
$ hexo publish [layout] <filename>

很少使用

1
2
# server
$ hexo server
选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式

简写为：

1
$ hexo s
1
2
# deploy部署
$ hexo deploy
参数 描述
-g, --generate 部署之前预先生成静态文件

简写为：

1
$ hexo d
1
# clean清除缓存文件db.json和已经生成的静态文件public
1
2
# 列出网站资料
$ hexo list <type>
1
2
# 显示hexo版本
$ hexo version
1
2
# 安全模式
$ hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

1
2
# 调试模式
$ hexo --debug

在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。

1
2
# 显示草稿
$ hexo --draft

显示 source/_drafts 文件夹中的草稿文章。

迁移

从wordpress迁移到hexo

先安装hexo-migrator-wordpress插件

1
$ npm install hexo-migrator-wordpress --save

在 WordPress 仪表盘中导出数据(“Tools” → “Export” → “WordPress”)（详情参考WP支持页面）。

插件安装完成后，执行下列命令来迁移所有文章。source 可以是 WordPress 导出的文件路径或网址。

1
$ hexo migrate wordpress <source>

插件不完美，迁移完毕后手动审核文件。

开始写作

1
2
# 创建新文章或者新页面
$ hexo new [layout] <title>

layout默认为post

布局layout

post路径：source/_posts

page路径：source

draft路径：source/_drafts

将Front-Matter中的layout: false，可以使得文章不被处理

draft草稿(一般用不到)

draft布局被创建的时候在source/_drafts中

使用publish命令后，草稿将被移动到source/_posts 文件夹

1
$ hexo publish [layout] <title>

模版（Scaffold）

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

1
$ hexo new photo "my photo"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量 描述
layout 布局
title 标题
date 文件建立日期

Front-matter

Front-matter格式：

1
2
3
4
---
title: Hello World
date: 2012/4/5 12:32:54
---

参数：

参数 描述 默认值
layout 布局
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

categories/tags

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

1
2
3
4
5
categories:
- css
tags:
- float
- position

将一个文章加入一个多层级分类（前端 - css）：

1
2
3
4
5
---
categories:
- 前端
- css
---

将一个文章加入多个分类（前端,css,布局）：

1
2
3
4
5
6
---
categories:
- [前端]
- [css]
- [布局]
---

将一个文章加入多个深层分类（前端 - css,前端 - 布局,技术）：

1
2
3
4
5
6
---
categories:
- [前端,css]
- [前端,布局]
- [技术]
---

组合自己所需的front-matter参数,形成post模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: article_title
date: 2018-07-08 16:11:13
updated:
toc: true
categories:
 - [前端,html]
 - [前端,css]
tags:
 - css
 - 前端
thumbnail:
permalink:
comments:
---
summary paragraph.
<!-- more -->
main paragraph.(this paragraph cannot be seen)

写完front-matter后，写一段summary，紧接着加一行<!-- more -->用来隐藏正文。

标签插件

标签插件是用于在文章中快速插入特定内容的插件。

引用块（在文章中插入引言，可以包含作者，来源，标题）：

1
2
3
{% blockquote [author[,source]] [link] [source_link_title] %}
content
{% endblockquote %}

示例1：纯粹引用内容，没有作者信息

1
2
3
{% blockquote %}
content
{& endblockquote &}

示例2: 引用内容并给出作者和书名

1
2
3
{% blockquote David Levithan,Wide Awake %}
nothing but just example.
{% endblockquote %}

示例3:引用twitter

1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
content
{% endblockquote %}

示例4: 引用网络内容

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
content
{% endblockquote %}

代码块

hexo提供的插入代码块的语法：

1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

Specify additional options in option:value format, e.g. line_number:false first_line:5.

Extra Options Description Default
line_number Show line number true
highlight Enable code highlighting true
first_line Specify the first line number 1
mark Line highlight specific line(s), each value separated by a comma. Specify number range using a dash Example: mark:1,4-7,10 will mark line 1, 4 to 7 and 10.
wrap Wrap the code block in `` true

示例（codeblock仅能在hexo渲染器中看到效果，markdown没效果）

codeblock代码段：

[grid布局] [lang: css]
1
2
3
4
5
6
7

.container {

​	display: grid;

}

渲染结果，貌似hexo不能高亮代码

markdown代码段：

1
2
3
.container {
	display: grid;
}

可以高亮代码

示例：普通代码块

代码：

1
2
3
{% codeblock %}
alert('done!');
{% endcodeblock %}

效果（仅可在hexo渲染器中查看效果）：

1
2
3

alert('done!');

示例：指定语言

代码：

1
2
3
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

效果：

1
[rectangle setX: 10 y: 10 width: 20 height: 20];

示例：附加说明

代码：

1
2
3
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

效果：

Array.map
1
2
3

array.map(callback[, thisArg])

反引号代码块

代码：

1
​```[language] [title] [url] [link text] this is code snippet
1
2
3
4

效果：

```[language] [title] [url] [link text] this is code snippet

markdown代码块

代码：

1
2
3
​```css
code snippet
​
1
2
3
4
5
6
7

效果：

```css
.div {
  background-color: blue;
}

markdown小段代码

代码；

1
`code snippet`

效果：

code snippet

插入pull quote

代码：

1
2
3
{% pullquote [class] %}
content
{% endpullquote %}

效果：

content

插入jsFiddle

代码：

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

效果：

插入gist

代码：

1
{% gist gist_id [filename] %}

效果：

插入iframe

代码：

1
{% iframe url [width] [height] %}

效果：

插入图片

代码：

1
{% img [class names] /path [width] [height] '"title text" "alt text"' %}

效果：

title text

插入链接

代码：

1
{% link text url [external] [title] %}

效果：

百度

插入include code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

代码：

1
{% include_code [title] [lang:language] [from:line] [to:line] path/file %}

示例：

嵌入 test.js 文件全文

1
{% include_code lang:javascript test.js %}

只嵌入第 3 行

1
{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

1
{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

1
{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

1
{% include_code lang:javascript to:8 test.js %}

插入youtube视频

代码：

1
{% youtube video_id %}

效果（需科学上网环境）：

插入vimeo视频

代码：

1
{% vimeo video_id %}

引用文章链接

1
2
{% post_path filename %}
{% post_link filename [title] [escape] %}

详细使用方法查看hexo文档

引用资源

1
2
3
{% asset_path filename %}
{% asset_img filename [title] %}
{% asset_link filename [title] [escape] %}

raw

如果您想在文章中插入 Swig 标签，可以尝试使用 Raw 标签，以免发生解析异常。

1
2
3
{% raw %}
content
{% endraw %}

文章摘要

代码：

1
<!-- more -->

摘要可能会被 Front Matter 中的 excerpt 覆盖。

资源文件夹

asset代表source文件夹中除了文章之外的所有文件：图片,css,js文件etc

简单引用图片的方法：如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

代码：

绝对路径：

1
2
3
4
![test image size](/images/1.jpg)
![test image size](/images/1.jpg){:class="img-responsive"}
![test image size](/images/1.jpg){:height="50%" width="50%"}
![test image size](/images/1.jpg){:height="100px" width="400px"}

效果：在编辑时没有效果，hexo中有效果

test

相对路径：

1
![test image size](../images/1.jpg)

效果：在编辑时有效果，hexo中有效果

assets文件夹

config.yml文件中的post_asset_folder选项设置为true，则每次new新文章会自动生成一个同名文件夹用来存储资源文件。再通过相对路径引用。

###相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。

hexo中引用方式：

1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

示例

代码：

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

效果：

数据文件(一般用不到)

在主题中使用一些不在文章内部的资料，并且要复用这些资料，使用数据文件功能。

此功能会载入 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>
<% } %>

渲染结果如下 :

1
2
3
<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

服务器

hexo将server独立成一个单独的模块

安装

1
$ npm install hexo-server --save

启动服务器

运行期间会见空文件变动，自动更新

1
2
3
$ hexo server
# or
$ hexo s

修改端口

端口默认4000，若被占用，可以修改端口号

1
$ hexo server -p 5000

静默模式

服务器之处理public文件夹内文件，不处理文件变动。

此时需要hexo g更新文件变动。

静默模式通常用于生产环境下。

1
$ hexo server -s

自定义ip

服务器默认运行在0.0.0.0。

自定义ip：

1
$ hexo server -i 192.168.1.1

pow(用不到)

pow时macos上面的rack服务器，可以作为建议静态文件服务器使用。

安装

1
$ curl get.pow.cx | sh

设置

在~/.pow文件夹建立链接(symlink)

1
2
$ cd ~/.pow
$ ln -s /path/to/myapp

网站就将在http://myapp.dev下运行。

生成器

一次生成

1
2
3
$ hexo generate
# or
$ hexo g

持续监控

监控文件SHA1 checksum变动并生成新静态文件

1
2
3
$ hexo generate --watch
# or
$ hexo g -w

部署

1
2
3
4
5
$ hexo generate --deploy
$hexo g -d
# or
$ hexo deploy --generate
$ hexo d -g

以上两条命令可以分别简写为：

1
2
3
$ hexo g -d
# or
$ hexo d -g

我的简写方法：

1
$ hexo g && hexo d

模版

模板 用途 回退
index 首页
post 文章 index
page 分页 index
archive 归档 index
category 分类归档 archive
tag 标签归档 archive

icarus主题参数

banner大小：566px*242px

参考

1.hexo中文文档

2.淘宝cnpm

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×