diff options
| -rw-r--r-- | docs/content/en/content-management/shortcodes.md | 32 | ||||
| -rw-r--r-- | tpl/tplimpl/embedded/templates/shortcodes/details.html | 81 | ||||
| -rw-r--r-- | tpl/tplimpl/tplimpl_integration_test.go | 124 |
3 files changed, 94 insertions, 143 deletions
diff --git a/docs/content/en/content-management/shortcodes.md b/docs/content/en/content-management/shortcodes.md index 7a589a340..47e4f94ed 100644 --- a/docs/content/en/content-management/shortcodes.md +++ b/docs/content/en/content-management/shortcodes.md @@ -101,32 +101,42 @@ Although you can call this shortcode using the `{{</* */>}}` notation, computati {{% note %}} To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory. -This may be useful if you are wanting access to more global HTML attributes. - [source code]: {{% eturl details %}} {{% /note %}} -Use the `details` shortcode to generate a collapsible details HTML element. For example: +Use the `details` shortcode to create a `details` HTML element. For example: ```text -{{</* details summary="Custom Summary Text" */>}} -Showing custom `summary` text. +{{</* details summary="See the details" */>}} +This is a **bold** word. {{</* /details */>}} ``` -Additional examples can be found in the source code. The `details` shortcode can use the following named arguments: +Hugo renders this to: + +```html +<details> + <summary>See the details</summary> + <p>This is a <strong>bold</strong> word.</p> +</details> +``` + +The details shortcode accepts these named arguments: summary -: (`string`) Optional. Specifies the content of the child summary element. Default is "Details" +: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`. open -: (`bool`) Optional. Whether to initially display the contents of the details element. Default is `false`. +: (`bool`) Whether to initially display the content of the `details` element. Default is `false`. + +class +: (`string`) The value of the element's `class` attribute. name -: (`string`) Optional. The value of the element's name attribute. +: (`string`) The value of the element's `name` attribute. -class -: (`string`) Optional. The value of the element's class attribute. +title +: (`string`) The value of the element's `title` attribute. ### figure diff --git a/tpl/tplimpl/embedded/templates/shortcodes/details.html b/tpl/tplimpl/embedded/templates/shortcodes/details.html index 932289517..c19d78c3e 100644 --- a/tpl/tplimpl/embedded/templates/shortcodes/details.html +++ b/tpl/tplimpl/embedded/templates/shortcodes/details.html @@ -1,68 +1,75 @@ {{- /* Renders an HTML details element. -@param {string} [summary] The content of the child summary element. -@param {bool} [open=false] Whether to initially display the contents of the details element. @param {string} [class] The value of the element's class attribute. @param {string} [name] The value of the element's name attribute. +@param {string} [summary] The content of the child summary element. +@param {string} [title] The value of the element's title attribute. +@param {bool} [open=false] Whether to initially display the content of the details element. @reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details @examples - {{< details >}} - A basic collapsible section. - {{< /details >}} + {{< details >}} + A basic collapsible section. + {{< /details >}} - {{< details summary="Custom Summary Text" >}} - Showing custom `summary` text. - {{< /details >}} + {{< details summary="Custom Summary Text" >}} + Showing custom `summary` text. + {{< /details >}} - {{< details summary="Open Details" open=true >}} - Contents displayed initially by using `open`. - {{< /details >}} + {{< details summary="Open Details" open=true >}} + Contents displayed initially by using `open`. + {{< /details >}} - {{< details summary="Styled Content" class="my-custom-class" >}} - Content can be styled with CSS by specifying a `class`. + {{< details summary="Styled Content" class="my-custom-class" >}} + Content can be styled with CSS by specifying a `class`. - Target details element: + Target details element: - ```css - details.my-custom-class { } - ``` + ```css + details.my-custom-class { } + ``` - Target summary element: + Target summary element: - ```css - details.my-custom-class > summary > * { } - ``` + ```css + details.my-custom-class > summary > * { } + ``` - Target inner content: + Target inner content: - ```css - details.my-custom-class > :not(summary) { } - ``` - {{< /details >}} + ```css + details.my-custom-class > :not(summary) { } + ``` + {{< /details >}} - {{< details summary="Grouped Details" name="my-details" >}} - Specifying a `name` allows elements to be connected, with only one able to be open at a time. - {{< /details >}} + {{< details summary="Grouped Details" name="my-details" >}} + Specifying a `name` allows elements to be connected, with only one able to be open at a time. + {{< /details >}} */}} {{- /* Get arguments. */}} -{{- $summary := or (.Get "summary") (T "shortcodes.details") "Details" }} {{- $class := or (.Get "class") "" }} {{- $name := or (.Get "name") "" }} +{{- $summary := or (.Get "summary") "Details" }} +{{- $title := or (.Get "title") "" }} {{- $open := false }} {{- if in (slice "false" false 0) (.Get "open") }} - {{- $open = false }} -{{- else if in (slice "true" true 1) (.Get "open")}} - {{- $open = true }} + {{- $open = false }} +{{- else if in (slice "true" true 1) (.Get "open") }} + {{- $open = true }} {{- end }} {{- /* Render. */}} -<details{{- if $open }} open{{ end }}{{- if $name }} name="{{ $name }}"{{- end }}{{- if $class }} class="{{ $class }}"{{- end }}> - <summary>{{ $summary | .Page.RenderString }}</summary> - {{ .Inner | .Page.RenderString (dict "display" "block") -}} -</details>
\ No newline at end of file +<details + {{- with $class }} class="{{ . }}" {{- end }} + {{- with $name }} name="{{ . }}" {{- end }} + {{- with $open }} open {{- end }} + {{- with $title }} class="{{ . }}" {{- end -}} +> + <summary>{{ $summary | .Page.RenderString }}</summary> + {{ .Inner | .Page.RenderString (dict "display" "block") -}} +</details> diff --git a/tpl/tplimpl/tplimpl_integration_test.go b/tpl/tplimpl/tplimpl_integration_test.go index 36355598d..445316a0a 100644 --- a/tpl/tplimpl/tplimpl_integration_test.go +++ b/tpl/tplimpl/tplimpl_integration_test.go @@ -606,112 +606,46 @@ func TestDetailsShortcode(t *testing.T) { files := ` -- hugo.toml -- -disableKinds = ['rss','section','sitemap','taxonomy','term'] -defaultContentLanguage = "en" -[languages] - [languages.en] - weight = 1 - [languages.es] - weight = 2 --- i18n/en.toml -- -[shortcodes.details] -other = "Details" --- i18n/es.toml -- -[shortcodes.details] -other = "Detalles" --- layouts/_default/single.html -- +disableKinds = ['page','rss','section','sitemap','taxonomy','term'] +-- layouts/index.html -- {{ .Content }} --- content/d1.md -- +-- content/_index.md -- --- -title: Default State Test +title: home --- {{< details >}} -Basic example without summary -{{< /details >}} --- content/d2.md -- ---- -title: Custom Summary Test ---- -{{< details summary="Custom Summary" >}} -Example with custom summary text -{{< /details >}} --- content/d3.md -- ---- -title: Open State Test ---- -{{< details summary="Test Open State" open="true" >}} -Example with open state +A: An _emphasized_ word. {{< /details >}} --- content/d4.md -- ---- -title: Attributes Test ---- -{{< details summary="Test Attribute sanitization" style="color: red; font-weight: bold; background-color: #eee" onclick="alert('test')" >}} -Example testing attribute sanitization + +{{< details + class="my-class" + name="my-name" + open=true + summary="A **bold** word" + title="my-title" +>}} +B: An _emphasized_ word. {{< /details >}} --- content/d5.md -- ---- -title: Class Test ---- -{{< details class="custom-class" >}} -Example with allowed class attribute + +{{< details open=false >}} +C: An _emphasized_ word. {{< /details >}} --- content/d6.md -- ---- -title: Name Test ---- -{{< details name="custom-name" >}} -Example with allowed name attribute + +{{< details open="false" >}} +D: An _emphasized_ word. {{< /details >}} --- content/d7.es.md -- ---- -title: Localization Test ---- -{{< details >}} -Localization example without summary + +{{< details open=0 >}} +E: An _emphasized_ word. {{< /details >}} ` b := hugolib.Test(t, files) - // Test1: default state (closed by default) - b.AssertFileContentEquals("public/d1/index.html", - "\n<details>\n <summary>Details</summary>\n <p>Basic example without summary</p>\n</details>\n", - ) - content1 := b.FileContent("public/d1/index.html") - c := qt.New(t) - c.Assert(content1, qt.Not(qt.Contains), "open") - - // Test2: custom summary - b.AssertFileContentEquals("public/d2/index.html", - "\n<details>\n <summary>Custom Summary</summary>\n <p>Example with custom summary text</p>\n</details>\n", - ) - - // Test3: open state - b.AssertFileContentEquals("public/d3/index.html", - "\n<details open>\n <summary>Test Open State</summary>\n <p>Example with open state</p>\n</details>\n", - ) - - // Test4: Test sanitization - b.AssertFileContentEquals("public/d4/index.html", - "\n<details>\n <summary>Test Attribute sanitization</summary>\n <p>Example testing attribute sanitization</p>\n</details>\n", - ) - content4 := b.FileContent("public/d4/index.html") - c.Assert(content4, qt.Not(qt.Contains), "style") - c.Assert(content4, qt.Not(qt.Contains), "onclick") - c.Assert(content4, qt.Not(qt.Contains), "alert") - - // Test5: class attribute - b.AssertFileContentEquals("public/d5/index.html", - "\n<details class=\"custom-class\">\n <summary>Details</summary>\n <p>Example with allowed class attribute</p>\n</details>\n", - ) - - // Test6: name attribute - b.AssertFileContentEquals("public/d6/index.html", - "\n<details name=\"custom-name\">\n <summary>Details</summary>\n <p>Example with allowed name attribute</p>\n</details>\n", - ) - - // Test7: localization - b.AssertFileContentEquals("public/es/d7/index.html", - "\n<details>\n <summary>Detalles</summary>\n <p>Localization example without summary</p>\n</details>\n", + b.AssertFileContent("public/index.html", + "<details>\n <summary>Details</summary>\n <p>A: An <em>emphasized</em> word.</p>\n</details>", + "<details class=\"my-class\" name=\"my-name\" open class=\"my-title\">\n <summary>A <strong>bold</strong> word</summary>\n <p>B: An <em>emphasized</em> word.</p>\n</details>", + "<details>\n <summary>Details</summary>\n <p>C: An <em>emphasized</em> word.</p>\n</details>", + "<details>\n <summary>Details</summary>\n <p>D: An <em>emphasized</em> word.</p>\n</details>", + "<details>\n <summary>Details</summary>\n <p>D: An <em>emphasized</em> word.</p>\n</details>", ) } |