本页面展示了博客中可用的所有短代码(Shortcodes)语法。
短代码是一种简化的语法,使用 ::: 标记来快速创建复杂组件,无需编写完整的 JSX 代码。
1. 信息提示框
效果展示
:::info
这是一条普通信息提示。
:::
:::success
这是一条成功提示。
:::
:::warning
这是一条警告提示。
:::
:::danger
这是一条危险提示。
:::
:::note
这是一条笔记提示。
:::
使用语法
:::info
你的信息内容
:::
:::success
你的成功信息
:::
:::warning
你的警告内容
:::
:::danger
你的危险警告内容
:::
:::note
你的笔记内容
:::
2. 图片展示
网格图片
:::gallery
https://loremflickr.com/640/480/city?1
https://loremflickr.com/640/480/city?2
https://loremflickr.com/640/480/city?3
https://loremflickr.com/640/480/city?4
https://loremflickr.com/640/480/city?5
https://loremflickr.com/640/480/city?6
https://loremflickr.com/640/480/city?7
https://loremflickr.com/640/480/city?8
https://loremflickr.com/640/480/city?9
https://loremflickr.com/640/480/city?10
https://loremflickr.com/640/480/city?11
:::
语法:
:::gallery
/images/photo1.jpg
/images/photo2.jpg
/images/photo3.jpg
:::
高级选项:
:::gallery{max=6 cols=3 gap=4}
图片URL列表...
:::
max - 最多显示的图片数量
cols - 列数(默认自适应)
gap - 图片间距
瀑布流
:::colsgallery
/gallery/yanhua.avif
/gallery/beibijia.avif
/gallery/lantianlvdi.avif
/gallery/rmgc.avif
:::
语法:
:::colsgallery
/gallery/image1.avif
/gallery/image2.avif
/gallery/image3.avif
:::
画廊相册
:::hualang{title="西游乐园" where="江苏·淮安"}
/note/xiyouleyuan1.avif
/note/xiyouleyuan2.avif
/note/xiyouleyuan3.avif
/note/xiyouleyuan4.avif
/note/xiyouleyuan5.avif
:::
语法:
:::hualang{title="相册标题" where="拍摄地点"}
/note/photo1.avif
/note/photo2.avif
/note/photo3.avif
:::
3. 视频嵌入
Bilibili
:::bilibili
https://www.bilibili.com/video/BV1GJ411x7h7
:::
语法:
:::bilibili
https://www.bilibili.com/video/BV1GJ411x7h7
:::
YouTube
:::youtube
https://www.youtube.com/watch?v=dQw4w9WgXcQ
:::
语法:
:::youtube
https://www.youtube.com/watch?v=VIDEO_ID
:::
支持的 URL 格式:
https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
https://www.youtube.com/embed/VIDEO_ID
4. 媒体卡片
电影卡片
:::movie
6BC9VYt0bEyqrIyfp6OwXj
:::
带视频背景:
:::movie{video=/video/the-substance1.webm}
3n9buL3yaSCQgfBDFYTL2m
:::
语法:
:::movie
NEODB_MOVIE_ID
:::
:::movie{video=/path/to/video.mp4}
NEODB_MOVIE_ID
:::
书籍卡片
:::book
3Lellbdoz8yNGMnWIUHGjS
:::
语法:
:::book
NEODB_BOOK_ID
:::
链接预览
:::link
https://react.dev
:::
语法:
:::link
https://example.com
:::
5. 社交媒体
推特嵌入
:::tweet
1983226019189301677
:::
语法:
:::tweet
TWEET_ID
:::
6. 特殊功能
剧透隐藏
:::hide
这是被隐藏的剧透内容,点击才能看到!
:::
语法:
:::hide
要隐藏的内容
:::
7. 内容对比
代码对比:
:::compare
::panel{title="React 18"}
// React 18 - 使用 useEffect
useEffect(() => {
fetchData()
}, [])
::panel{title="React 19"}
// React 19 - 使用 use()
const data = use(fetchData())
::panel{title="Next.js 15"}
// Next.js 15 - Server Component
const data = await fetchData()
:::
列表对比:
:::compare
::panel{title="免费版"}
::panel{title="专业版"}
- 所有基础功能
- 50GB 存储
- 优先邮件支持
- API 访问
::panel{title="企业版"}
- 所有专业功能
- 无限存储
- 24/7 电话支持
- 专属客户经理
:::
语法:
:::compare
::panel{title="面板 1"}
内容 1
::panel{title="面板 2"}
内容 2
::panel{title="面板 3"}
内容 3
:::
8. 使用技巧
嵌套使用
:::warning
React Compiler 有哪些用途
- 自动优化组件重渲染
- 简化性能优化工作流
- 提升应用运行效率
- 兼容现有 React 代码
- 未来扩展潜力
:::
快速参考
| 短代码 |
用途 |
:::info |
信息提示 |
:::success |
成功提示 |
:::warning |
警告提示 |
:::danger |
危险警告 |
:::note |
笔记说明 |
:::gallery |
网格图片 |
:::colsgallery |
瀑布流图片 |
:::hualang |
画廊相册 |
:::bilibili |
B 站视频 |
:::youtube |
YouTube 视频 |
:::movie |
电影卡片 |
:::book |
书籍卡片 |
:::link |
链接预览 |
:::tweet |
推特嵌入 |
:::hide |
剧透隐藏 |
:::compare |
内容对比 |