tiennm99/hugoDocs
1
0 Fork 0
mirror of https://github.com/tiennm99/hugoDocs.git synced 2026-10-14 08:18:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve readability of examples on shortcode templates page

Browse Source
This commit is contained in:
Wong Heung Sang authored and GitHub committed 2021-06-30 06:26:22 -07:00
1 parent 0aef26479a
commit 51e472005c
1 file changed
+17 -17
Download Patch File Download Diff File Expand all files Collapse all files
content/en/templates/shortcode-templates.md
+17 -17
View File
@@ -88,14 +88,14 @@ For the second position, you would just use:
`with` is great when the output depends on a parameter being set: `with` is great when the output depends on a parameter being set:
``` ```
{{ with .Get "class"}} class="{{.}}"{{ end }} {{ with .Get "class" }} class="{{ . }}"{{ end }}
``` ```
`.Get` can also be used to check if a parameter has been provided. This is `.Get` can also be used to check if a parameter has been provided. This is
most helpful when the condition depends on either of the values, or both: most helpful when the condition depends on either of the values, or both:
``` ```
{{ if or (.Get "title") (.Get "alt") }} alt="{{ with .Get "alt"}}{{.}}{{else}}{{.Get "title"}}{{end}}"{{ end }} {{ if or (.Get "title") (.Get "alt") }} alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "title" }}{{ end }}"{{ end }}
``` ```
#### `.Inner` #### `.Inner`
@@ -130,16 +130,16 @@ The `.IsNamedParams` variable checks whether the shortcode declaration uses name
For example, you could create an `image` shortcode that can take either a `src` named parameter or the first positional parameter, depending on the preference of the content's author. Let's assume the `image` shortcode is called as follows: For example, you could create an `image` shortcode that can take either a `src` named parameter or the first positional parameter, depending on the preference of the content's author. Let's assume the `image` shortcode is called as follows:
``` ```
{{</* image src="images/my-image.jpg"*/>}} {{</* image src="images/my-image.jpg" */>}}
``` ```
You could then include the following as part of your shortcode templating: You could then include the following as part of your shortcode templating:
``` ```
{{ if .IsNamedParams }} {{ if .IsNamedParams }}
<img src="{{.Get "src" }}" alt=""> <img src="{{ .Get "src" }}" alt="">
{{ else }} {{ else }}
<img src="{{.Get 0}}" alt=""> <img src="{{ .Get 0 }}" alt="">
{{ end }} {{ end }}
``` ```
@@ -213,17 +213,17 @@ You have created the shortcode at `/layouts/shortcodes/img.html`, which loads th
{{< code file="/layouts/shortcodes/img.html" >}} {{< code file="/layouts/shortcodes/img.html" >}}
<!-- image --> <!-- image -->
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}> <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "link"}}<a href="{{.}}">{{ end }} {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} /> <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
{{ if .Get "link"}}</a>{{ end }} {{ if .Get "link" }}</a>{{ end }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
<figcaption>{{ if isset .Params "title" }} <figcaption>{{ if isset .Params "title" }}
<h4>{{ .Get "title" }}</h4>{{ end }} <h4>{{ .Get "title" }}</h4>{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}<p> {{ if or (.Get "caption") (.Get "attr") }}<p>
{{ .Get "caption" }} {{ .Get "caption" }}
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }} {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
{{ .Get "attr" }} {{ .Get "attr" }}
{{ if .Get "attrlink"}}</a> {{ end }} {{ if .Get "attrlink" }}</a> {{ end }}
</p> {{ end }} </p> {{ end }}
</figcaption> </figcaption>
{{ end }} {{ end }}
@@ -289,7 +289,7 @@ The following is taken from `highlight`, which is a [built-in shortcode][] that
The template for the `highlight` shortcode uses the following code, which is already included in Hugo: The template for the `highlight` shortcode uses the following code, which is already included in Hugo:
``` ```
{{ .Get 0 | highlight .Inner }} {{ .Get 0 | highlight .Inner }}
``` ```
The rendered output of the HTML example code block will be as follows: The rendered output of the HTML example code block will be as follows:
@@ -308,8 +308,8 @@ Hugo's [`.Parent` shortcode variable][parent] returns a boolean value depending
The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` parameter: The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` parameter:
{{< code file="layouts/shortcodes/gallery.html" >}} {{< code file="layouts/shortcodes/gallery.html" >}}
<div class="{{.Get "class"}}"> <div class="{{ .Get "class" }}">
{{.Inner}} {{ .Inner }}
</div> </div>
{{< /code >}} {{< /code >}}
@@ -318,10 +318,10 @@ You also have an `img` shortcode with a single named `src` parameter that you wa
{{< code file="layouts/shortcodes/img.html" >}} {{< code file="layouts/shortcodes/img.html" >}}
{{- $src := .Get "src" -}} {{- $src := .Get "src" -}}
{{- with .Parent -}} {{- with .Parent -}}
<img src="{{$src}}" class="{{.Get "class"}}-image"> <img src="{{$src}}" class="{{ .Get "class" }}-image">
{{- else -}} {{- else -}}
<img src="{{$src}}"> <img src="{{$src}}">
{{- end }} {{- end -}}
{{< /code >}} {{< /code >}}
You can then call your shortcode in your content as follows: You can then call your shortcode in your content as follows: