hexo博客的基本操作指南

使用技巧 3-hexo

发布时间 : 2023-07-22 13:22

字数:1.7k 阅读 :

1. 前言

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。即把用户的markdown文件，按照指定的主题解析成静态网页。

2. 安装hexo

安装hexo

$ npm install -g hexo-cli

查看当前hexo极其各种插件版本

$ hexo -v

3. 建站

安装完Hexo之后，执行下列命令，Hexo将会在指定目录中新建所需要的文件，指定的目录即为Hexo的工作站

$ hexo init <blogfile>
$ cd <blogfile>
$ npm install

新建完成之后，指定目录中的情况如下

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

3.1. _config.yml

网站的配置信息，您可以在此配置大部分的参数。配置参数讲解

3.2. package.json

应用程序的信息，以及需要安装的模块信息。

3.3. scaffolds

模版文件夹。新建文章时，Hexo 会根据 scaffold 中的模板文件来建立新的文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。也就是说，通过hexo命令每新建一个文章，都会包含指定模板文件中的内容。

官网模板详述

3.4. source

资源文件夹是存放用户资源的地方，如markdown文章。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

注意：除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。

3.5. themes

主题文件夹，Hexo 会根据主题来解析source目录中的markdown文件生成静态页面。官网主题详述

3.6 使用3-hexo主题

关于主题：

极简体验
三段式设计
通过文章分类、标签或标题关键字检索
移动端适配
评论
多作者模式
全文快捷键

安装

$ git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo

修改hexo根目录的_config.yml，如下

theme: 3-hexo

4. 写作

可以执行下列命令来创建一篇新文章。

$ hexo new [layout] <titleName>

若是3-hexo主题则没有4.1与4.2配置项

$ hexo new <titleName>

可以在命令中指定文章的布局（layout），不指定默认为 post，也可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。创建的新文章会自动加上指定布局对应的模板文件中的内容。

4.1. 布局（Layout）

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局路径postsource/_postspagesourcedraftsource/_drafts

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

4.2. 模版（Scaffold）

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

$ hexo new photo "My Gallery"

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

layout布局
title标题
date文件建立日期

4.3. Front-matter

Front-matter是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: hello world  //标题：注意窍门，hexo new的是你网页打开的链接显示，title可以改成中文
top: //置顶排序，数字越大越靠前
categories: //分类
tags: //标签
date: 20xx-xx-xx 22:21:54
---

注意：一般Front-matter使用的yaml语法，yaml语法需要注意空格，如title: Hello World冒号需要有一个空格。

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数描述:

title：标题
date：笔记创建日期
tags：标签
categories：分类
top：文章排序

分类和标签

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

categories:
- 后端
tags:
- java
- SpringCloud

WordPress支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是Hexo不支持指定多个同级分类。

下面的指定方法： categories:

后端
微服务

会使分类微服务成为后端的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类.

4.5. 资源引用

引用图片等资源：

有以下两种方式进行解决：

使用绝对路径引用资源，在 Web 世界中就是资源的 URL
使用相对路径引用资源

具体用法这里不再赘述，参考我另一篇文章Post not found: hexo发布的图片路径与编写文档时不一致问题

引用站内文章

post_link

在写文章的过程中，有时候需要引用站内的其他文章。可以通过内置的标签插件的语法 post_link来实现引用。

这里默认的路径是在 _post 路径下，如果不是默认路径，需要写上相对路径。

语法

{% post_link '文章文件名(不要后缀)' '文章标题(可选)' %}

链接使用文章的标题

{% post_link 'hexo博客的基本操作指南' %}

链接使用自定义文字

{% post_link 'hexo博客的基本操作指南' '操作指南' %}

post_path
用来获取文章的链接字符串，不是链接！
可以用markdown语法直接插入文件链接，也很方便

{% post_path filename %}

5. 网站发布

首先执行下列命令生成相应的静态网页，生成的静态网页以及相关资源都会在public目录下

$ hexo generate

5.1. 用hexo-server

hexo-server模块的主要命令如下，输入以下命令以启动服务器，您的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。

5.2. 部署到Git上

参考我这篇文章git仓库的使用

6. 其他基础命令

6.1. 清除缓存文件

为了避免不必要的错误，在生成静态文件前，强烈建议先运行以下命令：

$ hexo clean

上述命令会清除本地站点文件夹下的缓存文件（db.json）和已有的静态文件（public）。

6.2. 推送到远程

当成功使用git在服务器建立钩子后可以实现自动化部署，使用以下命令进行推送：

$ hexo deploy

欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com