产品A
产品A
产品A
产品A
产品B
产品B
产品B
产品B
产品C
产品C
产品C
产品C
产品C
产品C
产品D
产品D
产品D
产品D
产品E
产品E
产品E
产品E
产品F
产品F
产品F
产品F
产品F
产品F
产品g
产品g

图片写法

标题1
标题1
标题2
标题2
标题3
标题3
视频标题
另一个视频 
1
2
3
4
5
6
7
8
9
10
{% images %}
/images/001/1.jpg,标题1
/images/001/2.jpg,标题2
/images/001/3.jpg
/images/001/4.jpg,标题3
/images/001/6.mp4,视频标题
/images/001/7.webm,另一个视频
{% endimages %}

支持多种视频格式：.mp4, .webm, .ogg

PDF 写法

DeepSeek通DeepSeekDeepDeepSeek通

终极指南

精通

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% pdf%}
DeepSeek通DeepSeekDeepDeepSeek通,https://www.oaoo.top/assets/doc/DeepSeek从入门到精通-清华大学104页.pdf
终极指南,https://www.oaoo.top/assets/doc/DeepSeek全攻略：从零基础到精通的终极指南.pdf
精通,https://www.oaoo.top/assets/doc/DeepSeek从入门到精通-清华大学104页.pdf
{% endpdf %}

{% pdf bont name:终极指南 button:更多 %}
DeepSeek通DeepSeekDeepDeepSeek通,https://www.oaoo.top/assets/doc/DeepSeek从入门到精通-清华大学104页.pdf
终极指南,https://www.oaoo.top/assets/doc/DeepSeek全攻略：从零基础到精通的终极指南.pdf
精通,https://www.oaoo.top/assets/doc/DeepSeek从入门到精通-清华大学104页.pdf
{% endpdf %}

参数说明：

bont  #起用侧栏
button: 更多 #点击展开侧栏
name:终极指南  #默认显示第一个pdf, 也可指定显示某个

注：pdf 文件需要是网络上的，本地的无效

文章调用 (每次都要保存所在的标签的文章才起效，不保存只显示2个)

Hello World

Hello World

encrypted: true --- U2FsdGVkX19yuritykBhDx7Yjq5kVGcxe1JFrOftj0c6wgDs+fp40bAOa7IPZq64GQ/t8ScKsm3+1edS...
Hexo博客搭建指南1

Hexo博客搭建指南1

encrypted: true --- U2FsdGVkX1+9oRAECq4xJ4CXvITFLjrz244viD1GY9pgOSK9Mi+9inZWS9rATxFrwYWKnztCfDjwgFMm...
Hello World

Hello World
Hexo博客搭建指南1

Hexo博客搭建指南1
Hello World

Hello World

encrypted: true --- U2FsdGVkX19yuritykBhDx7Yjq5kVGcxe1JFrOftj0c6wgDs+fp40bAOa7IPZq64GQ/t8ScKsm3+1edS...
Hexo博客搭建指南1

Hexo博客搭建指南1

encrypted: true --- U2FsdGVkX1+9oRAECq4xJ4CXvITFLjrz244viD1GY9pgOSK9Mi+9inZWS9rATxFrwYWKnztCfDjwgFMm...
 
1
2
3
4
5
6
7
{% article_grid %}
{% article_grid cols=3 excerpt=false %}
{% article_grid limit=4 more_text="查看全部文章" more_link="/posts/" %}
参数说明：
cols 列数 默认3列
excerpt=false 是不输出摘要
limit=4  超出4个，显示按钮

b 站视频

My Cool Video

第一个视频
可选说明
第二个视频
第三个视频
其他说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% bilibili BV1cUoDYaEdb %}
{% bilibili BV1cUoDYaEdb "My Cool Video" 100% 450 %}
参数说明：
{% bilibili 视频id "标题可选" 宽度 高度 %}

{% bilibili_video %}
BV1cUoDYaEdb, 第一个视频, 可选说明
BV1GJ411x7h8, 第二个视频
BV1GJ411x7h9, 第三个视频, 其他说明
{% endbilibili_video %}

参数说明：
视频id(必填)  标题一(可选) 标题二(可选)

Text文本样式标签演示

带 下划线 的文本

带 着重号 的文本

带 波浪线 的文本

带 删除线 的文本

键盘样式的文本 Command + D

密码样式的文本：这里没有验证码

网址标签及代码

汉语拼音

汉语拼音

一个汉语拼音学习网

汉语拼音网

汉语拼音网

针对幼儿小中大班和一年级的儿童

儿童学拼音

儿童学拼音

多功能语言学习网

1
2
3
4
5
{% webnav %}
汉语拼音,http://www.hanyupinyin.cn/123/1.html,一个汉语拼音学习网 ,
汉语拼音网,http://www.hanyupinyin.org/,针对幼儿小中大班和一年级的儿童,
儿童学拼音,https://www.baidu.com,多功能语言学习网
{% endwebnav %}

选项卡及代码

欢迎使用选项卡示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs %}

# 产品简介
欢迎使用我们的产品，这是一款**革命性**的工具：

- 简单易用
- 功能强大
- 高效稳定

# 功能特性

核心功能
1. 高级分析
2. 实时监控
3. 自定义报告

# 价格方案

我们提供多种套餐：

{% endtabs %}

手风琴及写法

这里是手风琴的内容1。
1
dsd
这里是手风琴的内容2。
这里是手风琴的内容3。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% accordion open:"手风琴标题3" %}
手风琴标题1
这里是手风琴的内容1。

手风琴标题2
这里是手风琴的内容2。

手风琴标题3
这里是手风琴的内容3。
{% endaccordion %}

参数说明：
不带参数时，默认展开第一个
open:"false"全部折叠，不展开
open:"手风琴标题2" 展开指定标题项
仅支持文字内容和代码嵌入,其它内容要用html 代码

进度要及写法

项目进度
0%
文档审核
0%
测试覆盖率
0%
0%
完成率
0%
完成率
完成率
0%
标题
0%
0%
标题
0%
标题
0%
标题1
0%
标题2
0%
标题3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% progress 项目进度 65 #2196F3 40 %}  
{% progress 文档审核 30 #FF9800 25 %} 
{% progress 测试覆盖率 85 #9C27B0 %}  

<!-- 参数：标题, 百分比, 颜色, 直径(可选) 条状-->


{% progress 完成率 65 #FF5722 120 circle %}

{% progress 完成率 65 #FF5722 80 circle below %}

{% progress 完成率 65 #FF5722 circle below %}

<!-- 参数：标题, 百分比, 颜色, 直径(可选), "circle"标识圆形  "below" 文字在圆下方 -->



{% progress 标题1 百分比1 颜色1 100 circle below horizontal %}
{% progress 标题2 60 #FF9800 100 circle below horizontal %}
{% progress 标题3 80 #FF5722 100 circle below horizontal %}

<!-- 参数：标题, 百分比, 颜色, 直径, "circle"标识圆形  "below" 文字在圆下方 "horizontal" 水平布局-->

note及写法

信息2

这是一个信息提示。

警告

这是一个警告提示。

危险

这是一个危险提示。

成功

这是一个成功提示。

无图标提示

这是一个没有图标的提示。

这是一个没有图标的提示。

1
2
3
4
5
{% note info|信息2|fas fa-info-circle, 这是一个信息提示。 %}
{% note warning|警告|fas fa-exclamation-triangle, 这是一个警告提示。 %}
{% note danger|危险|fas fa-exclamation-circle, 这是一个危险提示。 %}
{% note success|成功|fas fa-check-circle, 这是一个成功提示。 %}
{% note info|无图标提示, 这是一个没有图标的提示。 %}

按钮写法

按钮 按钮 按钮 按钮22 按钮22

按钮

标题1
标题1
标题2
标题3
标题3
标题4 
1
2
3
4
5
6
7
8
9
10
11
12
13
{% btn 按钮, / %}
{% btn info, 按钮, / %}
{% btn warning noborder, 按钮, /, fas fa-camera %}
{% btn danger, 按钮22, / %}
{% btn success, 按钮22, / %}
{% btn center warning noborder, 按钮, /, fas fa-camera %}

{% btns css1 ds %}
标题1, https://baidu.com, images/001/1.jpg,info noborder
标题2, https://baidu.com, fas fa-camera,warning
标题3, https://baidu.com, images/001/1.jpg,danger
标题4, https://baidu.com, fas fa-camera,success
{% endbtns %}

销售精英及写法

张伟

张伟

高级销售经理

连续5年销售冠军，客户满意度100%

★★★★★
李娜

李娜

区域销售总监

年度最佳团队领导者

★★★★☆
王强

王强

客户经理

新客户开发专家

★★★★★ 
1
2
3
4
5
{% sales_elite %}
images/001/1.jpg|张伟|高级销售经理|连续5年销售冠军，客户满意度100%|5
images/001/2.jpg|李娜|区域销售总监|年度最佳团队领导者|4
images/001/3.jpg|王强|客户经理|新客户开发专家|5
{% endsales_elite %}

网格布局及写法

标题1

这是第一个网格单元的描述内容。

标题1
标题2

这是第二个网格单元的描述内容。

标题2
标题3

这是第三个网格单元的描述内容。

标题3 
1
2
3
4
5
6
7
8
9
10
11
12
{% grid Height="300px" gap="30px" Radius="12px" minmax="200px" %}
标题1|images/001/1.jpg|这是第一个网格单元的描述内容。|https://www.baidu.com/
标题2|images/001/2.jpg|这是第二个网格单元的描述内容。|https://www.baidu.com/
标题3|images/001/3.jpg|这是第三个网格单元的描述内容。|https://www.baidu.com/
{% endgrid %}

参数说明：
Height 网格高度值：默认为 250px。
gap 网格间隔值：默认为 20px。
Radius 圆角值：默认为 8px。
minmax 网格最大最小尺寸：默认为 200px。
opacity 文字内容透明度，默认为 0，即不显示内容，鼠标经过时显示

倒计时及写法

标题1
0
这是第一个倒计时的描述内容。
标题2
0
这是第二个倒计时的描述内容。
标题3
0
这是第三个倒计时的描述内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% daojishi time="1500" img="images/001/2.jpg" opacity="0.3" blur="10" padding="30px" no1="4" no2="2" %}
30|标题1|这是第一个倒计时的描述内容。
1862|标题2|这是第二个倒计时的描述内容。
1500|标题3|这是第三个倒计时的描述内容。
{% enddaojishi %}

参数说明：
动画持续时间：第一个参数，单位为毫秒，默认为 1000。
背景图路径：第二个参数，默认为 images/001/1.jpg。
背景图透明度：第三个参数，范围为 0 到 1，默认为 1。
背景图模糊度：第四个参数，单位为像素，默认为 0（无模糊）。
.grid-number 的 padding：第五个参数，支持多种格式（如 20px、20px 10px、20px 10px 5px 15px），默认为 20px。
no1 默认4列
no2 移动端默认2列

轮播图及写法

1
2
3
4
5
6
7
8
9
10
11
12
13
{% carousel autoplay=false interval=3000 width="80%" height="500px"  perview=4 %}
images/001/1.jpg|图片1描述|图片1标题
images/001/2.jpg|图片2描述|图片2标题
images/001/3.jpg|图片3描述|图片3标题
images/001/4.jpg|图片4描述|图片4标题
images/001/5.jpg|图片5描述|图片5标题
{% endcarousel %}

参数说明：
autoplay=false 自动轮播 为false 时禁止自动轮播
interval=3000 轮播间隔时间，默认为3000，
width="80%" height="500px" 默认尺寸width="100%" height="400px"
perview=4  可设置显示多张，默认显示一张

企业简介写法

我们的公司

关于我们

我们是一家致力于科技创新的人工智能企业，成立于2010年，总部位于上海。公司拥有200多名研发人员，专注于自然语言处理和计算机视觉领域。

我们的使命：通过AI技术让世界更智能、更高效。

主要成就：

  • 服务超过1000家企业客户
  • 获得多项技术专利
  • 2022年度创新科技奖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{% company_profile 
  img="images/001/5.jpg" 
  img_alt="我们的公司" 
  img_width="45%"
  width="100%"
  height="300px"
%}

## 关于我们

我们是一家致力于科技创新的人工智能企业，成立于2010年，总部位于上海。公司拥有200多名研发人员，专注于自然语言处理和计算机视觉领域。

**我们的使命**：通过AI技术让世界更智能、更高效。

*主要成就*：
- 服务超过1000家企业客户
- 获得多项技术专利
- 2022年度创新科技奖

{% endcompany_profile %}

参数说明：
参数名	说明	默认值	示例
img	图片路径	必填	"/images/company.jpg"
img_alt	图片alt文本	"公司图片"	"我们的办公环境"
img_width	图片区域宽度	"50%"	"45%"
width	整个组件宽度	"100%"	"90%"
height	整个组件高度	"400px"	"500px"
reverse	是否反转布局	false	true