新建博客post页默认配置

1. hexo的布局

创建文章前要先选定模板，在hexo中也叫做布局。hexo支持三种布局（layout）：post(默认)、draft、page。
当使用hexo new blogname命令时，hexo会默认使用post布局，并且自动在source/_posts目录中生成blogname.md文件

1.1 指定布局

hexo new [layout_name] draft1

这个命名会创建draft1的特定布局文章

1.2 Front-matter

当新建一篇文章时，会在.md文件中出现下面的内容

---
title: 新建博客post页默认配置
date: 2023-05-02 18:33:01
tags:
---

这个在hexo中称为Front-matter,用来配置一篇文章的基本信息，如文章标题，时间，标签，归类等等。

1.3 标签

标签没有顺序和层次

写法：

tags:
- ps3
- games

1.4 分类

分类有顺序和层次

写法：

categories:
  - Diary
  - Life

分类 Life 成为 Diary 的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

2. 如何自定义布局

默认布局并不能满足我们的日常编辑，比如为一篇文章编写标签、归档等信息时，默认布局并没有这些配置项，需要手动填写，这为每次创建博客文章时带来不方便。

2.1 布局文件

布局文件本身是一个.md文件，在scafflods文件下，可以看到有三个文件:draft、page、post

修改post.md文件后，执行hexo new test，生成文件的Front-matter如下：

---
title: test
comments: true
date: 2023-05-02 19:09:20
updated:
tags:Typora
categories:
---

3. 自动生成同名文件夹

3.1 文章中如何插入图片等资源

markdown中插入图片使用下面命令

![alt](path [title])

• path是必选的，表示图片的路径，可使用绝对或相对路径。
• alt是可选的，是图片无法加载时的替代描述文本。
• title是可选的，是图片的标题。

3.2 生成同名路径

当博客数量比较多时，博客中存在的图片等资源也会多，如果每次新建博客时，图片将不好与博客相关联。手动去新建一个与博客同名的文件夹会比较麻烦，下面将设置新建博客时自动生成同名文件夹。
在博客根目录下_config.yml配置文件中，设置

post_asset_folder: true

当hexo new test1时，会在source/_posts路径下生成test1.md文件和test1文件夹。

3.3 图片无法显示

在hexo s后，图片没有显示出来，通过查看生成的html文件发现，图片路径不对，这里的不对和我个人的配置有关，后面再讲具体情况。在官网中的资源文件夹中，可以看到有两种方式导入图片，这里选择使用Markdown嵌入图片的方式导入图片，这种方式比较方便。

按照官网配置：首先下载：npm install hexo-renderer-marked --saved，下载好后配置_config.yml文件。

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后，资源图片会被自动解析为文章路径。下面是md文件中的路径。

解析后，变为/2023/05/02/xxx/img_xxx.png， xxx即为图中乱码的东西，这是因为路径中包含中文，整个路径是部署后的路径。

此时可以发现部署后就可以看到图片了。

3.4 在本地和部署页面都可以显示

按照上面的部署没有出现问题时是可以显示图片，但是写博客时会配合编辑器来写，这里使用Typora编辑器，具体可看下一章的介绍。当复制图片到编辑器时，会发现多了一个路径，当前文件名同名路径/xxx.png，如下：

当前文件名的同名路径使得本地可以查看，但是部署后浏览器中将无法查看，如果要两者都可以查看，需要下面的步骤。

首先，找到目录下的\node_modules\hexo-renderer-marked\lib\的renderer.js文件

修改代码进行调试

发现，本来只需要Front_matter.png就可以正确解析，但是Typora复制后会带上一个同名的相对路径，所以将这个路径按照’/‘分开为数组后，提取数组中最后一个值就可以了。

添加代码去掉上面代码中的打印信息部分，就可以变为：

if(href.indexOf('/')>-1){
    var arr = href.split('/');
    console.log(arr);
    href = arr[arr.length-1];
}

现在就可以在本地和部署后浏览器中都能查看图片了。

3.5 解析图片路径出现的问题

如果上面已经解决了问题，可以不用看这一节。在本机配置过程中出现了一个非常严重的错误，导致按照上面的步骤不通过。当执行命令hexo g时出现下面的问题：

这个问题会导致生成的html文件中路径无缘无故包含/.io//的前缀，这是解析出错了。通过执行npm audit命名发现npm有一个包出现问题。

通过npm un hexo-asset-image命令，移除hexo-asset-image插件，之后执行上述步骤就没有出现问题了。

4. 编辑器

4.1 Typora编辑器

Typora编辑器可以将复制到文章的图片自动保存在同名文件夹下。在文件->偏好设置->图像->选择复制到指定路径。

参考

1. 使用hexo新建、编辑并预览文章