Hexo bamboo主题配置(二)

2024-01-02 18:10
文章标签 配置 hexo 主题 bamboo

本文主要是介绍Hexo bamboo主题配置(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Hexo bamboo主题配置(二)

本文内容出自 yuang01 如需了解更多可查看 https://hexo-theme-bamboo.netlify.app/

文本高亮pbg

在这里插入图片描述

这是一个简单的文字{% pbg yellow, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg info, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg warning, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg danger, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg success, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg red, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg green, 我是一个文本高亮 %},唱着我们心肠的曲折 
这是一个简单的文字{% pbg blue, 我是一个文本高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% pbg cyan, 我是一个文本高亮 %},唱着我们心肠的曲折

site-card

在这里插入图片描述

{% sitegroup %}{% site 木兮, url=http://www.baidu.com, screenshot=https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg, avatar=https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg, description=这是描述 %}{% site yuang01, url=https://yuang01.gitee.io/, screenshot=https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg, avatar=https://pic3.zhimg.com/80/v2-8bb491487280587026cd576b224ca91e_1440w.jpg, description=这是描述哦 %}{% site 木兮, url=http://www.baidu.com, screenshot=https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg, avatar=https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg, description=这是描述 %}{% site yuang01, url=https://yuang01.gitee.io/, screenshot=https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg, avatar=https://pic3.zhimg.com/80/v2-8bb491487280587026cd576b224ca91e_1440w.jpg, description=这是描述哦 %}{% site 木兮, url=http://www.baidu.com, screenshot=https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg, avatar=https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg, description=这是描述 %}
{% endsitegroup %}

tab标签

在这里插入图片描述

{% tabs tab-id %}<!-- tab 栏目1 -->。。。<!-- endtab --><!-- tab 栏目2 -->!!!<!-- endtab -->{% endtabs %}

span文字颜色

在这里插入图片描述

这是一个简单的文字{% span yellow, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span primary, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span info, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span warning, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span danger, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span success, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span red, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span green, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span blue, 我是一个文字高亮 %},唱着我们心肠的曲折
{% span center green, 我是一个居中文字高亮 %}
这是一个简单的文字{% span large, 我是一个文字高亮 %},唱着我们心肠的曲折
这是一个简单的文字{% span small danger, 我是一个文字高亮 %},唱着我们心肠的曲折

timeline时间线

在这里插入图片描述

{% timeline %}{% timenode 2021-01-01 [1.0.3 -> 1.0.3](https://github.com/yuang01/hexo-theme-bamboo) %}1. 我是一个测试文字`ghghgh`2. 我是一个测试问题二'qweqw',请问企鹅请问请问佛挡杀`fgfgf`佛第三节课。
2. 我是一个测试问题三'fgfgfg',请问企鹅请问请问佛挡杀`trtrtr`佛第三节课。{% endtimenode %}{% timenode 2020-08-15 [1.0.2 -> 1.0.2](https://github.com/yuang01/hexo-theme-bamboo) %}这是一段测试文字{% endtimenode %}{% timenode 2020-08-08 [1.0.0 -> 1.0.0](https://github.com/yuang01/hexo-theme-bamboo) %}1. 我是一个测试文字`ghghgh`2. 我是一个测试问题二'qweqw',请问企鹅请问请问佛挡杀`fgfgf`佛第三节课。
2. 我是一个测试问题三'fgfgfg',请问企鹅请问请问佛挡杀`trtrtr`佛第三节课。
{% endtimenode %}{% endtimeline %}

Text文本样式标签

在这里插入图片描述

{% title h2, Text文本样式标签演示 %}{% u 下划线 %} 的文本带 {% emp 着重号 %} 的文本带 {% wavy 波浪线 %} 的文本带 {% del 删除线 %} 的文本键盘样式的文本 {% kbd command %} + {% kbd D %}密码样式的文本:{% psw 这里没有验证码 %}

video视频

{% title h2, video演示 %}
100%宽度
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}50%宽度
{% videos, 2 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% endvideos %}25%宽度
{% videos, 4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% endvideos %}

title标题

在这里插入图片描述

{% title h1, 我是标题 %}你好啊,未来越来越好哦{% title h2, 我是标题 %}你好啊,加油哦{% title h2, 我是标题, warning %}{% title h2, 我是标题, red %}

在这里插入图片描述

{% titleB h2, 我是标题bbb %}
{% titleB h2, 我是标题bbb, #895546 %}
{% titleB h2, 我是标题bbb, red %}

NoteBlock标签

在这里插入图片描述

{% noteblock base, 标题(可选) %}asdsd
{% endnoteblock %}{% noteblock quote, 标题(可选) %}asdsd
{% endnoteblock %}{% noteblock warning, 标题(可选) %}asdsd
{% endnoteblock %}{% noteblock success, 标题(可选) %}asdsd
{% endnoteblock %}{% noteblock danger, 标题(可选) %}asdsd
{% endnoteblock %}{% noteblock info, 标题(可选) %}asdsd
{% endnoteblock %}

进度条

条形进度条

在这里插入图片描述

{% progress 70 danger 进度条测试 %}
{% progress 60 info 进度条测试 %}
{% progress 60 success 进度条测试 %}
{% progress 60 warning 进度条测试 %}
{% progress 60 primary 进度条测试 %}
自定义颜色(Custom colors)
{% progress 60 #000 进度条测试 %}
{% progress 60 #2f54eb 进度条测试 %}

圆形进度条

在这里插入图片描述

{% progressCircle 70 danger 进度条测试 %}
{% progressCircle 80 info 进度条测试 %}
{% progressCircle 60 success 进度条测试 %}
{% progressCircle 50 warning 进度条测试 %}
{% progressCircle 90 primary 进度条测试 %}
自定义颜色(Custom colors)
{% progressCircle 70 #12e9e9 70% %}
{% progressCircle 70 skyblue 70% %}

大家也可以关注我的 个人博客,和csdn是同步的,我会持续更新的,感谢大家支持~

这篇关于Hexo bamboo主题配置(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/563260

相关文章

mybatis映射器配置小结

《mybatis映射器配置小结》本文详解MyBatis映射器配置,重点讲解字段映射的三种解决方案(别名、自动驼峰映射、resultMap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定... 目录select中字段的映射问题使用SQL语句中的别名功能使用mapUnderscoreToCame

Linux下MySQL数据库定时备份脚本与Crontab配置教学

《Linux下MySQL数据库定时备份脚本与Crontab配置教学》在生产环境中,数据库是核心资产之一,定期备份数据库可以有效防止意外数据丢失,本文将分享一份MySQL定时备份脚本,并讲解如何通过cr... 目录备份脚本详解脚本功能说明授权与可执行权限使用 Crontab 定时执行编辑 Crontab添加定

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础(单文件 YAML 版)(一)配置原理与优势(二)实操示例二、多环境开发多文件版

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略(长度8、含数字/字母/特殊字符),支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件:validate_password2.密码策略级

ShardingProxy读写分离之原理、配置与实践过程

《ShardingProxy读写分离之原理、配置与实践过程》ShardingProxy是ApacheShardingSphere的数据库中间件,通过三层架构实现读写分离,解决高并发场景下数据库性能瓶... 目录一、ShardingProxy技术定位与读写分离核心价值1.1 技术定位1.2 读写分离核心价值二

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景:qt5.12.12+vs2022一、症状:二、原因:(可以跳过,直奔后面的解决方法)三、解决方

SpringBoot路径映射配置的实现步骤

《SpringBoot路径映射配置的实现步骤》本文介绍了如何在SpringBoot项目中配置路径映射,使得除static目录外的资源可被访问,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一... 目录SpringBoot路径映射补:springboot 配置虚拟路径映射 @RequestMapp

Nginx中配置使用非默认80端口进行服务的完整指南

《Nginx中配置使用非默认80端口进行服务的完整指南》在实际生产环境中,我们经常需要将Nginx配置在其他端口上运行,本文将详细介绍如何在Nginx中配置使用非默认端口进行服务,希望对大家有所帮助... 目录一、为什么需要使用非默认端口二、配置Nginx使用非默认端口的基本方法2.1 修改listen指令