这是 Somnia theme 可用的一些模板组件
Components
Containers
Card
Collapse
Callout
Lorem ipsum dolor sit amet, vidit suscipit at mei. Quem denique mea id. Usu ei regione indoctum dissentiunt, cu meliore fuisset mei, vel quod voluptua ne.
Lorem ipsum dolor sit amet, vidit suscipit at mei. Quem denique mea id. Usu ei regione indoctum dissentiunt, cu meliore fuisset mei, vel quod voluptua ne.
Lorem ipsum dolor sit amet, vidit suscipit at mei. Quem denique mea id. Usu ei regione indoctum dissentiunt, cu meliore fuisset mei, vel quod voluptua ne.
Lorem ipsum dolor sit amet, vidit suscipit at mei. Quem denique mea id. Usu ei regione indoctum dissentiunt, cu meliore fuisset mei, vel quod voluptua ne.
Tabs
这是第一个 tab 的内容。layouts/shortcodes/tabs/tab.html 中 .Inner | markdownify 支持了 Markdown。
但会这导致 tabs 中 shortcode 一些字符被转义，渲染错误。如选项卡 2所示。
去掉则|markdownify可以正常使用 shortcode 。但每一段 Markdown 都需要被 {{.Inner | markdownify}} 这样的 shortcode 包裹，才能渲染为 HTML。或者像是 Button 示例那样，直接在 markdown 中写 HTML。
这是第二个 tab 的内容，支持 Markdown。
List
CardList
Lorem ipsum
- List1
- List2
- List3
- List3.1
- List3.2
- List4 Link
- 我不知道这玩意是啥，算是加了边框的没有点的无序列表？
- List1
- List2
- List3
- List3.1
- List3.2
- List4 Link
Timeline
-
2025-03-16Is there a leakage?
-
2025-03-16A leakage of what?
-
2025-03-16I have a full seat of water, like, full of water!
-
2025-03-16Must be the water.
- 2025-03-16Let’s add that to the words of wisdom.
Steps
- Dian Zan
- Tou Bi
- Shou Cang
Or GuanZhu sometimes.
Simple Text Render
Button
Spoiler
PHP是世界上最好的语言Formatted Date
Label
Lorem ipsum
Lorem ipsum
Resources
Icons
方法很多，如 SVG Sprite / Hugo Shortcode / Unocss Icons preset 等等。
svg or 可参考:
Advanced Components
Web Content Render
Quote
GitHub Card
Link Preview
Link https://github.com/unocss/unocss
[TODO] 由 Hugo 请求并渲染（可能会阻塞 build ） or 后端获取
[TODO] 由 Hugo 请求并渲染（可能会阻塞 build ） or 后端获取
Data Transformer
QRCode
Toast
Lorem ipsum
Medium Zoom
https://blog.yeqing.net/acg-api/ ↗