自娱自乐，我的博客（四）——Hexo文章管理

前言：
阅读这篇文章我能学到什么？
  通过Hexo搭建一个博客网站并不算难，网站搭建好后如何规范的管理我们的文章，如何维护它们也是一个问题。

1 资源文件和文章的存储位置

  为了对文章进行分类管理，我们可以在Hexo根目录的source/_posts文件夹下手动创建文件夹将md文件放在文件夹里，但是对应的资源文件比如图片全部放在source/images文件夹下显得过于杂乱，最好是对应上md文件。为了实现分类管理需要修改_config.yml文件的配置。

1
post_asset_folder: true

  配置之后可以在Hexo根目录通过执行指令

1
hexo new post title

  之后会自动在source/_posts目录下创建一个title文件夹，该文件夹内有title.md文件和title文件夹，其中同名文件夹是用来存储图片了。
  为了不理会图片文件的路径，在md内可以通过如下语句导入图片而不使用md的语法。

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

  该语法指明了图片名称以及鼠标悬停时的描述信息。不过这种方法有个缺点，在markdown编辑器中无法预览图片。
  Hexo默认是将md文件生成的网页按日期分类的，我们也可以修改它。

1
permalink: /docs/:title/

  这样所有的md转换出的网页文件都将放在docs目录下，并且按标题分类。

2 兼容Markdown编辑器和网页预览的图片插入方式

  使用Hexo比较头疼的一点是在md文件中以Markdown语法 {% asset_img Picture Picture.png "Picture" %} 插入图片，到了网页版就无法预览，或者反过来使用Hexo能解析的标签 {% asset_img example.jpg This is an example image %} 但在Markdown编辑器中就无法正常预览。对此我找到了一个能解决这个问题的插件，它会自动转化路径，这样对于我们来说正常写Markdown语法就行了。
  在博客根目录执行指令安装插件cnzsb/hexo-asset。

1
npm install hexo-asset --save

  另外，请确保_config.yml文件的配置如下。

1
post_asset_folder: true

  之后md中正常使用Markdown语法插入图片，最终的网页也会正常显示图片，比如。

1

# 
自娱自乐，我的博客（四）——Hexo文章管理


*前言：*
*阅读这篇文章我能学到什么？*
  *通过Hexo搭建一个博客网站并不算难，网站搭建好后如何规范的管理我们的文章，如何维护它们也是一个问题。*

## 1 资源文件和文章的存储位置
  为了对文章进行分类管理，我们可以在Hexo根目录的source/_posts文件夹下手动创建文件夹将md文件放在文件夹里，但是对应的资源文件比如图片全部放在source/images文件夹下显得过于杂乱，最好是对应上md文件。为了实现分类管理需要修改_config.yml文件的配置。


1
post_asset_folder: true



  配置之后可以在Hexo根目录通过执行指令


1
hexo new post title



  之后会自动在source/_posts目录下创建一个title文件夹，该文件夹内有title.md文件和title文件夹，其中同名文件夹是用来存储图片了。
  为了不理会图片文件的路径，在md内可以通过如下语句导入图片而不使用md的语法。


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



  该语法指明了图片名称以及鼠标悬停时的描述信息。不过这种方法有个缺点，在markdown编辑器中无法预览图片。
  Hexo默认是将md文件生成的网页按日期分类的，我们也可以修改它。


1
permalink: /docs/:title/



  这样所有的md转换出的网页文件都将放在docs目录下，并且按标题分类。


2 兼容Markdown编辑器和网页预览的图片插入方式
  使用Hexo比较头疼的一点是在md文件中以Markdown语法 ![Picture](./title/Picture.png "Picture") 插入图片，到了网页版就无法预览，或者反过来使用Hexo能解析的标签 {% asset_img example.jpg This is an example image %} 但在Markdown编辑器中就无法正常预览。对此我找到了一个能解决这个问题的插件，它会自动转化路径，这样对于我们来说正常写Markdown语法就行了。
  在博客根目录执行指令安装插件cnzsb/hexo-asset。


1
npm install hexo-asset --save



  另外，请确保_config.yml文件的配置如下。


1
post_asset_folder: true



  之后md中正常使用Markdown语法插入图片，最终的网页也会正常显示图片，比如。


1
![Picture](./title/Picture.png "Picture")



  需要在你的*.md文件所在目录创建一个同名的文件夹，该文件夹里放入图片。上面路径中的 title 即为*.md文件名，一般也是文章的标题。还有一种办法就是使用图床，网页通过在线加载形式就能兼容本地和网页同时可见。
  注意：cnzsb/hexo-asset这款插件还不太成熟，目前存在一个Bug(2020.08.25)。当markdown语法找不到路径下的图片时（不管图床图片还是Hexo图片），会导致图片之前的内容被重现加载，使得网页内容多次重复显示。所以请谨慎使用，不用时请卸载。


Front-matter
  我们写的文章需要放在Hexo根目录下的source/_posts目录下，可根据专题分类创建文件夹分类放，但是如何在网页上实现文章分类并给文章打上标签呢。这时候需要用到 Front-matter 配置。它是放在md文件开头能被Hexo解析识别的一种语法，写在 --- 之间，常用参数有如下几种。






参数
默认值
描述





layout
-
布局




title
文件名
标题




date
文件创建时间
创建时间




updated
文件更新日期
更新时间




comments
true
开启文章的评论功能




tags
-
标签（不适用于分页）




categories
-
分类（不适用于分页）




permalink
-
覆盖文章地址





  Front-matter在浏览文章时不会显示。
  在我们对文章分类前，还需要为网站创建一个标签页page和分类页page。在Hexo根目录下执行指令进行创建。


1
hexo new page tags



1
hexo new page categories



  执行指令后Hexo会帮我们在source目录下创建相应的文件夹和文件。我们对文件Front-matter进行修改。打开source/tags/index.md文件进行如下修改。


1
2
3
4
5
---
title: tags
date: 2020-08-09 13:06:54
type: tags
---



  打开source/categories/index.md文件进行如下修改。


1
2
3
4
5
---
title: categories
date: 2020-08-09 13:07:15
type: categories
---



  如果我们要给一篇文章指定分类和标签，只需要在md文件开头的Front-matter中如下这样写。


1
2
3
4
5
6
7
8
---
title: 文章一
date: 2020-08-02 19:52:44
categories:
    - 专题一
tags:
    - 文章一
---



  Hexo将会自动对属于同一categories的文章进行归类，并且可按tags进行分类和查找文章。我们可以为一篇文章添加多个tags，可添将一篇文章添加到多个categories里。


1
2
3
4
5
6
7
8
9
10
---
title: 文章
date: 2020-08-02 19:52:44
categories:
    - 分类一
    - 分类二
tags:
    - 标签一
    - 标签二
---



  如果这样写那么这篇文章将会包含两个标签，同时属于 分类一 和 分类二 两个分类下，并且 分类二 为 分类一 下的一个子分类。子分类还可以用这样写。


1
2
3
4
5
6
7
8
9
---
title: 文章
date: 2020-08-02 19:52:44
categories:
    - [分类一, 分类二]
tags:
    - 标签一
    - 标签二
---



  作用与上一中完全相同，表明了文章同属于两个分类，且 分类二 是 分类一 的子分类。更推荐用list的形式写子分类，或者以后写分类都用list形式（带上“[]”符号）。
  如果 分类一 和 分类二 是同级分类不存在父子关系则需要这样写。


1
2
3
4
5
6
7
8
9
10
---
title: 文章
date: 2020-08-02 19:52:44
categories:
    - [分类一]
    - [分类二]
tags:
    - 标签一
    - 标签二
---



  现在让我们写更多的文章进行分类管理吧。

  需要在你的*.md文件所在目录创建一个同名的文件夹，该文件夹里放入图片。上面路径中的 title 即为*.md文件名，一般也是文章的标题。还有一种办法就是使用图床，网页通过在线加载形式就能兼容本地和网页同时可见。
  注意：cnzsb/hexo-asset这款插件还不太成熟，目前存在一个Bug(2020.08.25)。当markdown语法找不到路径下的图片时（不管图床图片还是Hexo图片），会导致图片之前的内容被重现加载，使得网页内容多次重复显示。所以请谨慎使用，不用时请卸载。

Front-matter

  我们写的文章需要放在Hexo根目录下的source/_posts目录下，可根据专题分类创建文件夹分类放，但是如何在网页上实现文章分类并给文章打上标签呢。这时候需要用到 Front-matter 配置。它是放在md文件开头能被Hexo解析识别的一种语法，写在 --- 之间，常用参数有如下几种。

参数 默认值 描述
layout - 布局
title 文件名 标题
date 文件创建时间 创建时间
updated 文件更新日期 更新时间
comments true 开启文章的评论功能
tags - 标签（不适用于分页）
categories - 分类（不适用于分页）
permalink - 覆盖文章地址

  Front-matter在浏览文章时不会显示。
  在我们对文章分类前，还需要为网站创建一个标签页page和分类页page。在Hexo根目录下执行指令进行创建。

1
hexo new page tags
1
hexo new page categories

  执行指令后Hexo会帮我们在source目录下创建相应的文件夹和文件。我们对文件Front-matter进行修改。打开source/tags/index.md文件进行如下修改。

1
2
3
4
5
---
title: tags
date: 2020-08-09 13:06:54
type: tags
---

  打开source/categories/index.md文件进行如下修改。

1
2
3
4
5
---
title: categories
date: 2020-08-09 13:07:15
type: categories
---

  如果我们要给一篇文章指定分类和标签，只需要在md文件开头的Front-matter中如下这样写。

1
2
3
4
5
6
7
8
---
title: 文章一
date: 2020-08-02 19:52:44
categories:
    - 专题一
tags:
    - 文章一
---

  Hexo将会自动对属于同一categories的文章进行归类，并且可按tags进行分类和查找文章。我们可以为一篇文章添加多个tags，可添将一篇文章添加到多个categories里。

1
2
3
4
5
6
7
8
9
10
---
title: 文章
date: 2020-08-02 19:52:44
categories:
    - 分类一
    - 分类二
tags:
    - 标签一
    - 标签二
---

  如果这样写那么这篇文章将会包含两个标签，同时属于 分类一 和 分类二 两个分类下，并且 分类二 为 分类一 下的一个子分类。子分类还可以用这样写。

1
2
3
4
5
6
7
8
9
---
title: 文章
date: 2020-08-02 19:52:44
categories:
    - [分类一, 分类二]
tags:
    - 标签一
    - 标签二
---

  作用与上一中完全相同，表明了文章同属于两个分类，且 分类二 是 分类一 的子分类。更推荐用list的形式写子分类，或者以后写分类都用list形式（带上“[]”符号）。
  如果 分类一 和 分类二 是同级分类不存在父子关系则需要这样写。

1
2
3
4
5
6
7
8
9
10
---
title: 文章
date: 2020-08-02 19:52:44
categories:
    - [分类一]
    - [分类二]
tags:
    - 标签一
    - 标签二
---

  现在让我们写更多的文章进行分类管理吧。