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) { }