csdn怎么发布文章 基于Hexo和Butterfly创建个人技术博客,(3) 创建博客文章及文章模板配置
true
tags
标签(不适用于分页)
分类(不适用于分页)
覆盖文章的永久链接,永久链接应该以 / 或 .html 结尾
null
纯文本的页面摘要。
启用时禁用 标签 {{ }}/{% %} 和 标签插件的渲染功能
false
lang
设置代码块语言以自动检测功能
继承自 .yml
2.2、和tags配置
只有文章支持分类和标签,在 Hexo 中分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。
categories:
- Diary
tags:
- PS3
- Games
为文章添加多个分类,可以尝试以下 list 中的方法。此时这篇文章同时包括三个分类: 和 Games 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
2.3、模板示例
page
---
title: {{ title }}
date: {{ date }}
reward:
description:
top_img: # butterfly主题扩展,用于设置文章顶图用,后面的文章中会详细说明
comments: false
---
post
---
title: {{ title }}
date: {{ date }}
tags:
categories:
keywords:
description:
top_img: # butterfly主题扩展,用于设置文章顶图用,后面的文章中会详细说明
cover: # butterfly主题扩展,用于设置文章顶图用,后面的文章中会详细说明
comments: false
---
dratf
---
title: {{ title }}
tags:
---
因模板可以后期再修改,所以建站初期建议用上述示例模板就可以了,不需要定义的太复杂,在建站过程中逐渐优化。
三、创建新文章
使用如下命令:
$ hexo new [layout] <title>
文件默认支持: 、ejs、pug三种不同格式来编写。
3.1、创建新文章
如果不指定,则默认为 post,是由 .yml 中的 参数来指定的。如果标题包含空格的话,请使用引号括起来。
创建两次同名的文件,生成的.md文件不会覆盖。hexo会自动在文件名后加索引:但要注意,经hexo g生成的.html文件的实际链接与 的配置有关
示例如下:
/source目录下
#创建文件:/source/_posts/test.md
$ hexo new post test
#创建文件: source/_posts/about/me.md (在source目录下创建子目录)
$ hexo new page --path about/me
在网站根目录下
#创建文件: /source/about/me.md (在根目录下)
$ hexo new page --path about/me "About me"
3.2、创建列表页
如果选择==post一般是创建博文使用,如果选择page模板则一般是创建列表页面或其它特殊的页面,示例如下:
#创建文件:/source/tags/index.md
$ hexo new page tags
#创建文件:/source/link/index.md
$ hexo new page link
#创建文件:/source/categories/index.md
$ hexo new page categories
3.3、创建草稿(不太建议使用)
创建文件时指定布局为:draft后,文件会被保存到 / 文件夹,再通过 命令将草稿移动到 / 文件夹中:
$ hexo publish [layout] <title>
四、 文件名称设置
Hexo 默认以标题做为文章文件的名称,由参数: title.md指定。举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章,可以使用以下占位符:
变量描述
:title
标题(小写,空格将会被替换为短杠)
:year
建立的年份,比如, 2015
:month
建立的月份(有前导零),比如, 04
:
建立的月份(无前导零),比如, 4
:day
建立的日期(有前导零),比如, 07
:i_day
建立的日期(无前导零),比如, 7
文件名称设置修改后不会对网站运行产生任何影响,只会对后续文件命名规则有影响,建议保持默认值即可。
五、引用数据共享
本小节严格来说是属于文章编辑的部分。笔者想了想还是按文章编写和资源使用这两个维度来区分,把共享数据和模板归为同一类别。但又与后续tag 有些联系所以有意放在此章末尾来讲解。
5.1、数据共享
如果某些数据是需要重复使用的,可以考虑使用「数据文件」功能。此功能会载入 /_data 内的 YAML 或 JSON 文件。举例来说,在 /_data 文件夹中新建 menu.yml 文件,内容如下:
Home: /
Gallery: /gallery/
Archives: /archives/
您就能在模板中使用这些数据了:
<a href=""> </a>
渲染结果如下 :
<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>
5.2、资源共享
此处没有明确编码方法会比较迷糊,先了解下概念,详细使用方法可参考 hexo文章编写之Tags 语法 文章中对图片和资源的用法描述,
1.全局资源
Asset 代表 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 / 文件夹中。然后通过类似于  的方法访问它们。
2.文章专用资源
如果资源只给特定的文章使用,可以将 .yml 文件中的 选项设为 true,然后在每一次通过 hexo new [] 命令创建新文章时自动创建一个与文章title同名的文件夹,然后就可以把有关的资源放在这个关联文件夹中,再通过相对路径来引用它们
post_asset_folder: true
但要注意这需要用到Hexo专用的tag语法,比方法:把一个 .jpg 图片放在了你的资源文件夹中,使用时不能使用 [](.jpg),而要使用。
5.3、资源引用方法 1.相对路径引用方法
通过常规的 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
正确的引用图片方式是使用下列的标签插件而不是 语法,通过这种方式,图片将会同时出现在文章和主页以及归档页中。
{% asset_img example.jpg This is an example image %}
2. 相对路径引用方法
这需要一个插件$ npm hexo-- --save,默认是安装的了,安装后就无须使用标签了。需先配置一下:
#_config.yml
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
启用后,资源图片将会被自动解析为其对应文章的路径。例如: image.jpg 位置为 /2020/01/02/foo/image.jpg ,这表示它是 /2020/01/02/foo/ 文章的一张资源图片,  将会被解析为
。
六、测试新文章
此时还没有配置路径,所以我们可以在流量器上手写URL,比如:
$hexo new page test; #新创建一个名为test的文件
$hexo g #生成html
$hexo server --debug #启动服务
在//posts/文件夹下查找test.html,然后修改浏览器的Url即可查看,此时也可以修改test.md文件,刷新浏览器会自动更新。