Hexo标签插件的使用

2023-10-29

「tag 插件」(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。 例如,在标准 Markdown 语法中,我们无法指定图片的大小。这种情景,我们即可使用标签来解决。 Hexo 内置来许多标签来帮助写作者可以更快的书写, 完整的标签列表 可以参考 Hexo 官网。 另外,Hexo 也开放来接口给主题,使主题有可能提供给写作者更简便的写作方法。

Hexo 标签插件使用

引用块

在文章中插入引言,可包含作者、来源和标题,均可选。

标签方式:使用 blockquote 或者 简写 quote

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

content

代码块

在文章中插入代码,包含指定语言、附加说明和网址,均可选。
标签方式:使用 codeblock 或者 简写 code

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

反引号代码块

```[language] [title] [url] [link text]
code snippet
```

iframe

在文章中插入 iframe。

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

Image

在文章中插入指定大小的图片。

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

Link

在文章中插入链接,并自动给外部链接添加 target="_blank" 属性。

{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的,取决于你在配置文件中 code_dir 的配置。

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

NexT 标签插件使用

文本居中引用

此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用

使用方式

  • HTML方式:直接在 Markdown 文件中编写 HTML 来调用,给 img 添加属性 class="blockquote-center" 即可。
  • 标签方式:使用 centerquote 或者 简写 cq
# HTML方式
<blockquote class="blockquote-center">blah blah blah</blockquote>

# 标签方式
{% centerquote %}blah blah blah{% endcenterquote %}

突破容器宽度限制的图片

当使用此标签引用图片时,图片将自动扩大 26%,并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式(详细参看底下示例):

使用方式

  • HTML方式:直接在 Markdown 文件中编写 HTML 来调用,为 img 添加属性 class="full-image"即可。
  • 标签方式:使用 fullimage 或者 简写 fi, 并传递图片地址、 alttitle 属性即可。 属性之间以逗号分隔。
# HTML方式:
<img src="/image-url" class="full-image" />

# 标签 方式
{% fullimage /image-url, alt, title %}

Note 标签

使用方式

{% note [class] [no-icon] %} 
content (support inline tags too.io).
{% endnote %}

[class]: default | primary | success | info | warning | danger
[no-icon] : 禁用图标

效果如下

Tabs 选项卡

使用方式

{% tabs Unique name, [index] %}
<!-- tab [caption] [@icon] -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3 @paw -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Unique name:选项卡唯一名字
[index]:活动卡索引号
[caption]:标签标题
[@icon]:FontAwesome图标名称

Label 标签

使用方法

{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.

效果如下

Video 标签

{% video https://example.com/sample.mp4 %}

Button 标签

使用 button 或者 简写 btn

{% button url, text, icon [class], [title] %}

url:绝对或相对路径
text, icon:按钮文字或FontAwesome图标
[class]:FontAwesome类:fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
[title]:鼠标悬停时的工具提示

流程图

{% mermaid type%}
{% endmermaid %}

type: 请访问 https://github.com/knsv/mermaid 以获取更多信息

{% mermaid sequenceDiagram %}
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long that the text does not fit on a row.
Bob-->>Alice: Checking with John...
Alice->>John: Yes... John, how are you?
{% endmermaid %}
Alice Bob John Hello Bob, how are you? How about you John? I am good thanks! I am good thanks! Bob thinks a long long time, so long that the text does not fit on a row. Checking with John... Yes... John, how are you? Alice Bob John

图片集

{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}

[group] : 要在组中添加的图片总数
[layout] : 显示组下的默认图片

{% grouppicture 6-3 %}
  ![](/images/github.png)
  ![](/images/github.png)
  ![](/images/github.png)
  ![](/images/github.png)
  ![](/images/github.png)
  ![](/images/github.png)
{% endgrouppicture %}

效果见链接

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Hexo标签插件的使用 的相关文章

  • python 根据索引取值_Python 从列表中取值和取索引的方法

    如下所示 name list zhangsan lisi wangwu 1 取值 print name list 0 print name list 1 print name list 2 2 取索引 print name list ind
  • 北京市经济和信息化局:鼓励布局区块链算力中心

    近日 北京市经济和信息化局印发 北京市数据中心统筹发展实施方案 2021 2023年 的通知 方案提出 鼓励布局人工智能 区块链算力中心 推动形成 4000PFlops 即每秒 4 百亿亿次浮点运算 总算力规模的人工智能公共算力基础设施 重
  • GEN 自动生成 GORM 模型结构体文件及使用示例

    GEN 自动生成 GORM 模型结构体文件及使用示例 背景 GEN 是一个基于 GORM 的安全 ORM 框架 由字节跳动无恒实验室与 GORM 作者联合研发 主要功能说白了就是帮助生成数据表对应的模型文件和更安全方便地执行SQL 直接使用
  • 短链服务架构实践

    1 存储采用REDIS做数据存储 2 id keyword gt long url hset key long url id keyword long url 3 md5 long url gt id keyword hset key sh
  • 队列的实际应用和操作(顺序表)

    题目 利用队列求解报数问题 设有n个人站成一排 从左向右的编号分别为1 n 现在从左往右报数 1 2 1 2 数到 1 的人出列 数到 2 的立即站到队伍的最右端 报数过程反复进行 直到n个人都出列为止 要求给出他们的出列顺序 头文件SqQ
  • 内附源码!使用Python和requests库轻松爬取全国高校排名

    目录 前言 代码实现 总结 前言 中国的大学排名数据比较分散 一些权威机构会发布综合排名 如教育部的 双一流 985 211 计划 还有一些机构会发布专业排名等 因此 具体爬取哪些排名数据可能需要根据实际需要来进行筛选 代码实现 导入req
  • C++ final关键字

    1 禁用继承 C 11中允许将类标记为final 方法时直接在类名称后面使用关键字final 如此 意味着继承该类会导致编译错误 实例如下 class Super final 2 禁用重写 C 中还允许将方法标记为fianal 这意味着无法
  • (小白教学) 用Node.js+Mysql+Express从0搭建实现简单的登录注册

    Node js Express MySql实现用户登录注册 开发工具 vscode git postman 工程目录 数据库表 node搭建过程 首先创建一个为空文件夹server 打开git 初始化一个package json包 npm
  • PointNet学习笔记(一)—— 论文

    PointNet学习笔记 一 论文 本文记录了博主在学习 PointNet Deep Learning on Point Sets for 3D Clasification and Segmentation 过程中的总结笔记 更新于2019
  • linux grpc c++编译安装

    环境信息 1 操作系统 centos7 4 2 g 版本 4 8 5 grpc v1 29 1 版本 源码下载 因为国内现在访问github速度很慢 这里用了代理镜像 git clone b v1 29 1 https hub xn gzu
  • 安装打印机时LPT,COM、USB端口区别

    LPT 并口 LPT是用于使用打印机或其它设备的 LPT并口是一种增强了的双向并行传输接口 在USB接口出现以前是扫描仪 打印机最常用的接口 目前使用滴少 COM 串口 COM端口通常用于连接鼠标及通讯设备 如连接外置式MODEM进行数据通
  • 内网进行spring-boot开发时Jar包依赖的解决

    1 简介 使用Spring Boot可以轻松的创建独立运行的程序 非常容易构建独立的服务组件 是实现分布式架构 微服务架构的利器 Spring Boot简化了第三方包的引用 通过提供的starter 简化了依赖包的配置 1 1 Spring
  • Cisco Packet Tracer配置操作的三种命令模式

    Cisco Packet Tracer三种基本命令模式 这里我们需要讲一下三种命令模式 今后绝大部分操作都通过命令实现 所以需要熟悉命令模式 在路由器命令配置界面中演示 三种命令模式介绍 用户模式 用户模式下可进行的操作较少 我们一般不在用
  • kubeadm init三个master节点遇到的问题

    要创建三个master节点 就不能使用其中一台主机的IP 所以申请了一个VIP地址 kubeadm init apiserver advertise address 0 0 0 0 image repository k8s gcr io c
  • qmake 乱乱乱谈(四)

    继续qmake 本文主题 低调的 TEMPLATE subdirs 非常非常常用的一个东西 可是manual中却介绍的很少 太低调了 在编写包含多可执行文件 库 插件 的程序时 一直不敢相信subdirs的能力 以至于曾一度想转到cmake
  • python三级考什么_什么是计算机三级考试?计算机三级考什么?

    什么是计算机三级考试 计算机三级考什么 2020 04 1118 04 03 来源 上学吧 作者 dengyangjie 全国计算机等级考试 National Computer Rank Examination 简称NCRE 是经原国家教育

随机推荐

  • HTTP POST GET 本质区别详解

    一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式 在FORM提交中 可以通过Method指定提交方式为GET或者POST 默认为GET提交 Http定义了与服务器交互的不同方法 最基本的方法有4种 分别是GET POST PU
  • 硬件工程师修炼的几层境界

    分享一篇文章 觉得写的很好 mark一下 第零层 1 对基础技术有认知 2 模电 数电 电路分析 信号与系统 物理学之电磁学基础 3 基本掌握焊接 电路设计软件 示波器使用 万用表等基础仪器仪表的使用 第一层 1 精力主要花在学习原理图工具
  • Windows 7 下 vs2010内存泄漏检测工具VLD的使用

    1 环境和软件 Windows7 32位系统 Visual Studio 2012 旗舰版 vld 2 2 3 setup exe 大小1 04M 2 步骤 1 下载安装 下载好 vld 2 2 3 setup exe 大小1 04M 并安
  • CentOS 7.9 使用rpm包安装MySQL-5.7.43

    参考 refman 5 7 pdf 2 5 5 Installing MySQL on Linux Using RPM Packages from Oracle 前期准备 1 防火墙端口检查与设置 检查防火墙状态 systemctl sta
  • 买服务器做网站 镜像选什么,云服务器做网站镜像类型选啥

    云服务器做网站镜像类型选啥 内容精选 换一换 创建一台或多台云服务器 V1 1版本创建云服务器的接口兼容了V1版本创建云服务器 按需 的功能 同时合入新功能 支持创建包年 包月的弹性云服务器 本接口为异步接口 当前创建云服务器请求下发成功后
  • 【Golang

    环境准备 GoLang go1 15 7 windows amd64 Docker 1 13 1 MySQL 8 0 28 一 利用容器部署mysql 1 首先通过docker pull mysql拉取mysql镜像 root k8s ma
  • Jetty篇一之初识Jetty

    前言 最近公司项目中用到了Jetty来作为项目的web容器 借此机会来分享一下我的学习心得 在学习Jetty之前 一定要了解一些Jetty的基本概念以及优缺点 这样才方便做更深入的学习 现在让我来慢慢揭开它的神秘面纱吧 基础 什么是Jett
  • 大数据模型案例库-涵盖多行业,超百个实战项目案例

    平台目前积累了大量的人工智能应用模型 不仅包括多年来人工智能企业服务方面的沉淀 还包括大量其他企业的真实项目应用模型 以及高校智能工作室成果模型 覆盖教育 医疗 交通 金融 科技 农业等18个行业 平台面向高校 企业 个人等广大用户群体 所
  • Candence原理图误删图页并保存退出后的恢复方法

    一早打开Candence准备工作 发现原理图少了几页 心里很慌 昨晚在画PCB的时候设置按了几次Delete键 没有反应 可能删了原理图 关闭的时候也没有看 直接保存退出了 看了之前拷贝备份的文件 时间有点久 那只能靠软件的自动备份功能了
  • C语言进阶(九)—— 函数指针和回调函数、预处理、动态库和静态库的使用、递归函数

    1 函数指针 1 1 函数类型 通过什么来区分两个不同的函数 一个函数在编译时被分配一个入口地址 这个地址就称为函数的指针 函数名代表函数的入口地址 函数三要素 名称 参数 返回值 C语言中的函数有自己特定的类型 c语言中通过typedef
  • 学习笔记-选择排序

    选择排序 将一个一维数组从小到大排序 思路 选择排序的思路是 首先认为数组的第一个数是最小的 保留它然后遍历它后面的数 跟它作比较 选择出最小的数和位置 遍历结束后 让这个最小的数和数组的第一位数交换 这样确定了第一个最小的数 之后重复这个
  • Unity AR阴影投射透明地面 仅渲染模型实时阴影 Shader实现

    亲测可用 上面就是实现的效果 仅仅渲染阴影 地面透明 也可以换成AR中的虚拟物体 AR中为的虚拟物体添加阴影 只用unity的光照投影是没办法实现的 或者需求是 角色需要投射阴影在墙上 但是墙不能显示 只渲染出阴影 相当于接受阴影的地面墙体
  • 吊打 CLIP 平均10个点,Meta 多模态通用模型 FLAVA真香啊

    厉害了 作者将单一模型运用于三个不同领域的不同任务 结构简单且训练直观 还能有着出色的表现 自Transformer横空出世 从NLP到CV 再到今天的多模态 无数基于Transformer的模型被应用于各类任务 似乎真的印证了当年文章的标
  • ldd not a dynamic executable

    在开发环境编译运行很ok的程序 到了客户的生产环境一直有问题 编译找不到库 类似这个样子 usr bin ld skipping incompatible lib libasound so when searching for lasoun
  • EXCEL-VBA:Workbooks.Open 参数 (打开文件)

    打开一个工作簿 语法 表达式 Open FileName UpdateLinks ReadOnly Format Password WriteResPassword IgnoreReadOnlyRecommended Origin Deli
  • UE5导入倾斜摄影

    前言 虚幻引擎是全球最先进的实时3D创作工具 可制作照片级逼真的视觉效果和沉浸式体验 2022年4月5号虚幻引擎发布了颠覆性的UE5 倾斜摄影是城市实景的基础 通过无人机采集实际照片再进行三维重建 常见的数据格式为osgb 本文主要介绍UE
  • JSP自定义标签的(生命周期与开发if,foreach,out)

    自定义标签定义 是用户定义的JSP语言元素 扩展名为tld的文件 tag标签的配置文件 通常放在WEB INF下面 自定义标签的开发及使用步骤 思路 1 1 创建一个标签助手类 继承BodyTagSupport 标签属性必须助手类的属性对应
  • 测试自动化平台

    https mp weixin qq com s WU5h8FW6BT5YZtlsSuCIcw 摘要 随着近几年国内IT行业高速发展 对测试工程师的要求也越来越高 其作用也越来越重要 但很多测试工程师也迎来了个人发展的瓶颈 下一步该向哪个方
  • clock的accuracy(tolerance)和jitter

    对于clock来说 有两个参数来衡量质量 分别是jitter和accuracy tolerance Jitter的单位是ps Tolerance的单位是ppm 百万分之 在晶振 RTC和Oscillator中也会找到类似参数 SOC和MCU
  • Hexo标签插件的使用

    tag 插件 Tag Plugin 是 Hexo 提供的一种快速生成特定内容的方式 例如 在标准 Markdown 语法中 我们无法指定图片的大小 这种情景 我们即可使用标签来解决 Hexo 内置来许多标签来帮助写作者可以更快的书写 完整的