github/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2025-02-17 02:52:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update shortcode doc for 0.13-DEV

Browse source 
Update of the doc to reflect the shortcode  implemention in HEAD.
This commit is contained in:
bep 2014-11-18 17:49:43 +01:00 committed by spf13
parent cb3576b6de
commit 728d0fa32c
1 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
docs/content/extras/shortcodes.md
View file

@ -35,16 +35,32 @@ can be quoted).
The first word is always the name of the shortcode. Parameters follow the name. The first word is always the name of the shortcode. Parameters follow the name.
The format for named parameters models that of HTML with the format The format for named parameters models that of HTML with the format
`name="value"`. The current implementation only supports this exact format. Extra `name="value"`.
spaces or different quotation marks will not parse properly.
Some shortcodes use or require closing shortcodes. Like HTML, the opening and closing Some shortcodes use or require closing shortcodes. Like HTML, the opening and closing
shortcodes match (name only), the closing being prepended with a slash. shortcodes match (name only), the closing being prepended with a slash.
Example of a paired shortcode: Example of a paired shortcode:
{{%/* highlight go */%}} A bunch of code here {{%/* /highlight */%}} {{</* highlight go */>}} A bunch of code here {{</* /highlight */>}}
The examples above use two different delimiters, the difference being the `%` and the `<` character:
### Shortcodes with Markdown
The `%` characters indicates that the shortcode's inner content needs further processing by the page's rendering processor (i.e. Markdown), needed to get the **bold** text in the example below:
```
{{%/* myshortcode */%}}Hello **World!**{{%/* /myshortcode */%}}
```
### Shortcodes without Markdown
The `<` character indicates that the shortcode's inner content doesn't need any further rendering, this will typically be pure HTML:
```
{{</* myshortcode */>}}<p>Hello <strong>World!</strong></p>{{</* /myshortcode */>}}
```
## Hugo Shortcodes ## Hugo Shortcodes
@ -61,7 +77,7 @@ closing shortcode.
#### Example #### Example
{{%/* highlight html */%}} {{</* highlight html */>}}
<section id="main"> <section id="main">
<div> <div>
<h1 id="title">{{ .Title }}</h1> <h1 id="title">{{ .Title }}</h1>
@ -70,7 +86,7 @@ closing shortcode.
{{ end }} {{ end }}
</div> </div>
</section> </section>
{{%/* /highlight */%}} {{</* /highlight */>}}
#### Example Output #### Example Output
@ -101,9 +117,8 @@ closing shortcode.
* alt * alt
#### Example #### Example
*Example has an extra space so Hugo doesn’t actually render it*.
{{%/* figure src="/media/spf13.jpg" title="Steve Francia" */%}} {{</* figure src="/media/spf13.jpg" title="Steve Francia" */>}}
#### Example output #### Example output
@ -156,7 +171,7 @@ You can also use the variable `.Page` to access all the normal [Page Variables](
## Single Positional Example: youtube ## Single Positional Example: youtube
{{%/* youtube 09jf3ow9jfw */%}} {{</* youtube 09jf3ow9jfw */>}}
Would load the template /layouts/shortcodes/youtube.html Would load the template /layouts/shortcodes/youtube.html
@ -176,9 +191,8 @@ This would be rendered as:
</div> </div>
## Single Named Example: image with caption ## Single Named Example: image with caption
*Example has an extra space so Hugo doesn’t actually render it*
{{%/* img src="/media/spf13.jpg" title="Steve Francia" */%}} {{</* img src="/media/spf13.jpg" title="Steve Francia" */>}}
Would load the template /layouts/shortcodes/img.html Would load the template /layouts/shortcodes/img.html
@ -213,13 +227,11 @@ Would be rendered as:
## Paired Example: Highlight ## Paired Example: Highlight
*Hugo already ships with the `highlight` shortcode* *Hugo already ships with the `highlight` shortcode*
*Example has an extra space so Hugo doesn’t actually render it*. {{</* highlight html */>}}
{{%/* highlight html */%}}
<html> <html>
<body> This HTML </body> <body> This HTML </body>
</html> </html>
{{%/* /highlight */%}} {{</* /highlight */>}}
The template for this utilizes the following code (already include in Hugo) The template for this utilizes the following code (already include in Hugo)