基于Hexo和Butterfly创建个人技术博客,(5) 使用Hexo的Tags Plugin插件增强博客文章内容和视觉表现力

news/2024/11/19 5:54:56/

Hexo官司网查看 这里

注意:
Tags语法是Hexo插件提供的,是非标准语言,写文章时要注意以下几点:

  1. 用于在文章中快速插入特定的内容,作用等同于其它语言,可理解为一种增强版本的markdown;
  2. 可混合Markdown、ejs等语法一同使用,但不能被包裹在 Markdown 等语法中,例如[]({% post_path lorem-ipsum %}) 是错误的;

本章目标:
掌握常用的tag plugin标签的用法,本文是Hexo建站最后一篇基础课程,后续的文章都会围绕建站过程展开,从实战中学习相关的技术知识

首先需要说明的是,这些标签可以和.md文件混合写在一起,但不能嵌套使用。也不能用于发布到其它博客平台,这些是hexo专用的语法,需要专门的解析器才最后生成的被浏览器识别的html语言,即专用渲染插件+专用语法=通用.html语法,需要特别注意。
这些语法只是增强或简化了.md语法,可选择使用原生的.md标签来代替,代价是会损失一些UI上的表现力。

一、常用标签

---
title: test
date: 2023-06-08 22:11:46
tags:
---
{% blockquote %}
dddd
{% endblockquote %}

- blockquote-引用块

语法结构如下:

{% blockquote [author   [, source] ]   [link]   [source_link_title] %}
content
{% endblockquote %}

引用书上的句子

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

在这里插入图片描述

引用 Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

在这里插入图片描述

引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

在这里插入图片描述

- codeblock-代码块(不建议使用)

语法结构如下:

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

option:value 的格式指定额外选项,例如:line_number:false first_line:5

额外选项描述默认值
line_number显示行号true
line_threshold只有代码块的行数超过该阈值,才显示行数0
highlight启用代码高亮true
first_line指定第一个行号1
mark突出显示特定的行,每个值用逗号分隔。 使用破折号指定数字范围
例如: mark:1,4-7,10 将标记第1、4至7和10行
wrap<table> 包裹代码块true
//普通的代码块
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}//指定语言
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}//附加说明
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}//附加说明和网址
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

在这里插入图片描述

- IncludeCode-代码文件(不建议使用)

功能同codeblock一样,插入 source/downloads/code 文件夹内的代码文件,文件路径取决于 code_dir 的配置。语法结构如下:

{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

例子如下,test.js位于source/downloads/code 文件夹下:

{% include_code lang:javascript test.js %}   //嵌入 test.js 文件全文
{% include_code lang:javascript from:3 to:3 test.js %}  //只嵌入第 3 行
{% include_code lang:javascript from:5 to:8 test.js %}   //嵌入第 5 行至第 8 行
{% include_code lang:javascript from:5 test.js %}    //嵌入第 5 行至文件结束
{% include_code lang:javascript to:8 test.js %}  //嵌入第 1 行至第 8 行

- iframe-内嵌网页

语法结构如下:

{% iframe url [width] [height] %}

- Image-插入图片

这个标签是相对/source目录下的相对路径的也可以是网络资源,语法结构如下:

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

默认是居中的,title text只有图片放大时才显示,示例如下。

{% img https://i.loli.net/2019/11/10/lP3rLNUBaGtSVzc.png 100 100 '"title text" "alt text"' %}//下面这两种写法是一样的
{% img /img/index_bg.jpg %}
![](/img/index_bg.jpg)

另外一种局部引入图片的语法参考, 文章专享资源

- link-插入外部链接(不建议使用)

语法结构如下:

{% link text url [external] [title] %}  //自动给外部链接添加 target="_blank" 属性

- post_path-插入内部链接

在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期,语法结构是:

{% post_path filename %}
{% post_link filename [title] [escape] %}

操作方法是:

  1. 在任意位置创建一个与标签中 filename 的值同名的 .md 文件;
  2. 然后定义标签
# 这需要创建一个名为hexo-3-8-released的文件,比如/source/_posts/hexo-3-8-released.MD
{% post_link hexo-3-8-released %} #链接使用文章的标题,只显示 hexo-3-8-released
{% post_link hexo-3-8-released '通往文章的链接' %} #链接使用自定义文字
{% post_link hexo-3-8-released 'How to use <b> tag in title' %} #对标题的特殊字符进行转义,原样显示
{% post_link hexo-3-8-released '<b>bold</b> custom title' false %} #禁止对标题的特殊字符进行转义

在页面显示如下,点击后会直接跳转到hexo-3-8-released.md页面,不管解析后真正路径是啥:

在这里插入图片描述

- asset-引用资源

一种有两种用法,但都需要先开启 post_asset_folder: true,这样创建文件时会创建一个同名的文件夹,如下所示:

在这里插入图片描述

第一种用法(推荐):markdown

在_config.yml中配置
marked:prependRoot: truepostAsset: true然后在.md使用,注意比原生的语法多了一个!号。 ![](img/index_bg.jpg)

第二种用法:asset
语法结构如下:

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}
{% asset_img img/index_bg.jpg %}
{% asset_img post-image img/index_bg.jpg %}
{% asset_img img/index_bg.jpg 500 400 %}
{% asset_img img/index_bg.jpg "lorem ipsum'dolor'" %}

二、常用文章内容增强插件

- pullquote-思维导图

实现思维导图的功能,需安装插件 npm install hexo-simple-mindmap,详细可查看pullquote github

{% pullquote [class] %}
content
{% endpullquote %}

- jsFiddle-在线代码编辑

我们可以用他来在线编辑一些HTML,CSS,javascript片段。你编辑的代码可以与其他人分享,或嵌入你的博客等。这个插件Hexo自带了,不需要再安装了。

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

- gist-在线代码分享

github提供的一个在线共享仓库代码的功能。

{% gist gist_id [filename] %}

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}   //嵌入 test.js 文件全文
{% include_code lang:javascript from:3 to:3 test.js %}  //只嵌入第 3 行
{% include_code lang:javascript from:5 to:8 test.js %}   //嵌入第 5 行至第 8 行
{% include_code lang:javascript from:5 test.js %}    //嵌入第 5 行至文件结束
{% include_code lang:javascript to:8 test.js %}  //嵌入第 1 行至第 8 行

- Youtube-视频

语法结构如下:

{% youtube video_id [type] [cookie] %}

示例

{% youtube lJIrF4YjHfQ %} **视频**
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %} **播放列表**

- Vimeo-视频

语法结构如下:

{% vimeo video_id %}

- Raw-使用Sing语法

如果您想在文章中插入 Swig 标签,需要用 Raw 标签来包装swig代码,swig 是node端的一个优秀简洁的模板引擎。

{% raw %}
content
{% endraw %}


http://www.ppmy.cn/news/377994.html

相关文章

推荐几款机顶盒用的芯片

深圳爱欣文科技有限公司成立于1989年,长期专业从事国际最新集成电路(IC)代理批发销售业务,及其应用技术研发的一条龙业务,是集研发、商贸于体的全球化IC代理公司.公司接受荣誉授权,全面代理台湾DAVICOM联杰国际﹑MAGCOM磁威,GIGASTORAGE国硕、TMC晶扬等国际知名品牌的微型计算机…

【数据库一】MySQL数据库初体验

MySQL数据库初体验 1.数据库基本概念1.1 数据Data1.2 表1.3 数据库1.4 数据库管理系统1.5 数据库系统 2.数据库的发展3.主流的数据库介绍3.1 SQL Server&#xff08;微软公司产品&#xff09;3.2 Oracle &#xff08;甲骨文公司产品&#xff09;3.3 DB2&#xff08;IBM公司产品…

ThinkPad X1 carbon BIOS设置U盘装系统

问题&#xff1a;按F1或者FnF1均无法进入BIOS&#xff0c;按F12或者FnF12均无法进入启动项选择界面。 解决&#xff1a;重启电脑&#xff08;不能使用关机&#xff09;&#xff0c;显示LENOVO图标后按Enter键&#xff0c;进入选择界面&#xff08;F1-BIOS,F12-启动项选择界面&…

联想x1carbon更换电池_好电脑不怕给你拆开看,ThinkPad X1 Carbon拆机体验!

4 拆机 真正好的产品&#xff0c;是在用户看不到的地方&#xff0c;同样追求卓越。而ThinkPad X1 Carbon显然是秉承着这种对自己有些苛刻的理念&#xff0c;选取航天级别的碳纤维材质来满足-20~60℃的工作范围&#xff0c;防泼溅键盘&#xff0c;十项军规要求&#xff0c;等等看…

Thinkpad X1 Carbon/Yoga如何更换固态硬盘并无损转移系统(亲测有效)

本文以Thinkpad X1 Carbon 5th 和X1 Yoga 3rd为例,讲解如何更换固态硬盘并无损转移系统。 更换硬盘过程很简单,可以搜索网络。打开计算机后盖,找到硬盘,更换即可。不急,在更换前,要做三件事:1. 安装acronis true image 2021(其他版本也一样,用新不用旧)2. 使用工具…

Thinkpad X1 Carbon Gen 4 20FCS0TR0U-Hackintosh-Opencore 黑苹果efi引导文件

硬件 基本输入输出系统设置&#xff1a;英特尔BIOS设置 注意:这些选项中的大多数可能在您的固件中不存在&#xff0c;我们建议尽可能匹配&#xff0c;但如果这些选项中的许多在您的BIOS中不可用&#xff0c;也不要太在意。 使残废 快速启动安全启动串行/COM端口并行端口VT-d…

联想x1carbon更换电池_Thinkpad X1 高清拆机图解

对于没有拆过这款Thinkpad X1笔记本的朋友来说,拆解还是有一定的难度的,其实,Thinkpad X1拆起来一点都不难的,把背面看得到的螺丝全部拆掉,然后就很好把我们的本本拆开了!如果你想了解内部结构,请看完本文! 其实拆起来一点都不难,D面能看见的螺丝全部干掉。 硬盘仓打开…

电脑彻底卸载双系统中的Ubuntu ThinkPad X1 Carbon

电脑是ThinkPad X1 Carbon&#xff0c;装的是Win10Ubuntu 主要基于大佬的博客&#xff1a; 教你彻底卸载Ubuntu双系统&#xff0c;去污不残留_振华OPPO的博客-CSDN博客_双系统卸载ubuntu 但是我的电脑和大佬的不太一样 有些细节处理有偏差&#xff0c;自己留存备用。 1.调…