前言

手把手搭建个人博客系列教程-三: 分享个人博客中文章书写的方法和技巧

参考文档:

环境与工具

  • 操作系统：Windows 10
  • VSCode编辑器

Front-matter

根据文章模板创建的文章都包含了最上方以---分割的区域，称之为Front-matter，在Front-matter部分能设置文章的一些设置和描述信息

参数配置

这里列几个常用的，全部的文章页Front-matter参数配置可查看官方教程：

参数 描述 默认值
title 标题 文章文件名
date 创建时间 文件建立时间
updated 更新日期 文件更新日期
tags 标签(不适用于分页) None
categories 分类(不适用于分页) None
comments 开启文章评论功能 true
published 文章是否发布 对于_posts下的文章为true，对_draft下的文章为false

tags和categories

tags和categories填写的内容会加入到主页的tags页面和categories页面的统计中，因此填写这两个配置项对管理文章尤为重要
注意：标签和分类感觉很像，但Hexo中这两个是不一样的，tags没有顺序性和层次性，而categories有，categories的顺序就代表了层级关系
tags和categories的定义方式：

1
2
3
4
5
6
tags:
 - 只狼：影逝二度
 - PC游戏
 - RPG
categories:
 - Game

Hexo的categories不支持同级分类，因此有必要为文章选择尽可能准确的分类
如果需要为文章添加多个分类，可以尝试下面的方式：

1
2
3
4
categories:
 - [Game, PC]
 - [Game, PlayStation]
 - [RPG]

此时文章给你包含三个分类，PC和PlayStation都是Game类的子分类，RPG是没有子分类的分类

JSON支持

除了YAML外，也可以用JSON格式编写Front-matter部分，只要将---替换为;;;即可，例：

1
2
3
4
;;;
"title": "Hello World",
"date": "2024/5/17 12:00:00"
;;;

标签插件

标签插件(Tag Plugins)和 Front-matter 中的标签不同，标签插件用于在文章中快速插入特定内容，标签插件的语法与书写文章的格式无关
注意：标签插件的写法不应该被包裹在Markdown语法中使用，例如：[]({% post_path lorem-ipsum %}) 是不被支持的

引用块blockquote

在文章中插入引言，可包含作者、来源和标题，例如：

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

被[]框选的参数为可选参数，全部省略则只以blockquote标签显示content的内容，引用块参数：

参数 描述
author 作者
link 引用链接
source_link_title 引用内容标题

例如：

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

效果：

Every interaction is both precious and an opportunity to delight.

代码块codeblock

标签包裹的代码块

在文章中插入代码，用法如下：

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

其中额外参数additional options用 option:value 的形式来指定，例如，可选的额外参数：

额外选项 描述 默认值
line_number 显示行号 true
line_threshold 只有代码行数超过该阈值才显示行号 0
hightlight 语法高亮 true
first_line 指定第一个行号 1
mark 高亮特定行，值间用,分割，-指定范围值，例如：mark:1,3-5,8表示高亮显示1,3到5,8行 None
wrap 用<table>包裹代码块 true

使用示例：

1
2
3
{% codeblock "creat a new page" lang:shell https://hexo.io/zh-cn/docs/commands "更多相关命令" %}
hexo new page example
{% endcodeblock %}

实际效果：

creat a new page更多相关命令
1
hexo new page example

反引号包裹的代码块

这是在markdown中用的更广泛的代码块形式，格式:

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

插入图片

插入图片可指定宽度高度等

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

代码引入

插入 source/downloads/code 文件夹内的代码文件，可以指定范围引入，此路径并不固定，取决于在配置文件 _config.yml中的配置项 code_dir 的值，格式：

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

此功能方便在修改代码后不用再对照修改博客文章中的代码片段
使用样例，test.js文件在source/downloads/code路径下：

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

文章摘要和截断

在文章中使用 <!-- more --> ，那么 <!-- more --> 之前的部分都将被视作文章的摘要部分，后面的部分视作正文部分，在首页将只出现文章的摘要展示，同时摘要和正文都显示在文章页，使用样例：

1
2
3
这是摘要部分
<!-- more  -->
这是正文部分

数据文件引入

有时需要在主题中重复使用某些外部数据，那就应考虑使用数据文件功能，此功能会加载 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>