主题
Markdown 模版
语法参考
标题
标题分六级
md
# 标题一
## 标题二
### 标题三
#### 标题四
##### 标题五
###### 标题六强调语法
md
**加粗**
*斜体*
***粗体和斜体***
`有背景色`加粗
斜体
粗体和斜体
有背景色
引用语法
md
> 这是一条引用这是一条引用
列表语法
md
- 无序列表
- 无序列表
1. 有序列表
2. 有序列表- 无序列表
- 无序列表
- 有序列表
- 有序列表
代码语法
js
const str = 'hello markdown!'分割线语法
md
***
---Emoji
md
:tada: :100:🎉 💯
注意是
github地址，可能会打不开
流程图
需要在 流程图编辑器 中
生成代码
js
<FlowViewer :data="data" />图片
提示
skeletonHeight 为加载图片前显示的占位高度。
点击图片会自动进入画廊模式，显示本页所有的图片，可以放大和切换。
js
<CustomImage src="图片链接地址" skeletonHeight="200px" /> 图片加载中...
图片一
图片加载中...
图片二
视频
js
// 默认方式，高度为 400px
<CustomVideo
poster="视频封面链接"
src="视频链接"
type="mp4"
/>
// 自定义高度
<CustomVideo
poster="视频封面链接"
src="视频链接"
type="mp4"
height="350px"
/>横向视频，高度 350px 👇
竖向视频，高度 350px 👇
提示
请合理设置视频高度和封面图片。
提示信息
md
::: info 信息
This is an info box.
:::
::: tip 提示
This is a tip.
:::
::: warning 提示标题
This is a warning.
:::
::: danger 提示标题
This is a dangerous warning.
:::
::: details 提示标题
This is a details block.
:::提示
这是一个提示信息.
可折叠提示框
折叠框内容。
链接跳转
外链跳转
md
[百度一下](https://baidu.com)站内跳转
假设你的 md 文档目录结构如下：
md
.
├─ index.md
├─ foo
│ ├─ index.md
│ ├─ one.md
│ └─ two.md
└─ bar
├─ index.md
├─ three.md
└─ four.md假设你正在编写 foo/one.md 文件。
md
[首页](/) <!-- 首页链接 -->
[foo](/foo/) <!-- 链接到 foo/index.md -->
[foo heading](./#heading) <!-- 定位到 foo.md 中 #heading 开头的位置 -->
[bar - three](../bar/three) <!-- 链接到 bar/three -->
[bar - three](../bar/three.md) <!-- 链接到 bar/three.md 也可以加后缀名 md -->
[bar - four](../bar/four.html) <!-- 链接到 bar/four.md 也可以加后缀名 html -->本页二维码
js
// 默认上下距离 10px
<ClientOnly>
<CustomQrCode />
</ClientOnly>
// 上下距离 20px
<ClientOnly>
<CustomQrCode marginTop="20px" marginBottom="20px" />
</ClientOnly>显示效果 👇
视频轮播
html
<VideoCarousel :videoItems="videoItems" />
<script setup>
// 此处为定义视频轮播内容的地方
const videoItems = [
{
systemName: '新中大',
title: '增值税发票的开票申请',
imageUrl:
'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD1.png',
videoUrl:
'http://gfwd.sxjzgcyxgs.com/i8/%E8%B4%A2%E7%A8%8E/69e192a4201890dbfd52540d65003b6a.mp4'
},
{
systemName: '新中大',
title: '增值税预缴单',
imageUrl:
'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD2.png',
videoUrl:
'http://gfwd.sxjzgcyxgs.com/i8/%E8%B4%A2%E7%A8%8E/i8_%E5%A2%9E%E5%80%BC%E7%A8%8E%E9%A2%84%E7%BC%B4%E5%8D%95.mp4'
},
{
systemName: '契约锁',
title: '电子签章验真伪的方法',
imageUrl:
'http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD3.png',
videoUrl:
'http://gfwd.sxjzgcyxgs.com/%E5%A5%91%E7%BA%A6%E9%94%81/%E7%94%B5%E5%AD%90%E7%AD%BE%E7%AB%A0%E9%AA%8C%E7%9C%9F%E4%BC%AA%E7%9A%84%E6%96%B9%E6%B3%95.mp4'
}
]
</script>显示效果 👇
增值税发票的开票申请新中大
增值税预缴单新中大
电子签章验真伪的方法契约锁
折叠面板
按照 item 类型添加即可，每个 content 里面的内容会按照数组顺序逐一渲染，支持文本、图片和附件。
提示
每一个 item 的 value 必须是唯一的。
ts
// 折叠面板 item 类型
interface AccordionItem {
value: string
title: string
contents: {
type: 'paragraph' | 'image' | 'annex'
content: AccordionItemAnnex[] | string
}[]
}
type AccordionItemAnnex = {
name: string
href: string
}html
<CustomCollapse :accordionItems="accordionItems"></CustomCollapse>
<script setup>
// 此处为定义折叠面板内容的地方
const accordionItems = [
{
value: '1',
title: '标题1',
contents: [
{
type: 'paragraph',
content: '文本A'
},
{
type: 'image',
content: `http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD1.png`
},
{
type: 'paragraph',
content: '文本B'
},
{
type: 'image',
content: `http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD2.png`
}
]
},
{
value: '2',
title: '标题2',
contents: [
{
type: 'paragraph',
content: '文本B'
},
{
type: 'image',
content: `http://gfwd.sxjzgcyxgs.com/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD2.png`
},
{
type: 'annex',
content: [
{
name: '360浏览器清理缓存',
href: 'http://gfwd.sxjzgcyxgs.com/%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/%E5%B0%8F%E6%8A%80%E5%B7%A7%20%C2%B7%20%E6%B8%85%E9%99%A4%E7%BC%93%E5%AD%98.pdf'
},
{
name: '请查阅【附件1】：供应商操作手册）',
href: 'http://gfwd.sxjzgcyxgs.com/i8/%E4%BE%9B%E5%BA%94%E5%95%86%E7%AE%A1%E7%90%86/%E9%99%84%E4%BB%B61%20%E5%B1%B1%E8%A5%BF%E5%BB%BA%E5%B7%A5%E4%BE%9B%E5%BA%94%E5%95%86%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C.docx'
}
]
}
]
}
]
</script>显示效果 👇