Skip to content

Commit

Permalink
Improvements according to review
Browse files Browse the repository at this point in the history
  • Loading branch information
deining committed Mar 16, 2024
1 parent d16956e commit c8882b5
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions userguide/content/en/docs/adding-content/shortcodes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ Norway Spruce *Picea abies* shoot with foliage buds.
{{%/* /imgproc */%}}
```

Use the syntax above if the inner content and/or the `byline` parameter of your shortcode is authored in markdown. In case of HTML content, use `<>` as innermost delimiters: `{{</* imgproc >}}<b>HTML</b> content{{< /imgproc */>}}`.
Use the syntax above if the inner content and/or the `byline` parameter of your shortcode is authored in markdown. In case of HTML content, use angle brackets `<>` as outermost delimiters: `{{</* imgproc >}}<b>HTML</b> content{{< /imgproc */>}}`.

{{% imgproc spruce Fill "400x450" %}}
Norway Spruce *Picea abies* shoot with foliage buds.
Expand Down Expand Up @@ -327,7 +327,7 @@ in the response headers." you __CAN__ embed it, but when the test says "Great! X

## Tabbed panes

Sometimes it's very useful to have tabbed panes when authoring content. One common use-case is to show multiple syntax highlighted code blocks that showcase the same problem, and how to solve it in different programming languages. As an example, the tabbed pane below shows the language-specific variants of the famous `Hello world!` program one usually writes first when learning a new programming language:
Sometimes it's very useful to have tabbed panes when authoring content. One common use case is to show multiple syntax highlighted code blocks that showcase the same problem, and how to solve it in different programming languages. As an example, the tabbed pane below shows the language-specific variants of the famous `Hello world!` program one usually writes first when learning a new programming language:

{{< tabpane langEqualsHeader=true >}}
{{< tab "C" >}}
Expand Down Expand Up @@ -551,7 +551,7 @@ You may say I'm a dreamer, but I'm not the only one<br/>
I hope someday you'll join us and the world will live as one
{{< /card >}}
{{% card header="**Header**: specified via named parameter `Header`" title="**Card title**: specified via named parameter `title`" subtitle="**Card subtitle**: specified via named parameter `subtitle`" footer="**Footer**: specified via named parameter `footer`" %}}
**Content**: inner content of the shortcode, this may be plain text or formatted text, images, videos, … . If your content is markdown, use the percent sign `%` as outermost delimiter of your `card` shortcode, your markup should look like `{{%/* card */%}}Your **markdown** content{{%/* /card */%}}`. In case of HTML content, use square brackets `<>` as outermost delimiters: `{{</* card */>}}Your <b>HTML</b> content{{</* /card */>}}`
**Content**: inner content of the shortcode, this may be plain text or formatted text, images, videos, … . If your content is markdown, use the percent sign `%` as outermost delimiter of your `card` shortcode, your markup should look like `{{%/* card */%}}Your **markdown** content{{%/* /card */%}}`. In case of HTML content, use angle brackets `<>` as outermost delimiters: `{{</* card */>}}Your <b>HTML</b> content{{</* /card */>}}`
{{% /card %}}
{{% /cardpane %}}

Expand Down Expand Up @@ -763,9 +763,9 @@ If you are using this shortcode, note that when evaluating the conditions, subst

## Accordion

Sometimes it's very useful to have an accordion element at hand when authoring content. One common use-case is FAQ section where only one section (= accordion item) will be open at any time. The following sample showcases a accordion presenting the four principles of object-oriented programming:
Sometimes it's very useful to have an accordion element at hand when authoring content. One common use case is a FAQ section where only one section (= accordion item) will be open at any time. The following sample showcases an accordion presenting the four principles of object-oriented programming:

### Sample accordion: Object-oriented programming
### Sample accordion: object-oriented programming

{{< accordion alwaysOpen=false >}}
{{% accordion-item header="Principle 1:&nbsp;**Abstraction**" %}}
Expand All @@ -782,7 +782,7 @@ Sometimes it's very useful to have an accordion element at hand when authoring c
{{% /accordion-item %}}
{{% /accordion %}}

The Docsy template provides two shortcodes `accordion` and `accordion-item` that let you easily create an accordion component. To see how to use them, have a look at the following code block, which renders to the accordion shown above:
The Docsy template provides two shortcodes, `accordion` and `accordion-item`, that let you easily create an accordion component. To see how to use them, have a look at the following code block, which renders to the accordion shown above:

```go-html-template
{{%/* accordion alwaysOpen=false */%}}
Expand All @@ -803,8 +803,8 @@ The Docsy template provides two shortcodes `accordion` and `accordion-item` that

An accordion component is implemented using two shortcodes:

* The `accordion` shortcode, which is the container element for the collapsible items of the accordion. This shortcode can hold the optional named parameters `alwaysOpen`, and `flush`. Specify `alwaysOpen=true` if you want to make accordion items stay open even when another item is opened.
* The `accordion` shortcode, which is the container element for the collapsible items of the accordion. This shortcode can hold the optional named parameters `alwaysOpen` and `flush`. Specify `alwaysOpen=true` if you want to make accordion items stay open even when another item is opened.

* The various `accordion-item` shortcodes represent the collapsible items of your accordion. Specify the named parameter `header` for each `accordion-item` in order to set the header text of the item. If the `header` parameter is the only parameter inside your `accordion-item` shortcode, you can specify the header as unnamed parameter, something like `{{</* accordion-item "My header" */>}} … {{</* /accordion-item */>}}`. If your `accordion-item` shortcode does not have any parameters, the header of the item will default to `Header n`. When specifying `open=true` for an `accordion-item`, this item will be initially rendered opened (as opposed to an default collapsed item). If your item content is markdown, use the percent sign `%` as outermost delimiter of your `accordion-item` shortcode, your markup should look like `{{%/* accordion-item */%}}`Your \*\*markdown\*\* content`{{%/* /accordion-item */%}}`. In case of HTML content, use square brackets `<>` as outermost delimiters: `{{</* accordion-item */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /accordion-item */>}}`.
* The various `accordion-item` shortcodes represent the collapsible items of your accordion. Specify the named parameter `header` for each `accordion-item` in order to set the header text of the item. If the `header` parameter is the only parameter inside your `accordion-item` shortcode, you can specify the header as unnamed parameter, something like `{{</* accordion-item "My header" */>}} … {{</* /accordion-item */>}}`. If your `accordion-item` shortcode does not have any parameters, the header of the item will default to `Header n`. When specifying `open=true` for an `accordion-item`, this item will be initially rendered opened (as opposed to an default collapsed item). If your item content is markdown, use the percent sign `%` as outermost delimiter of your `accordion-item` shortcode, your markup should look like `{{%/* accordion-item */%}}`Your \*\*markdown\*\* content`{{%/* /accordion-item */%}}`. In case of HTML content, use angle brackets `<>` as outermost delimiters: `{{</* accordion-item */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /accordion-item */>}}`.

[shortcode delimiter]: https://gohugo.io/content-management/shortcodes/#use-shortcodes

0 comments on commit c8882b5

Please sign in to comment.