基于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遇到报错ERROR Deployer not found: git的解决办法

    部署hexo遇到报错ERROR Deployer not found git的解决办法 今天部署hexo的时候遇到一个报错 hexo c span class token operator amp amp span hexo g span
  • npm install hexo-renderer-sass时报错解决办法

    npm install hexo renderer sass时报错 在安装配置hexo博客的时候 xff0c 有的主题需要安装 span class token function npm span span class token func
  • 利用Github和Hexo搭建自己的博客

    之前的自己搭的服务器gg了 xff0c 一直也没动手继续去恢复一下 xff0c 前段时间看操作系统教程的时候被NEXT这个主题吸引了 xff0c 再次萌生了整个博客的想法 之前就有听说过Github可以搭博客 xff0c 所以这次也打算试一
  • hexo更换主题后出现问题:WARN No layout: index.html

    hexo更换主题后出现问题 WARN No layout index html hexo本地测试运行重启后页面空白 hexo g出现以上错误 错误原因 运行git clone 指令获得主题后 假设是NEXT主题 在theme主题下保存文件夹
  • hexo配置GitHub/gitee双部署

    我的博客主页 https qingmuzhang gitee io GitHub作为国外站点实在是比较慢也不太稳定 所以决定把博客搬到国内的gitee上 提高访问速度 gitee创建仓库 1 首先登录gitee https gitee co
  • hexo博客主题diaspora的gitalk配置(多图预警)

    前提 已装好git hexo环境 首先 在github上注册 如下图所示 进入设置 开发者设置 新建OAuth App 注册 注册完成 注意事项均在图中标出 现在完成了第一步 然后去主题页下载主题 也可以在你的hexo文件夹下右键打开git
  • Mac下使用GitHub+Hexo搭建个人博客

    首发链接 开始之前需要在电脑上安装好Git和node js Mac上可以使用Homebrew命令行工具来安装Git和node js 安装Homebrew 在命令行工具输入以下命令 如果已经安装过Homebrew可以忽略 usr bin ru
  • Butterfly 最新评论 newest-comments 401/资源加载错误(无法获取资料,请确认相关配置是否正确)

    集成 Butterfly 博客主题中 在配置最新评论 newest comments 时 根据 Butterfly 的配置文档配置完成后 最新评论一直无法显示 提示错误信息 无法获取资料 请确认相关配置是否正确 在网页调试模式下 给出的错误
  • 在hexo中使用mathjax的方法

    欢迎光临我的个人主页 之前总是使用mathtype写公式然后再上传图片 速度太慢了 而且公式出错后不容易修改 所以开始用mathjax 但是原生hexo并不能直接渲染mathjax 查阅资料总结了一波 只需五步 可以先换成淘宝的下载源 增加
  • 解决运行Hexo报错hexo : 无法加载文件hexo.ps1,因为在此系统上禁止运行脚本

    项目描述 使用如下命令安装 Hexo 后运行报错 npm install hexo cli g 问题描述 PS C Users 87897 Desktop xavierjiezou github io gt hexo s hexo 无法加载
  • 将hexo自定义域名升级https

    原文转载自我的博客https benym cn 前言 Tips 有什么问题可以在下方留言板留言哦 留下自己的邮箱 可以保证快速回复 最近在折腾博客 发现github上很多人说个人博客支持https很重要 原本的github io域名本来支持
  • Hexo+next主题美化静态博客

    前言 需要在Hexo下配置next主题 Hexo配置next主题教程 点我跳转 更改配置以后使用素质三连 hexo clean hexo g hexo s即可本地看到效果 hexo clean hexo g hexo s 注 部分参考自互联
  • Hexo博客优化之Next主题美化

    前言 有了前面几篇博客的介绍 我们就可以很容易的搭建并编辑我们的博客了 不过既然是属于自己的博客网站 自然也就想让其更加美观 更有意思 所以呢我下面介绍一下Hexo博客的主题美化操作 1 Next主题 Hexo博客支持很多主题风格 其中Ne
  • 使用hexo搭建个人博客 在Github上一键部署

    文章目录 一 初步搭建本地Hexo博客 1 安装 安装前提 安装 Hexo 2 建站 生成项目 运行项目 二 更换博客主题 hexo theme matery 1 下载 2 更换主题 3 更换中文 4 修改主题项中的配置 新建分类 cate
  • hexo主题标签的使用

    https akilar top posts 615e2dec 这个是我看的教程 我直接复制的源码 友情链接 LrcShare 实现hexo标签的可以折叠 hexo标签的使用方法 要实现Hexo标签的可折叠 可以使用Hexo内置的foldi
  • 执行hexo d部署到github出错

    我的github已经配置了ssh key 并且执行 ssh T git github com能连接到github 但是在我执行hexo d想要将博客部署到github却出错了 利用http localhost 4000 访问本地发现已经部署
  • 【Hexo themes】【闪烁之狐 Matery】【简】

    文章目录 1 Down 2 修改Hexo配置文件 3 预览 4 部署更新 Summary Reference 个性化 PS 上午在 Hexo themes找了一些主题 有的太简单 可以配置的功能少 有些太复杂 以up现有能力要调一会才能开通
  • 项目经验分享:基于昇思MindSpore实现手写汉字识别

    项目信息Program Info 项目要求 基于MindSpore的实现在线手写汉字识别 主要包括手写汉字检测和手写汉字识别 能较准确的对标准字体的手写文字进行识别 识别后通过人工干预对文本进行适当修正 需要有一定的创新特性 代码达到合入社
  • Hash 函数及其重要性

    不时会爆出网站的服务器和数据库被盗取 考虑到这点 就要确保用户一些敏感数据 例如密码 的安全性 今天 我们要学的是 hash 背后的基础知识 以及如何用它来保护你的 web 应用的密码 申明 密码学是非常复杂的一门学科 我不是这方面的专家
  • hexo博客搭建-背景知识(二)

    yum与rpm的区别 rpm适用于所有环境 而yum要搭建本地yum源才可以使用 yum是上层管理工具 自动解决依赖性 而rpm是底层管理工具 gcc cc c g 命令行详解 gcc包含的c c 编译器 gcc cc c g gcc和cc

随机推荐