HUGO

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
gohugoio 加星
  • 关于
    • 本节内容
    • 简介
    • 特性
    • 隐私
    • 安全
    • 许可
  • 安装
    • 本节内容
    • macOS
    • Linux
    • Windows
    • BSD
  • 入门
    • 本节内容
    • 快速开始
    • 基本用法
    • 目录结构
    • 配置
    • 配置标记
    • 配置构建
    • 术语表
    • 外部学习资源
  • 快速参考
    • 本节内容
    • 表情符号
    • 函数
    • 方法
    • 页面集合
  • 内容管理
    • 本节内容
    • 组织
    • 页面包
    • 内容格式
    • 前置内容
    • 构建选项
    • 页面资源
    • 图像处理
    • 简码
    • 相关内容
    • 章节
    • 内容类型
    • 原型
    • 分类法
    • 摘要
    • 链接和交叉引用
    • URL 管理
    • 菜单
    • 评论
    • 多语言
    • Markdown 属性
    • 语法高亮
    • 图表
    • 数学
    • 数据源
    • 内容适配器
  • 模板
    • 本节内容
    • 简介
    • 模板类型
    • 查找顺序
    • 基础模板
    • 主页模板
    • 单页模板
    • 章节模板
    • 分类模板
    • 术语模板
    • 部分模板
    • 内容视图模板
    • 简码模板
    • 站点地图模板
    • RSS 模板
    • 404 模板
    • robots.txt 模板
    • 菜单
    • 分页
    • 嵌入式模板
    • 自定义输出格式
  • 函数
    • 本节内容
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go 模板
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • 方法
    • 本节内容
    • 持续时间
    • 菜单
    • 菜单项
    • 页面
    • 分页器
    • 页面集合
    • 资源
    • 简码
    • 站点
    • 分类
    • 时间
  • 渲染钩子
    • 本节内容
    • 简介
    • 块引用
    • 代码块
    • 标题
    • 图像
    • 链接
    • 直通
    • 表格
  • 简码
    • 本节内容
    • 评论
    • 详细信息
    • 图
    • Gist
    • 高亮
    • Instagram
    • 参数
    • 二维码
    • Ref
    • Relref
    • Vimeo
    • X
    • YouTube
  • Hugo 模块
    • 本节内容
    • 配置 Hugo 模块
    • 使用 Hugo 模块
    • 主题组件
  • Hugo 管道
    • 本节内容
    • 简介
    • 将 Sass 转译为 CSS
    • PostCSS
    • 后处理
    • JavaScript 构建
    • 资源压缩
    • 连接资源
    • 指纹和 SRI 哈希
    • 来自字符串的资源
    • 来自模板的资源
  • CLI
  • 故障排除
    • 本节内容
    • 审计
    • 日志记录
    • 检查
    • 弃用
    • 性能
    • 常见问题解答
  • 开发者工具
    • 本节内容
    • 编辑器插件
    • 前端
    • 搜索
    • 迁移
    • 其他项目
  • 托管和部署
    • 本节内容
    • Hugo 部署
    • 使用 Rclone 部署
    • 使用 Rsync 部署
    • 在 21YunBox 上托管
    • 在 AWS Amplify 上托管
    • 在 Azure 静态 Web 应用上托管
    • 在 Cloudflare Pages 上托管
    • 在 Firebase 上托管
    • 在 GitHub Pages 上托管
    • 在 GitLab Pages 上托管
    • 在 KeyCDN 上托管
    • 在 Netlify 上托管
    • 在 Render 上托管
  • 贡献
    • 本节内容
    • 开发
    • 文档
    • 主题
  • 维护
简码

详细信息

使用 details 简码将 HTML details 元素插入到您的内容中。
v0.140.0 中的新增功能

要覆盖 Hugo 的嵌入式 details 简码,请将源代码复制到 layouts/shortcodes 目录中同名的文件中。

示例

使用此标记

{{< details summary="See the details" >}}
This is a **bold** word.
{{< /details >}}

Hugo 渲染此 HTML

<details>
  <summary>See the details</summary>
  <p>This is a <strong>bold</strong> word.</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 元素和内容本身的样式。

/* target the details element */
details { }

/* target the summary element */
details > summary { }

/* target the children of the summary element */
details > summary > * { }

/* target the content */
details > :not(summary) { }

另请参阅

  • 图
  • 高亮
  • Vimeo
  • YouTube
  • 按字母顺序

在此页上

  • 示例
  • 参数
  • 样式

本节内容

  • 评论
  • 详细信息
  • 图
  • Gist
  • 高亮
  • Instagram
  • 参数
  • 二维码
  • Ref
  • Relref
  • Vimeo
  • X
  • YouTube
上次更新:2025 年 1 月 16 日:将嵌入式简码文档提升到其自己的部分 (a346ca1fd)
改进此页面
由 Hugo 作者
Hugo Logo
  • 提交问题
  • 获取帮助
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo 赞助商

您的公司?
 

Hugo 徽标的版权归 Steve Francia 所有,2013–2025 年。

Hugo Gopher 基于 Renée French 的原创作品。

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
  • 关于
  • 安装
  • 入门
  • 快速参考
  • 内容管理
  • 模板
  • 函数
  • 方法
  • 渲染钩子
  • 简码
  • Hugo 模块
  • Hugo 管道
  • CLI
  • 故障排除
  • 开发者工具
  • 托管和部署
  • 贡献
  • 维护