标签插件
标签插件,基本上是只是一些小的代码片段,可以将他们添加到markdown文件中
 以便添加特定的代码,不需要编写复杂或混乱的HTML
当很多时候想要在markdown页面添加一些特殊元素,通常必须使用HTML
 如果不想这么用HTML,或者是不知道怎么去用,或者只是不想弄乱markdown文件
所以标签插件就是放在markdown文件中的小代码片段,它们会呈现更复杂的内容
Tag Plugins | Hexo
 打开Hexo官方文档,在标签插件页面
 这里列出了可以使用的所有插件
 ![![[Pasted image 20240413163723.png]]](https://img-blog.csdnimg.cn/direct/78043811edb147959fb378d403f4f144.png)
这些是代码块标签插件
 如果在写博客,想要一些代码示例,可以使用代码块标签插件,轻松地将代码添加到博客中并使其风格化
添加代码的方式是使用标签插件
 将标签插件添加到网站中的方式是
输入左右大括号,两个百分号,在百分号中间键入标签插件的名称
 比如codeblock
 有两种类型的代码块
 ![![[Pasted image 20240413161711.png]]](https://img-blog.csdnimg.cn/direct/08acb433f9884bbea827b4ab72cca462.png)
单标签代码块
 如果使用单标签代码块,只需要一个标签
 双标签代码块
 ![![[Pasted image 20240413161719.png]]](https://img-blog.csdnimg.cn/direct/f2ab6e502cbc40a291681af5f5e23769.png)
需要一个结束的标签
 通过输入end和代码块的名称来编写结束标记
在这个代码块内,可以添加任何文本将其表现为代码的格式
 比如一些JavaScript文本
 ![![[Pasted image 20240413161955.png]]](https://img-blog.csdnimg.cn/direct/617a44a4e5de432a84731afe7ee42960.png)
当刷新Hexo页面
 这些代码块内的文本被渲染为代码
 ![![[Pasted image 20240413162101.png]]](https://img-blog.csdnimg.cn/direct/d4866934bb02451b8a934b3043d55823.png)
以程式化的方式渲染
所以要做的就是包含codeblock这个代码插件
 然后里面的所有文本都会自动开始渲染
正常情况下如果想要添加这样的代码内容,必须使用HTML和CSS
 但是在Hexo里只需要将这个代码插件插入到文件当中,它就会自动工作
使用标签插件,除了只是使用它们的名称和调用它们之外,还可以向它们传递不同的参数
 可以将特定值传递给标签插件,它可以用该值来改变内容的呈现方式
比如可以使用lang属性
 输入正在使用的编程语言
 ![![[Pasted image 20240413162837.png]]](https://img-blog.csdnimg.cn/direct/9a34e5c11d8542a89046d5eb53a784e9.png)
Hexo会使用这个信息,会对这里的代码进行样式化
 ![![[Pasted image 20240413163540.png]]](https://img-blog.csdnimg.cn/direct/cb1876794afb4713801f1af1be75c5d4.png)
括号里的文本会显示不同的颜色,变量关键字也是不同的颜色,
许多标签插件将采用必需或可选的参数,可以增加功能或只是改进标签插件的外观和呈现内容的方式
还有很多其他插件,可以在网站页面添加图片或视频
资产文件夹
hexo中的asset文件夹
 在Hexo中基本上是一种用于存储与每篇博客文章相关的静态资源
 如果有一篇博客文章,想在文章中使用图片或者是一个可以让用户下载的PDF
 可以将所有这些静态资源放入asset文件夹中
 然后就可以在markdown文件上访问这些静态资源
为了使用asset文件夹
 ![![[Pasted image 20240413164556.png]]](https://img-blog.csdnimg.cn/direct/769099f0ac124c678233dea84187aec7.png)
需要打开config.yml文件,找到写作部分,有一个post_asset_folder,默认是false,要将它设置为true
 ![![[Pasted image 20240413164619.png]]](https://img-blog.csdnimg.cn/direct/23ba39b842794fceb187c8e1133da995.png)
保存config文件
为了创建一个asset文件夹,首先需要创建一个新的内容
 post文件g
 ![![[Pasted image 20240413164819.png]]](https://img-blog.csdnimg.cn/direct/75df2eddb4a44a14ab2cafdbf8aed096.png)
会发现这次创建了两个东西,一个g.md文件,还有一个g文件夹
 这个g文件夹就是asset文件夹
 可以在这里存储所有想要用于此md文件的任何静态资源
比如可以放入一个png文件
 ![![[Pasted image 20240413165142.png]]](https://img-blog.csdnimg.cn/direct/6dbb2904113543ef906836f1f2d9a5fe.png)
1.
要做的就是输入一组特殊的Hexo代码
{% asset_img g.png %}
意思是
 进入asset文件夹,获取一个名为g.png的文件
 因为是asset_img,所以将在HTML中显示该图像
 ![![[Pasted image 20240413165824.png]]](https://img-blog.csdnimg.cn/direct/5c579233db7d4e8c8eea9aec0e6c0220.png)
在主页上显示的g.md文件,里面有刚刚插入的图片
同样也可以传递参数
{% asset_img g.png Hatsune Miku %}
这样可以输入该图像的标题,会显示在图片的下方
 ![![[Pasted image 20240413170530.png]]](https://img-blog.csdnimg.cn/direct/d51649a0043f4d4081b1b2406bf9ef3e.png)
2.
也可以输入其它命令
{% asset_link g.png "Hatsune Miku" %}
如asset link,这样会在网站上显示一个链接
 ![![[Pasted image 20240413170603.png]]](https://img-blog.csdnimg.cn/direct/287d844139ef4855923286fe52a86689.png)
这个链接只是链接到asset文件夹,链接到图像文件
 ![![[Pasted image 20240413170714.png]]](https://img-blog.csdnimg.cn/direct/77e41559ebc1450bb75d0317d4bf586b.png)
在URL中可以看到日期名字和图像
3.
{% asset_path g.png "Hatsune Miku" %}
还可以输入图像路径
 这样不会直接链接到文件,而是提供该图像所在的路径
 可以输入到URL中打开图像
基本上这些命令只允许访问asset文件夹里面的资源