github/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2024-11-07 20:30:36 -05: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 format for named parameters models that of HTML with the format
`name="value"`. The current implementation only supports this exact format. Extra
spaces or different quotation marks will not parse properly.
`name="value"`.
Some shortcodes use or require closing shortcodes. Like HTML, the opening and closing
shortcodes match (name only), the closing being prepended with a slash.
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
@ -61,7 +77,7 @@ closing shortcode.
#### Example
{{%/* highlight html */%}}
{{</* highlight html */>}}
<section id="main">
<div>
<h1 id="title">{{ .Title }}</h1>
@ -70,7 +86,7 @@ closing shortcode.
{{ end }}
</div>
</section>
{{%/* /highlight */%}}
{{</* /highlight */>}}
#### Example Output
@ -101,9 +117,8 @@ closing shortcode.
* alt
#### 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
@ -156,7 +171,7 @@ You can also use the variable `.Page` to access all the normal [Page Variables](
## Single Positional Example: youtube
{{%/* youtube 09jf3ow9jfw */%}}
{{</* youtube 09jf3ow9jfw */>}}
Would load the template /layouts/shortcodes/youtube.html
@ -176,9 +191,8 @@ This would be rendered as:
</div>
## 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
@ -213,13 +227,11 @@ Would be rendered as:
## Paired Example: Highlight
*Hugo already ships with the `highlight` shortcode*
*Example has an extra space so Hugo doesn’t actually render it*.
{{%/* highlight html */%}}
{{</* highlight html */>}}
<html>
<body> This HTML </body>
</html>
{{%/* /highlight */%}}
{{</* /highlight */>}}
The template for this utilizes the following code (already include in Hugo)