返回
Featured image of post 一些hugo短代码

一些hugo短代码

   
摘要GPT
这篇文章介绍了如何在 Hugo 中使用一些短代码,包括摘要、通知、隐藏内容、聊天气泡、时间轴和视频嵌入等功能。文章提供了示例代码和预览效果,帮助读者更好地理解如何在 Hugo 中应用这些短代码。

本文为了防止在代码块中的短代码被 Hugo 转译,在代码块中添加了 \,请在使用时去除

notice

{\{< notice notice-warning >}}
你好
{\{< /notice >}}

{\{< notice notice-info >}}
你好
{\{< /notice >}}

{\{< notice notice-note >}}
你好
{\{< /notice >}}

{\{< notice notice-tip >}}
你好
{\{< /notice >}}

预览:

你好。

隐藏内容

{\{< detail "点这里看隐藏内容!" >}}
这里是隐藏内容!🥰
{\{< /detail >}}

预览:

点这里看隐藏内容!这里是隐藏内容!🥰

聊天气泡

{\{< chat position="left" name="John Doe" timestamp="2023-09-12 14:30">}}
这是左边的消息内容。
{\{< /chat >}\}

{\{< chat position="right" name="Alice" timestamp="2023-09-12 14:45" >}} 
这是右边的消息内容,测试长长长长长长长长长长长长长长长长长长长长长长长长度。
{\{< /chat >}\}

预览:

John Doe   2023-09-12 14:30
这是左边的消息内容。

2023-09-12 14:45   Alice
这是右边的消息内容,测试长长长长长长长长长长长长长长长长长长长长长长长长度。

时间轴

{\{< timeline date="2023-10-01" title="国庆节" description="祖国生日快乐" tags="节日" url="" >}\}

预览:

2023-10-01
节日
国庆节
祖国生日快乐

播放视频

哔哩哔哩

{\{< bilibili VIDEO_ID PART_NUMBER >}\}

提示:

Video_ID: AV或BV PART_NUMBER(可选):指定要播放的视频序号

腾讯

{{\< tencent g0014r3khdw >}}

预览:

YouTube视频

{{\< youtube VIDEO_ID >}}

通用视频文件

VIDEO_URL 可以是URL或相对于 static 目录的路径。例如, src="/video/my-video.mp4" 将嵌入站点文件夹的视频文件 static/video/my-video.mp4 。

autoplay 属性是可选的。它可用于指定是否应自动播放视频。 poster 属性是可选的。它可用于指定视频的海报图像。

{{\< video VIDEO_URL >}}

{{\< video src="VIDEO_URL" autoplay="true" poster="./video-poster.png" >}}
知识共享许可证 CC BY-NC-SA 4.0
最后更新于 2024-07-03 09:03
使用 Hugo 构建
主题 hugo-magic小洋葱 魔改 由 Jimmy 设计
Written by Human, Not by AI