github/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2024-11-21 20:46:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

Docs: improve shortcodes page

Browse source 
See #1613
This commit is contained in:
digitalcraftsman 2015-11-24 22:22:58 +01:00 committed by Anthony Fok
parent cf732940a3
commit 2e3d5c2df6
1 changed files with 5 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -103,8 +103,6 @@ closing shortcode.
<span style="color: #f92672">&lt;/div&gt;</span> <span style="color: #f92672">&lt;/div&gt;</span>
<span style="color: #f92672">&lt;/section&gt;</span> <span style="color: #f92672">&lt;/section&gt;</span>
***
### figure ### figure
`figure` is simply an extension of the image capabilities present with Markdown. `figure` is simply an extension of the image capabilities present with Markdown.
@ -136,8 +134,6 @@ closing shortcode.
</figcaption> </figcaption>
</figure> </figure>
***
### ref, relref ### ref, relref
These shortcodes will look up the pages by their relative path (e.g., These shortcodes will look up the pages by their relative path (e.g.,
@ -165,57 +161,45 @@ Assuming that standard Hugo pretty URLs are turned on.
<a href="/blog/neat">Neat</a> <a href="/blog/neat">Neat</a>
<a href="/about/#who:c28654c202e73453784cfd2c5ab356c0">Who</a> <a href="/about/#who:c28654c202e73453784cfd2c5ab356c0">Who</a>
***
### Twitter ### Twitter
You want to include a single tweet into your blog post? Everything you need is the URL of the tweet: You want to include a single tweet into your blog post? Everything you need is the URL of the tweet:
https://twitter.com/spf13/status/666616452582129664 https://twitter.com/spf13/status/666616452582129664
Pass the tweet's id from the URL as parameter to the shortcode as shown below: Pass the tweet's id from the URL as parameter to the shortcode as shown below:
{{</* tweet 666616452582129664 */>}} {{</* tweet 666616452582129664 */>}}
***
### Youtube ### Youtube
This shortcode embeds a responsive video player for Youtube videos. Only the id of the video is required: This shortcode embeds a responsive video player for Youtube videos. Only the id of the video is required:
https://www.youtube.com/watch?v=w7Ft2ymGmfc https://www.youtube.com/watch?v=w7Ft2ymGmfc
Copy the id from behind `v=` and pass it the shortcode: Copy the id from behind `v=` and pass it the shortcode:
{{</* youtube w7Ft2ymGmfc */>}} {{</* youtube w7Ft2ymGmfc */>}}
***
### Vimeo ### Vimeo
Adding a video from Vimeo is equivalent to the Youtube shortcode above. Extract the id from the URL Adding a video from Vimeo is equivalent to the Youtube shortcode above. Extract the id from the URL
https://vimeo.com/channels/staffpicks/146022717 https://vimeo.com/channels/staffpicks/146022717
and pass it to the shortcode: and pass it to the shortcode:
{{</* vimeo 146022717 */>}} {{</* vimeo 146022717 */>}}
***
### Github gists ### Github gists
Including code snippets with Github gists while writing a tutorial is common situation bloggers face. With a given URL of the gist Including code snippets with Github gists while writing a tutorial is common situation bloggers face. With a given URL of the gist
https://gist.github.com/spf13/7896402 https://gist.github.com/spf13/7896402
pass the owner and the id of the gist to the shortcode: pass the owner and the id of the gist to the shortcode:
{{</* gist spf13 7896402 */>}}
{{</* gist spf13 7896402 */>}}
***
### Speakerdeck ### Speakerdeck
@ -228,8 +212,6 @@ Extract the value from the field `id` and pass it to the shortcode:
{{</* speakerdeck 4e8126e72d853c0060001f97 */>}} {{</* speakerdeck 4e8126e72d853c0060001f97 */>}}
***
## Creating your own shortcodes ## Creating your own shortcodes
To create a shortcode, place a template in the layouts/shortcodes directory. The To create a shortcode, place a template in the layouts/shortcodes directory. The