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

news2024/11/24 20:26:14

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: true
  postAsset: 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.coloradmin.cn/o/644496.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux系统编程学习 NO.7 ——sudo配置、编译器的使用

引言&#xff1a; 现在是北京时间2023年6月14日8点16分&#xff0c;期末考试在即&#xff0c;重心可能得转移到考试上了。不过想到马上就可以回家陪家人过端午节&#xff0c;还是非常开心的。放暑假了就可以好好陪家人了。尝试一下换个环境复习吧&#xff0c;洗漱一下就去图书…

智见|比亚迪廉玉波:2023年销量目标300万辆

营收4240亿元&#xff0c;同比增长96%&#xff1b;归属上市公司股东净利润166亿元&#xff0c;同比增长445.86%&#xff1b;累计销售186.85万辆&#xff0c;同比增长152.5%……这是2022年比亚迪的成绩单。 据比亚迪披露&#xff0c;仅2022年一年新能源汽车的销量&#xff0c;就…

【重要】MThings V0.5.0更新要点

再见了BUG&#xff0c;为了改善质量&#xff0c;我们已修正了一些问题&#xff0c;以便您能继续富有成效且令人敬畏。 下载地址&#xff1a; http://gulink.cn/download 01. [新增]支持数据网关功能。 数据网关功能提供协议转换和数据汇聚功能&#xff0c;可实现不同的通道类型…

1--Gradle入门 - 简介、安装、目录结构、创建项目

1--Gradle入门 - 简介、安装、目录结构、创建项目 Gradle 官网 Gradle官网地址&#xff1a;Gradle Build Tool Gradle官方下载安装教程页面&#xff1a;https://gradle.org/install/ Gradle官方用户手册&#xff1a;https://docs.gradle.org/current/userguide/userguide.html …

4--Gradle入门 - 创建普通的web工程

4--Gradle入门 - 创建普通的web工程 前言 上一篇&#xff0c;我们已经创建了java工程&#xff0c;本篇章再来创建web工程。 “ 其实没啥用&#xff0c;还是研究如何部署 Springboot 环境就好了 ” 创建普通的web工程 1. 新建 gradle 管理的工程项目 1685862847224 2. 设置项目使…

前端构建工具的未来

本文作者系360奇舞团前端开发工程师 本文为翻译 原文标题&#xff1a;The Future Of Frontend Build Tools 原文作者&#xff1a;Alexander Joseph 原文链接&#xff1a;https://www.smashingmagazine.com/2022/06/future-frontend-build-tools/ 前端构建工具对现代前端开发者的…

基于SpringCloud+Vue房产销售平台的设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…

数据库从业者在行业的变革下------越来越难

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…

有趣的数学 依靠想象力的微积分

1、无限分割计算圆的面积 考虑将圆切成若干等份&#xff0c;下图为4等份。 下图为8等份。 下图为16等份。 下图为最终想象出来的极限矩形&#xff0c;据此分割为无穷等份的圆拼接为一个矩形。 矩形的面积 r * C / 2。 r为半径&#xff0c;C为周长。 2、夹逼法计算圆周率 借助…

使用SwinTransformer进行图片分类

SwinTransformer 是微软亚洲研究院在2021年提出的适用于CV领域的一种基于Tranformer的backbone结构。 它是 Shift Window Transformer 的缩写&#xff0c;主要创新点如下。 1&#xff0c;分Window进行Transformer计算&#xff0c;将自注意力计算量从输入尺寸的平方量级降低为线…

力扣刷题记录(一)剑指Offer(第二版)

1、本栏用来记录社招找工作过程中的内容,包括基础知识学习以及面试问题的记录等,以便于后续个人回顾学习; 暂时只有2023年3月份,第一次社招找工作的过程; 2、个人经历: 研究生期间课题是SLAM在无人机上的应用,有接触SLAM、Linux、ROS、C/C++、DJI OSDK等; 3、参加工作后…

【JVM系列】jvm内存结构详解

文章目录 前言HotSpot VM介绍内存结构程序计数器JVM栈本地方法栈Java堆方法区运行时常量池 永久代和元空间永久代&#xff08;PermGen&#xff09;元空间&#xff08;Metaspace&#xff09; 直接内存总结 前言 我们为什么要学习JVM&#xff1f; 面试的需要中高级程序员的必备技…

java的字符流

字符流的底层也是字节流。字符流字节流字符集。 特点是输入流一次读一个字节&#xff0c;遇到中文时&#xff0c;一次读多个字节&#xff08;读多少个与字符集有关&#xff09;&#xff1b;输出流底层会把数据按照指定的编码方式进行编码&#xff0c;变成字节再写到文件中。 字…

AI绘图高级篇 第7篇 MJ以图换图-卡通头像

大家好&#xff0c;我是菜鸟哥 这个是我们MJ系列的第7篇&#xff0c;以前在会员群里发过&#xff0c;就是把头像做成卡通或者3D的效果还是很酷&#xff0c;或者是迪斯尼风格的。其实非常简单&#xff0c;就是用了一个MJ的以图换图的功能&#xff0c;今天给大家详细的说一下。 前…

ChatGPT 指南:如何与人工智能模型进行对话与互动

人工智能技术的快速发展使得我们能够与智能机器进行对话和互动。 ChatGPT 是一种基于 GPT-3.5 架构的强大语言模型&#xff0c;它能够进行自然语言处理&#xff0c;理解我们的问题并提供相应的回答。本文将为您提供使用 ChatGPT 进行对话和互动的详细指南。 1、提出问题 与 Cha…

Python爬虫之基础知识

爬虫基础知识 一、爬虫的概念 模拟浏览器&#xff0c;发送请求&#xff0c;获取响应 网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff09;就是模拟客户端(主要指浏览器)发送网络请求&#xff0c;接收请求响应&#xff0c;一种按照一定的规则&#xff0c;…

基于springboot+mybatis+mysql+html企业人事管理系统

基于springbootmybatismysqlhtml企业人事管理系统 一、系统介绍二、功能展示1.用户登陆2.员工奖惩--员工3.合同管理--员工4.个人薪酬--员工5.培训管理--员工6.个人绩效--员工7.员工管理&#xff08;管理员&#xff09;8.奖惩管理&#xff08;管理员&#xff09;9.薪酬管理&…

华为OD机试真题B卷 JavaScript 实现【公共子串计算】,附详细解题思路

一、题目描述 给定两个只包含小写字母的字符串&#xff0c;计算两个字符串的最大公共子串的长度。 注&#xff1a;子串的定义指一个字符串删掉其部分前缀和后缀&#xff08;也可以不删&#xff09;后形成的字符串。 二、输入描述 输入两个只包含小写字母的字符串。 三、输…

chatgpt赋能python:Python使用的排大小方式全解析:关于SEO的学习!

Python使用的排大小方式全解析&#xff1a;关于SEO的学习&#xff01; 对于一个Python工程师来说&#xff0c;深度理解编程语言的基础知识总是非常重要的&#xff0c;包括了语法、函数、模块、数据结构以及算法等等。而在SEO领域&#xff0c;Python所采用的排大小方式&#xf…

jdk动态代理和cglb动态代理

目录 概述 JDK动态代理 cglb动态代理 概述 动态代理和静态代理都是代理模式的实现方式&#xff0c;其主要区别在于代理类生成的时机和方式。 静态代理是在编译时就确定了代理类的代码&#xff0c;在程序运行前就已经存在了代理类的class文件。代理类与委托类的关系在编译时就…