NEW
功能全集文档上线
支持一键复制,即装即用
这个组件适合用于文章开头,展示最重要的核心结论或更新摘要。
01
区块标题
TITLE SECTION DA01 · 区块标题
椭圆轨道装饰 + 副标题 + 渐变主标题,适合作为大章节分隔。
02
功能指南卡片
TITLE DA03 · 功能指南卡片
|
GUIDE
功能全集:排版组件指南
这是一份包含所有可用 Markdown 指令及扩展标签的完整演示稿。
|
预计阅读(分)
共 0 字
|
03
装饰数字标题
TITLE BADGE · 装饰数字标题
04
圆形编号标题
TITLE ROUND · 圆形编号标题
05
编号边框标题
TITLE NUM · 编号边框标题
06
竖线装饰标题
TITLE LINE · 竖线装饰标题
07
角标装饰标题
TITLE CORNER · 角标装饰标题
08
双色底线标题
TITLE DUAL LINE · 双色底线标题
09
PART标题
TITLE PART · PART标题
10
宴会标题
TITLE BANQUET · 宴会标题
11
JOIN标题
TITLE JOIN · JOIN标题
13
双图标题卡片
TITLE CARD · 双图标题卡片
02
段落、引导与强调
PARAGRAPHS · 段落与分区
01
分段标题
PARAGRAPH TITLE · 分段标题
01
自定义段落标题组件
PARAGRAPH TITLE · 分段标题
标题文字写在标签体内;也可用 1~4 个 # 生成 Markdown 标题。段落标题通过 label、num、subtitle 等属性控制样式。
05
突发/重大更新卡片
BREAKING · 突发/重大更新卡片
NEW
功能全集文档上线
支持一键复制,即装即用
这个组件适合用于文章开头,展示最重要的核心结论或更新摘要。
💡 操作小贴士
使用 [TIP] 或 [NOTE] 可以快速生成带背景的提示框。
07
居中强调语
STATEMENT · 居中强调语
这是一段居中的强调文字,适合用来突出核心观点或结论。
Lead 组件会生成一段带有左侧边框的引导文字,适合用来引入话题或提供背景信息。它的视觉效果比普通段落更突出,但又不会像 Statement 那样过于正式。
Lead 组件的左侧边框颜色会跟随主题色变化,非常适合用作文章的引言或过渡段落。
09
空白换行
LINE BREAK · 空白换行
普通段落上方与下方之间,可以用 <br/> 插入可控空白行,用于调节阅读节奏。
上方预留了一段空白。可连续写多个 <br/> 来增加间距。
01
指定窗口尺寸(限制高度 250px)
WINDOW SIZE · 指定窗口尺寸
上方的图片被限制在 250px 高度内,读者可以手动滚动查看。
02
多图横向滑动并排
GALLERY · 多图横向滑动并排
轮播组件依赖 SVG 动画,在所有支持 SVG 的设备和浏览器上均可正常播放。支持最多5张图片,自动轮播,默认间隔3秒,可使用 type 属性设置 4 种轮播类型。宽高可根据使用的图片尺寸进行调整,默认是 600px × 200px。
04
单图扩展组件(Img 标签)
IMG · 单图扩展组件
基于 HTML 的 img 标签添加的扩展图片组件,可以设置图片宽高、圆角、裁切和偏移。
05
图片装饰
IMAGE DECORATION · 图片装饰
06
无缝长图
LONG IMAGE · 无缝长图
01
Before / After 对比(横向)
COMPARE · Before / After 对比
02
Before / After 对比(纵向)
COMPARE · Before / After 对比
BEFORE
回味过去
一切仿佛就在昨天

AFTER
展望未来
愿明天会更美好

03
双色网格
GRID BLOCKS · 双色网格
01
产品卡片
PRODUCT CARD · 产品卡片
收录本季最热门的五款”恋爱感”色号,从悸动初遇的蜜桃绯红,到深陷热恋的莓果绛红,描绘心动到钟情的完整光谱。
02
节目单列表
PROGRAM LIST · 节目单列表
03
实践案例流
CASE FLOW · 实践案例流
实践案例
案例 01
品牌视觉升级:从绿色全面转向现代化的 Indigo 靛青色调。
案例 02
交互体验优化:图片窗口化功能让长文阅读更流畅。
案例 03
编辑器重构:组件化架构让新增样式变得简单高效。
04
案例列表
CASE FLOW DA02 · 案例列表
案例 03
坚持早起 100 天,人生发生了什么变化
06
步骤、时间线与行动点
STEPS · 步骤与流程
01
横向步骤流
HORIZONTAL STEPS · 横向步骤流
02
竖向步骤流
VERTICAL STEPS · 竖向步骤流
03
时间线演示(Timeline)
TIMELINE · 时间线演示
GET STARTED
准备好开始你的创作了吗?
立即复制下方代码
01
渐变与胶囊文字
GRADIENT · 渐变与胶囊文字
| 渐变背景:这是 linear-gradient 渐变背景文字,适合划重点。 |
02
强调与经典修饰
EMPHASIS · 强调与经典修饰
| 经典修饰:粗体文字、下划线文字、删除线文字、斜体文字、加粗+斜体。 |
也支持简写符号 ==、!!、^^、:: 等旧语法,推荐优先使用标签写法。
01
表格(扁平版)
TABLE FLAT · 表格扁平版
季度销售
| 季度 | 销售额 | 增长率 |
| Q1 | 120 万 | +15% |
| Q2 | 180 万 | +50% |
| Q3 | 95 万 | -47% |
| Q4 | 260 万 | +174% |
02
表格(玻璃版)
TABLE GLASS · 表格玻璃版
季度销售
| 季度 | 销售额 | 增长率 |
| Q1 | 120 万 | +15% |
| Q2 | 180 万 | +50% |
| Q3 | 95 万 | -47% |
| Q4 | 260 万 | +174% |
03
表格(霓虹版)
TABLE NEON · 表格霓虹版
季度销售
| 季度 | 销售额 | 增长率 |
| Q1 | 120 万 | +15% |
| Q2 | 180 万 | +50% |
| Q3 | 95 万 | -47% |
| Q4 | 260 万 | +174% |
04
表格(主题色版)
TABLE THEME · 表格主题色版
季度销售
| 季度 | 销售额 | 增长率 |
| Q1 | 120 万 | +15% |
| Q2 | 180 万 | +50% |
| Q3 | 95 万 | -47% |
| Q4 | 260 万 | +174% |
01
LaTeX 公式
LATEX · LaTeX 公式
行内公式用法:质能方程 是物理学最基本的等式之一,勾股定理 也很常用。
import { ref } from ‘vue’ console.log(‘Count:’, count.value)代码块会保留原始格式,包括换行和缩进,适合展示代码片段。
03
Mermaid 图表
MERMAID · Mermaid 图表
10
列表、标签与脚注
LISTS · 列表与任务
01
彩色标签徽章
BADGES · 彩色标签徽章
VueTypeScriptViteTailwind多色版用 标签:颜色 语法;纯色版加 type="DA02" 统一使用主题色。
01
底部引导卡片(文字版)
ENGAGE TEXT · 底部引导卡片
如果这份文档对你有帮助,欢迎点赞、转发、推荐!
点赞 · 转发 · 推荐
THANKS FOR READING
使用 actions 与 thanks 属性自定义动作文案与感谢语。
02
底部引导卡片(三列图标版)
ENGAGE ICONS · 底部引导卡片
12
写在最后
CONCLUSION · 写在最后
所有组件都支持公众号无损复制,您可以根据需要自由组合。
如果这份文档对你有帮助,欢迎点赞、转发、推荐!
点赞 · 转发 · 推荐
THANKS FOR READING
上一次更新已经跑远惹✨ 计算中...
(‾◡◝) 本内容里的一些消息,可能已经跟不上时间啦~
评论(0)
暂无评论