Hugo Details 短代码
使用 details 短代码在你的内容中插入 HTML details 元素。
New in
v0.140.0
要覆盖 Hugo 内置的 details 短代码，请将 源代码 复制到 layouts/_shortcodes 目录中同名文件中。
示例
使用此标记：
{{< details summary="查看详情" >}}
这是一个 **粗体** 词。
{{< /details >}}Hugo 渲染此 HTML：
<details>
<summary>查看详情</summary>
<p>这是一个 <strong>粗体</strong> 词。</p>
</details>在浏览器中看起来像这样：
查看详情
这是一个 粗体 词。
参数
- summary
- (
string) 从 Markdown 渲染到 HTML 的子summary元素的内容。默认值为Details。 - open
- (
bool) 是否初始显示details元素的内容。默认值为false。 - class
- (
string)details元素的class属性。 - name
- (
string)details元素的name属性。 - title
- (
string)details元素的title属性。
样式
使用 CSS 来设置 details 元素、summary 元素和内容本身的样式。
/* 目标 details 元素 */
details { }
/* 目标 summary 元素 */
details > summary { }
/* 目标 summary 元素的子元素 */
details > summary > * { }
/* 目标内容 */
details > :not(summary) { }