参考文档:

标签插件参考:https://hexo.io/plugins/

功能插件参考:https://hexo.io/zh-cn/docs/ta...

资源文件夹参考:https://hexo.io/zh-cn/docs/as...

Markdown(md)写作模板:
https://www.bas369.com/more/l...

欢迎大家访问我的个人导航网站并且设置为主页:

巴士369,伴您到永久!https://www.bas369.com

1.标签插件介绍

Hexo官方的标签插件参考链接:
https://hexo.io/zh-cn/docs/ta...
若官方的参考文档表述不明;
请参考官方的 代码库 结合 浏览器的 F12 调试功能进行测试;
标签插件代码库的安装路径为:\node_modules\hexo\lib\plugins\tag
以下的测试说明,基于 Hexo 的官方主题进行,未进行基于其他主题的测试;
其他主题可能存在 bug ,因为其他主题可能会修改官方默认的标签插件设置;
标签插件的固定格式为:花括号% 属性 其他参数 %花括号
属性 指 html 标签 或者 hexo 预先定义的标签;
例如:img 、link 、 asset_img 、post_link 等等;

hexo根目录的部分配置(注意:不是主题目录的配置)说明:
index_generator:
path: ''
per_page: 10 # 定义每一个分页显示多少篇文章;0 表示首页显示全部文章;
order_by: -date

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 # 定义文章归档页面,每一个页面显示多少篇文章明细;
pagination_dir: page

2.文章添加图片

打开项目根目录的配置文件 config.yml ,注意,不是主题的配置文件;
将配置文件中的 post_asset_folder 选项设为 true 来打开;
这样的话,在执行 hexo new post 文章 ,新建 文章.md 文件的时候;
会同时建立同名的 文章 资源文件夹;
如果没有资源需要从 文章 资源文件夹 引用,
那么可以删除该文件夹,hexo 在执行渲染的时候,不会出错;
而且 文章 资源文件夹在经过 hexo 执行 html 渲染后,文件夹也会被删除;
文件夹的资源会被移动到与 文章.html 相同的目录;
所以,在 文章.md 引用文件夹资源的时候,才不需要包含路径;

2.1.方法一:不指定图片的大小;

花括号%  固定属性asset_img  存放在资源文件夹的图片名称及后缀不需要路径  图片说明  %花括号

注意:
各参数之间以 空格 分割,图片的默认大小为文章的宽度;
实际显示图片高度是按照图片宽度等比例缩放;

示例: 
{% asset_img test.jpg 图片介绍 %}  

asset_img 标签插件的 bug 说明及修改:
在 hexo 中,如果 markdown文件中 在 asset_img 标签之前的文本中,
使用了 三个反引号的 代码块标识符;
那么在后文中出现的 asset_img 标签插件就会解析失败;

解决方法: 
修改 \node_modules\hexo\lib\extend\tag.js 代码,替换下面的语句;

// 原代码 
// str = str.replace(/[\s\S]*?<\/code><\/pre>/gm, escapeContent);
// 修改后:
str = str.replace(/[\s\S]*?<\/code><\/pre>/gm, escapeContent);  
/* 参考文档如下:https://segmentfault.com/q/1010000012070918  
解决方法是添加一个问号  ? ,将    改为     ;  
添加一个  ? 问号,把正则表达式改为非贪婪的;  
修改前:str = str.replace(/(?:)?[\s\S]*?<\/code>(?:<\/pre>)?/gm, escapeContent);  
修改后:str = str.replace(/(?:)?[\s\S]*?<\/code>(?:<\/pre>)?/gm, escapeContent); 
*/

2.2.方法二:指定图片的大小;

使用hexo官方的标签插件;
参考链接:https://hexo.io/zh-cn/docs/ta...

语法:
花括号%  固定属性img  样式表的类名,可以是多个以空格分隔也可以留空白  图片完整的http路径,也可以使用文章的资源文件夹  图片宽度,不可以写上px单位,默认单位是px  图片高度不需要单位  '"图片说明文字"  "显示图像失败的替代文本"'  %花括号

注意:
实际显示图片高度是按照宽度等比例缩放;
相当于高度参数实际未起作用,但是不能省略;

示例:未设置样式表;
 {% img https://cn.bing.com/th?id=OHR.BurgAltdahn_ZH-CN8281669977_1920x1080.jpg 250 250 '"护眼高清风景壁纸" "护眼高清风景壁纸"' %} 

3.文章链接Link插件使用

语法:
花括号%  固定属性link  链接显示的文本  链接的http网址  true或者false控制是否添加target="_blank"属性  鼠标悬浮在链接上显示的title属性文本  %花括号

示例:
花括号% link 百度网址超链接 https://www.baidu.com/ true 百度 %花括号

渲染结果:
百度网址超链接

4.引用 站内 其他文章链接地址的方法

以下 post_pathpost_link 两个属性方法的区别是:
post_path 返回的是字符串;
post_link 返回的是超链接;

4.1.方法一:花括号% post_path filename %花括号;该方法不常用;

示例: 
{% post_path Markdown写作模板 %}

返回 Markdown写作模板 文章的站内链接地址字符串如下所示:  
/2020/03/14/Markdown写作模板/

注意:
返回的不是超链接;是一串字符;

4.2.方法二:使用 post_link 属性,推荐使用的方法;

语法说明: 
{%  固定属性post_link  站内目标文章的标题  用来替代目标文章的标题在本页面内显示的文字,同时作为鼠标悬浮的时候显示title属性的文字,默认链接文字是文章的标题,如果包含空格的话那么使用英文单引号裹起来,否则的话不需要单引号  true或者false,用来控制是否对引用文章的标题和自定义标题里的特殊字符进行转义,默认值为true转义  %}

示例: 
{% post_link Markdown写作模板 跳转到–Markdown写作模板–文章 true %}

返回跳转到 Markdown写作模板 文章的站内超链接,效果如下所示: 
跳转到-- Markdown写作模板 --文章 

注意:
1.生成的链接默认不带有 target=”_blank” 属性; 
2.在使用此标签时可以 忽略 文章文件所在的 路径 或者 文章的永久链接信息、如语言、日期; 
  只要存在一个名为 Markdown写作模板.md 的文章文件即可。

5.资源的引用

5.1.资源存储路径字符串的返回;

语法: 
花括号%  固定的属性asset_path  资源文件夹中资源的名称,例如图片名称及后缀不需要路径  %花括号

示例: 
{% asset_path test.jpg %} 

返回 test.jpg 图片资源的站内链接地址字符串如下所示: 
/2020/03/14/Markdown写作模板/test.jpg

注意:
返回的不是超链接;是一串字符;

5.2.资源存储路径超链接网址的返回,可以用作附件下载链接生成;

语法:
花括号%  固定的属性asset_link  资源文件夹中资源的名称,例如图片名称及后缀不需要路径  自定义显示的资源名称替换资源文件名同时作为鼠标悬浮时候显示的title属性文字说明,默认显示资源的文件名称  %花括号

示例:
{% asset_link test.jpg test.jpg图片附件的下载测试 %}

返回本文章引用的 test.jpg 图片资源的完整 http 超链接地址:
test.jpg图片附件的下载测试

注意:
返回的是超链接下载地址。

以上是自己使用 hexo 的简要总结说明。


hgjian
38 声望0 粉丝

引用和评论

0 条评论