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

2023-11-15

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 %}

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

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

  • hexo next 博客,jsdelivr cdn报错无法访问

    一 博客环境 我的hexo版本是5 4 0 xff0c next版本是7 8 0 因 jsdelivr cdn报错导致博客首页无法访问 二 修改next cdn 首先进入hexo博客首页 xff0c F12查看报错的 jsdelivr 地址
  • hexo stellar博客设置Twikoo评论(使用Zeabur 部署)

    2023年7月24日更新 需要绑定一下支付宝 每个月大约4块钱 还算对学生党划算 否则可能无法使用免费的服务 说是免费额度结果还是要钱鸭 这里按要求开通就好了 主要参考 stellar 评论插件配置 Twikoo 这里使用的是Twikoo
  • 【MindSpore】一种参数归一化实现方式

    1 功能描述 MindSpore实现WeightNorm参数归一化 2 实现分析 在MindSpore实现高性能方案 建议采用图模式 同时也能保证动静统一 MindSpore图模式需要把归一化操作表达到整图里 可以采用自定义的方式在网络结构
  • hexo博客主题diaspora的gitalk配置(多图预警)

    前提 已装好git hexo环境 首先 在github上注册 如下图所示 进入设置 开发者设置 新建OAuth App 注册 注册完成 注意事项均在图中标出 现在完成了第一步 然后去主题页下载主题 也可以在你的hexo文件夹下右键打开git
  • 将hexo自定义域名升级https

    原文转载自我的博客https benym cn 前言 Tips 有什么问题可以在下方留言板留言哦 留下自己的邮箱 可以保证快速回复 最近在折腾博客 发现github上很多人说个人博客支持https很重要 原本的github io域名本来支持
  • Hexo博客开发之——七牛云图片批量下载

    一 前言 基于hexo Github搭建的静态博客 图片等资源的存储是一个问题 之前考虑过图片保存本地文件夹 图床 qiniu 微博 等 但是七牛存储的图片会有一些问题 使得我不得不考虑领寻图片等资源的存储问题 1 1 七牛图片存储的问题
  • Hexo

    前言 搭建博客两个必要条件 博客框架 托管平台 这里框架我们采用Hexo 而平台大部分人会选择GitHub 这里我选择的是Gitee 属于国内的代码托管平台 相比于GitHub来说 访问速度更快 更稳定 环境要求 Git Nodejs 安装
  • 2021——使用hexo+github搭建个人博客

    文章目录 一 必备软件安装 二 hexo本地搭建博客 2 1 本地生成博客内容 2 2 文章写作 自动摘录 2 3 博客发布到网上 2 3 1 配置主题模板 2 3 2 配置自己的远程仓库地址 2 3 3 发布github博客 2 4 主题
  • hexo搭建博客-butterfly主题详细版

    Hexo搭建博客 butterfly主题 前置知识 对于Github和Gitee的基本了解与使用 最关键的是你要知道github为什么访问的这么慢 如何魔法上网访问github 或者说不用魔法如何访问github 本文在可能遇到的问题说明了
  • SO、SOP、SOIC、MSOP、TSSOP、TSOP、VSSOP、SSOP、SOJ封装详解

    1 简要信息如下 2 SOP和SOIC的规格多是类似的 现在大多数厂商基本都采用的是SOIC的描述 SOIC8有窄体150mil的 外形封装宽度 不含管脚 下同 管脚间距是1 27mm 如下 有宽体的208mil的 管脚间距是1 27mm
  • 执行hexo d部署到github出错

    我的github已经配置了ssh key 并且执行 ssh T git github com能连接到github 但是在我执行hexo d想要将博客部署到github却出错了 利用http localhost 4000 访问本地发现已经部署
  • Windows下,Hexo+GitHub搭建博客

    一 注册GitHub账号 二 创建GitHub仓库 创建git仓库时候 仓库的名称有格式要求 例如我的GitHub仓库用户名是thinkerwalker 那么我创建的仓库名称就是thinkerwalker github io 此处的警告是因
  • 【Hexo themes】【闪烁之狐 Matery】【简】

    文章目录 1 Down 2 修改Hexo配置文件 3 预览 4 部署更新 Summary Reference 个性化 PS 上午在 Hexo themes找了一些主题 有的太简单 可以配置的功能少 有些太复杂 以up现有能力要调一会才能开通
  • Hexo一些实用的插件

    Hexo的插件真是个好东西 一开始部署博客的时候并没有太在意插件的问题 毕竟觉得博客主题自带的插件挺全面的 足够使用了 但是用久了总是会腻 就想着静态博客能不能整一些新操作 即使只是添加点小功能 于是就翻了翻 Hexo 的插件目录 挑了些比
  • 10x倍加速PDE的AI求解:元自动解码器求解参数化偏微分方程

    研究背景 科学和工程中的许多应用需要求解具有不同方程系数 不同边界条件甚至不同求解域形状的偏微分方程 Partial Differential Equation PDE 即需要求解一个方程族而不是单个方程 这类应用经常在反问题求解 控制和优
  • 约束下的最优求解:拉格朗日乘数法和KKT条件

    机器学习面对各种各样的求解极值或者最值问题 现在对常见的求解极值或者最值问题思路做一下理论上的梳理 最值问题 简单了解最值问题 求最值是非常常见的问题 比如如何选择交通路线 最快地到达某地 如何用手头的钱买到分量最重的水果等等 我们可以把需
  • 使用Hexo 配置自己的博客

    安装前提 在Windows下可以到git官网 推荐使用代理 或者对应的镜像网站进行下载 安装git客户端 安装node js 使用git bash 安装 cURL curl https raw github com creationix n
  • hexo+GitHub Pages一键搭建部署博客

    文章目录 前言 博客相关配置 matery主题相关配置 1 什么是 Hexo 2 准备工作 3 生成博客 4 更换主题 5 部署到github pages 总结 前言 现在技术更新迭代是非常的快 尤其是web方面 所以当前搭建一个博客差不多
  • hexo博客文章置顶功能实现的两种方法

    写在前面 本文主要描述了如何实现hexo文章置顶功能 讲述了通过修改源码和通过更改插件两种方式实现 以及如何添加置顶显示 文章可能还有很多不足 请大家谅解 欢迎大佬提意见 本文使用的东西 win10电脑 hexo 4 0 0 文章目录 写在
  • 如何为 Hexo 实现选项卡式代码块标签

    我正在尝试在 hexo 中创建选项卡式代码块 作为标签插件 但我不知道在哪里放置我的 js 函数 我想我可以使用加载该函数js 助手 https hexo io api helper html但我不知道在哪里包含助手 我尝试将其添加到标签插

随机推荐