6.Hexo标签插件和资产文件夹

标签插件

标签插件,基本上是只是一些小的代码片段,可以将他们添加到markdown文件中
以便添加特定的代码,不需要编写复杂或混乱的HTML

当很多时候想要在markdown页面添加一些特殊元素,通常必须使用HTML
如果不想这么用HTML,或者是不知道怎么去用,或者只是不想弄乱markdown文件

所以标签插件就是放在markdown文件中的小代码片段,它们会呈现更复杂的内容

Tag Plugins | Hexo
打开Hexo官方文档,在标签插件页面
这里列出了可以使用的所有插件
![[Pasted image 20240413163723.png]]

这些是代码块标签插件
如果在写博客,想要一些代码示例,可以使用代码块标签插件,轻松地将代码添加到博客中并使其风格化

添加代码的方式是使用标签插件
将标签插件添加到网站中的方式是

输入左右大括号,两个百分号,在百分号中间键入标签插件的名称
比如codeblock
有两种类型的代码块
![[Pasted image 20240413161711.png]]

单标签代码块
如果使用单标签代码块,只需要一个标签
双标签代码块
![[Pasted image 20240413161719.png]]

需要一个结束的标签
通过输入end和代码块的名称来编写结束标记

在这个代码块内,可以添加任何文本将其表现为代码的格式
比如一些JavaScript文本
![[Pasted image 20240413161955.png]]

当刷新Hexo页面
这些代码块内的文本被渲染为代码
![[Pasted image 20240413162101.png]]

以程式化的方式渲染

所以要做的就是包含codeblock这个代码插件
然后里面的所有文本都会自动开始渲染

正常情况下如果想要添加这样的代码内容,必须使用HTML和CSS
但是在Hexo里只需要将这个代码插件插入到文件当中,它就会自动工作

使用标签插件,除了只是使用它们的名称和调用它们之外,还可以向它们传递不同的参数
可以将特定值传递给标签插件,它可以用该值来改变内容的呈现方式

比如可以使用lang属性
输入正在使用的编程语言
![[Pasted image 20240413162837.png]]

Hexo会使用这个信息,会对这里的代码进行样式化
![[Pasted image 20240413163540.png]]

括号里的文本会显示不同的颜色,变量关键字也是不同的颜色,

许多标签插件将采用必需或可选的参数,可以增加功能或只是改进标签插件的外观和呈现内容的方式

还有很多其他插件,可以在网站页面添加图片或视频

资产文件夹

hexo中的asset文件夹
在Hexo中基本上是一种用于存储与每篇博客文章相关的静态资源
如果有一篇博客文章,想在文章中使用图片或者是一个可以让用户下载的PDF
可以将所有这些静态资源放入asset文件夹中
然后就可以在markdown文件上访问这些静态资源

为了使用asset文件夹
![[Pasted image 20240413164556.png]]

需要打开config.yml文件,找到写作部分,有一个post_asset_folder,默认是false,要将它设置为true
![[Pasted image 20240413164619.png]]

保存config文件

为了创建一个asset文件夹,首先需要创建一个新的内容
post文件g
![[Pasted image 20240413164819.png]]

会发现这次创建了两个东西,一个g.md文件,还有一个g文件夹
这个g文件夹就是asset文件夹
可以在这里存储所有想要用于此md文件的任何静态资源

比如可以放入一个png文件
![[Pasted image 20240413165142.png]]

1.

要做的就是输入一组特殊的Hexo代码

{% asset_img g.png %}

意思是
进入asset文件夹,获取一个名为g.png的文件
因为是asset_img,所以将在HTML中显示该图像
![[Pasted image 20240413165824.png]]

在主页上显示的g.md文件,里面有刚刚插入的图片

同样也可以传递参数

{% asset_img g.png Hatsune Miku %}

这样可以输入该图像的标题,会显示在图片的下方
![[Pasted image 20240413170530.png]]

2.

也可以输入其它命令

{% asset_link g.png "Hatsune Miku" %}

如asset link,这样会在网站上显示一个链接
![[Pasted image 20240413170603.png]]

这个链接只是链接到asset文件夹,链接到图像文件
![[Pasted image 20240413170714.png]]

在URL中可以看到日期名字和图像

3.
{% asset_path g.png "Hatsune Miku" %}

还可以输入图像路径
这样不会直接链接到文件,而是提供该图像所在的路径
可以输入到URL中打开图像

基本上这些命令只允许访问asset文件夹里面的资源

  • 15
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值