6.Hexo标签插件和资产文件夹

标签插件

标签插件,基本上是只是一些小的代码片段,可以将他们添加到markdown文件中
以便添加特定的代码,不需要编写复杂或混乱的HTML

当很多时候想要在markdown页面添加一些特殊元素,通常必须使用HTML
如果不想这么用HTML,或者是不知道怎么去用,或者只是不想弄乱markdown文件

所以标签插件就是放在markdown文件中的小代码片段,它们会呈现更复杂的内容

Tag Plugins | Hexo
打开Hexo官方文档,在标签插件页面
这里列出了可以使用的所有插件
![[Pasted image 20240413163723.png]]

这些是代码块标签插件
如果在写博客,想要一些代码示例,可以使用代码块标签插件,轻松地将代码添加到博客中并使其风格化

添加代码的方式是使用标签插件
将标签插件添加到网站中的方式是

输入左右大括号,两个百分号,在百分号中间键入标签插件的名称
比如codeblock
有两种类型的代码块
![[Pasted image 20240413161711.png]]

单标签代码块
如果使用单标签代码块,只需要一个标签
双标签代码块
![[Pasted image 20240413161719.png]]

需要一个结束的标签
通过输入end和代码块的名称来编写结束标记

在这个代码块内,可以添加任何文本将其表现为代码的格式
比如一些JavaScript文本
![[Pasted image 20240413161955.png]]

当刷新Hexo页面
这些代码块内的文本被渲染为代码
![[Pasted image 20240413162101.png]]

以程式化的方式渲染

所以要做的就是包含codeblock这个代码插件
然后里面的所有文本都会自动开始渲染

正常情况下如果想要添加这样的代码内容,必须使用HTML和CSS
但是在Hexo里只需要将这个代码插件插入到文件当中,它就会自动工作

使用标签插件,除了只是使用它们的名称和调用它们之外,还可以向它们传递不同的参数
可以将特定值传递给标签插件,它可以用该值来改变内容的呈现方式

比如可以使用lang属性
输入正在使用的编程语言
![[Pasted image 20240413162837.png]]

Hexo会使用这个信息,会对这里的代码进行样式化
![[Pasted image 20240413163540.png]]

括号里的文本会显示不同的颜色,变量关键字也是不同的颜色,

许多标签插件将采用必需或可选的参数,可以增加功能或只是改进标签插件的外观和呈现内容的方式

还有很多其他插件,可以在网站页面添加图片或视频

资产文件夹

hexo中的asset文件夹
在Hexo中基本上是一种用于存储与每篇博客文章相关的静态资源
如果有一篇博客文章,想在文章中使用图片或者是一个可以让用户下载的PDF
可以将所有这些静态资源放入asset文件夹中
然后就可以在markdown文件上访问这些静态资源

为了使用asset文件夹
![[Pasted image 20240413164556.png]]

需要打开config.yml文件,找到写作部分,有一个post_asset_folder,默认是false,要将它设置为true
![[Pasted image 20240413164619.png]]

保存config文件

为了创建一个asset文件夹,首先需要创建一个新的内容
post文件g
![[Pasted image 20240413164819.png]]

会发现这次创建了两个东西,一个g.md文件,还有一个g文件夹
这个g文件夹就是asset文件夹
可以在这里存储所有想要用于此md文件的任何静态资源

比如可以放入一个png文件
![[Pasted image 20240413165142.png]]

1.

要做的就是输入一组特殊的Hexo代码

{% asset_img g.png %}

意思是
进入asset文件夹,获取一个名为g.png的文件
因为是asset_img,所以将在HTML中显示该图像
![[Pasted image 20240413165824.png]]

在主页上显示的g.md文件,里面有刚刚插入的图片

同样也可以传递参数

{% asset_img g.png Hatsune Miku %}

这样可以输入该图像的标题,会显示在图片的下方
![[Pasted image 20240413170530.png]]

2.

也可以输入其它命令

{% asset_link g.png "Hatsune Miku" %}

如asset link,这样会在网站上显示一个链接
![[Pasted image 20240413170603.png]]

这个链接只是链接到asset文件夹,链接到图像文件
![[Pasted image 20240413170714.png]]

在URL中可以看到日期名字和图像

3.
{% asset_path g.png "Hatsune Miku" %}

还可以输入图像路径
这样不会直接链接到文件,而是提供该图像所在的路径
可以输入到URL中打开图像

基本上这些命令只允许访问asset文件夹里面的资源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813422.shtml

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

相关文章

CSS特效---百分比加载特效

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title&…

公众号文章如何添加多个附件?

在公众号分享一些文档给粉丝下载&#xff0c;有那么几种方式。比如把文档转成超链接&#xff0c;放在公众号的“阅读原文”处&#xff0c;或者把文件转成二维码&#xff0c;贴在公众号文章里面。这两种方式其实都需要先把文件转成超链接&#xff08;网页链接&#xff09;&#…

开发需求15-使用el-checkbox组件实现el-tree组件的父子关联关系(非全选/全不选)

需求描述: 大家都知道el-tree可以很明显的通过选中来体现上下节点的父子选中状态,那么如果要求把后端把el-tree的数据结构,通过一个展开的list返回给你,使用el-checkbox组件渲染每一个节点,同时要求选中某一个节点,同时可以选中其父节点和子节点;取消也是一样。 思路:…

【目标检测数据集】VOC2007 数据集介绍

一、介绍 VOC 数据是 PASCAL VOC Challenge 用到的数据集&#xff0c;官网&#xff1a;http://host.robots.ox.ac.uk/pascal/VOC/ 备注&#xff1a;VOC数据集常用的均值为&#xff1a;mean_RGB(122.67891434, 116.66876762, 104.00698793) Pytorch 上通用的数据集的归一化指…

OVITO-2.9版本

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…

岛屿个数(dfs)

[第十四届蓝桥杯省B 岛屿个数] 小蓝得到了一副大小为 M N MN MN 的格子地图&#xff0c;可以将其视作一个只包含字符 0 0 0&#xff08;代表海水&#xff09;和 1 1 1&#xff08;代表陆地&#xff09;的二维数组&#xff0c;地图之外可以视作全部是海水&#xff0c;每个岛…

C++递推算法

位数问题 #include<bits/stdc.h> using namespace std; void f(int); int a[100][100]; int b[100][100]; int n; int main() {cin>>n;long long x0;for(int i1;i<n;i){xx*10;}long long y0;long long tx;for(int i1;i<n;i){yyt*9;tt/10;}int sum0;int summ…

守护数据安全:如何应对.360、.halo勒索病毒的攻击

尊敬的读者&#xff1a; 近年来&#xff0c;网络安全问题日益严重&#xff0c;各种病毒、木马、勒索软件层出不穷。其中&#xff0c;.360、.halo勒索病毒因其独特的传播方式和恶意行为而备受关注。本文将对该病毒进行深入剖析&#xff0c;并提出相应的应对策略&#xff0c;帮助…

蓝桥杯易错点汇总

1.当想输入一个数字再输入一个字符串要多一个nextLine(); int a scan.nextInt(); String b scan.nextLine(); 在Java编程语言中&#xff0c;使用Scanner类进行输入时&#xff0c;需要注意nextInt()和nextLine()方法的使用。nextInt()用于读取下一个整数&#xff0c;而nextLi…

基于SSM+Vue的宠物销售系统设计与实现

附录,系统运行视频 一、引言 随着互联网的快速发展,电子商务已经成为人们日常生活中不可或缺的一部分。在这个背景下,宠物销售系统应运而生,为宠物爱好者提供了一个便捷、高效的在线购买、领养宠物的平台。本文旨在介绍一个基于SSM(Spring+SpringMVC+MyBatis)框架和Vue…

系统架构最佳实践 -- 一般优惠券平台系统架构设计

优惠券是商城的一种基础的营销工具&#xff0c;在目前c端用户对于电子优惠券已经非常熟悉的情况下&#xff0c;一般自营商城的营销活动系统&#xff0c;都是从优惠券开始搭建。 一、名词定义 基于个人理解&#xff0c;为方便表述&#xff0c;首先对可能产生歧义的名词进行如下…

ubuntu 设置 root 用户密码,创建新用户并赋权限

ubuntu 设置 root 用户密码&#xff0c;创建新用户并赋权限 在适用于 Linux 的 Windows 子系统上运行 Linux GUI 应用&#xff0c; 安装 Ubuntu-20.04 系统&#xff0c;新安装好的系统&#xff0c;设置用户名密码时&#xff0c; root 用户密码默认为空&#xff0c;这时需要设置…

Windows 基于yaml-cpp库的安装与使用【附C++读写.yaml配置文件教程代码】

目录 0 三方库介绍1 源码下载2 源码编译2.1 解压源码资源包2.2 新建build文件夹2.3 使用CMake编译源码2.4 设置编译环境2.5 开始生成工程2.6 打开工程2.7 查看文件2.8 整理文件3 测试示例(读写yaml配置文件)0 三方库介绍 yaml-cpp库 是一个功能强大的 C++ 库,用于处理 YAML …

软件可靠性评价

1.软件可靠性评价概述 软件可靠性评价是软件可靠性活动的重要组成部分&#xff0c;既适用于软件开发过程&#xff0c;也可针对最终软件系统。在软件开发过程中使用软件可靠性评价&#xff0c;可以使用软件可靠性模型&#xff0c;估计软件当前的可靠性&#xff0c;以确认是否可以…

信息学奥赛一本通T1442-小木棍【dfs】

信息学奥赛一本通T1442-小木棍 - C语言网 (dotcpp.com) #include <iostream> #include <algorithm> #include <cmath> #include <cstring> using namespace std; const int N1e5100; int n; int res1e9; int a[N],p0,sd0; bool vis[N]; bool dfs(int i…

【R语言】绘制标准地图(指北针,比例尺,图例)

在绘制地图时&#xff0c;我们一般都是利用“ArcGIS”"MapGIS"等专业软件进行手动操作。这样制作的地图自定义的效果强&#xff0c;我们可以随意调换地图的各种元素&#xff0c;但是今天本文要将的是如何使用R语言绘制具备地图三要素的精美地图&#xff0c;当然代码绘…

中非贸易 一路带一路 SPS

中非贸易是指中国与非洲各国之间的贸易往来&#xff0c;涉及商品和服务的进出口。随着中国经济的快速发展和对外合作战略的实施&#xff0c;中国与非洲的经贸联系日益增强&#xff0c;尤其在“一带一路”倡议框架下&#xff0c;中非贸易合作得到了进一步的深化和拓展。 “一带…

C# WPF故障记录

1&#xff0c;ComboBox初始更新问题 问题描述:初始化时&#xff0c;设置了SelectIndex,但是尚未正常显示 解决办法&#xff1a;IsEditable"False" 2&#xff0c;Window中创建的Task无法正常退出问题 问题描述:在Window界面文件中添加了Task&#xff0c;但是关闭窗…

Android 14.0 SystemUI修改状态栏电池图标样式为横屏显示

1.概述 在14.0的系统rom产品定制化开发中,对于原生系统中SystemUId 状态栏的电池图标是竖着显示的,一般手机的电池图标都是横屏显示的 可以觉得样式挺不错的,所以由于产品开发要求电池图标横着显示和手机的样式一样,所以就得重新更换SystemUI状态栏的电池样式了 如图: 2.S…

volatile是如何禁止指令进行重排序的

Further Reading &#xff1a; 内存屏障类型介绍&#xff08;StoreStore&#xff0c;StoreLoad&#xff0c;LoadLoad&#xff0c;LoadStore&#xff09; Further Reading &#xff1a; 什么是指令重排 重排序分为编译器重排序和处理器重排序。 为了实现volatile内存语义&#x…