Locally implemented shortcode: blockquote I found this post1 on how to make fancier blockquotes.
Port of the Octopress blockquote plugin at http://octopress.org/docs/plugins/blockquote/.
It supports author, link, source and title. If title is not provided and link is longer than 32 characters, it is cut at the last forward slash similar to the original plugin.
It can be used as follows (also in tests/wp-test.markdown):
Normal quote: This is a simple quote.
Quote with author This is a quote with only an Author named Author2.
This shortcode came from hugo-geekblog Boxes can be used to create a simple grid.
Attributes Name Description default size size of each box (regular|large) regular icon (optional) title bar icon, need to be an icon from an SVG sprite undefined title (optional) title bar text undefined Usage 1 2 3 4 5 6 {{< boxes "contact" >}} {{< box size=large [title=E-Mail icon=gdoc_email] >}}mail@example.com{{< /box >}} {{< box size=large title=Matrix icon=gdoc_matrix >}}@john:example.com{{< /box >}} {{< box size=large title=XMPP icon=gdoc_xmpp >}}john@example.
Locally implemented shortcode: codecaption I found this post1 on how to make a code content shortcode which has a title. I’ve modified it a bit.
note: the list of supported languages in chroma can be found here2 The codecaption shortcode:
1 2 3 {{<codecaption lang="html" title="insert... uh... title... here" options="linenos=false" showlang="true" >}} <html></html> {{</codecaption >}} Should work as expected: insert... uh... title... hereLang: html <html></html> 1 2 3 4 5 6 {{<codecaption lang="shell" title="BOFH fsck" options="hl_lines=4" >}} #!
Locally implemented shortcode: jewel I found this post on how to make a shortcode which shows a given color. I’ve implemented it in our rig as two different shortcodes.
Jewel 1 {{< jewel "blue" >}} Should work as expected: blue This is managed by the file layouts/shortcodes/jewel.html
There is also the color variant of this shortcode which is managed through the file layouts/shortcodes/color.html
Locally implemented shortcode: color I found this post on how to make a shortcode which shows a given color. I’ve implemented it in our rig as two different shortcodes.
The color shortcode:
1 {{<color "blue" >}} Should work as expected: blue This is managed by the file layouts/shortcodes/color.html
There is also the jewel variant of this shortcode which is managed through the file layouts/shortcodes/jewel.html
Locally implemented shortcode: divider I found this shortcode1 on making a fancypants divider. I’ve implemented it in our rig as the divider shortcode:
1 {{<divider >}} Should work as expected: 🐾 This is managed by the file layouts/shortcodes/divider.html
https://livebook.manning.com/book/hugo-in-action/chapter-4/213 ↩︎
Locally implemented shortcode: svg I found this question on how to add an svg to a page. Specifically one that’s animated.
There’s a few ways, obviously, but the solution suggested by rdwatters was easy enough to -steal- implement.
SVG 1 {{< svg "images/water-drop.svg" >}} Should work as expected: This is managed by the file layouts/shortcodes/svg.html
Hugo has several built-in shortcodes.
Lets go over them here:
Gist Takes the user and gist ID as parameters and renders a GitHub gist. You can also pass a filename if the gist has multiple files. Expand ↕ Ref Takes a file path in the Hugo website and provides an absolute link to that file. If the url or slug is overridden in the front matter of a page, the ref shortcode follows the newly provided location.
Simple wrapper to generate a page Table of Content from a shortcode.
1 {{< toc >}} Level 1 Level 2 Level 2.1 Level 2.1.1 Level 2.1.1.1 Level 2.1.1.1.1 Level 2.2 Level 1 Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad.
This shortcode came from hugo-geekblog Boxes can be used to create a simple grid.
Progress Attributes Name Description default value progress value 0 icon (optional) icon to use, need to be an icon from an SVG sprite undefined title (optional) progress title undefined Usage 1 {{< progress title=Eating value=65 icon=shield-dog >}} Example Eating 65%
Front Matter Variables Yaml version 1 2 3 4 5 6 7 8 9 10 11 12 13 categories: - Development - VIM date: "2012-04-06" description: spf13-vim is a cross platform distribution of vim plugins and resources for Vim. slug: spf13-vim-3-0-release-and-new-website tags: - .vimrc - plugins - spf13-vim - vim title: spf13-vim 3.0 release and new website Canonical source here
Predefined There are a few predefined variables that Hugo is aware of. See Page Variables for how to call many of these predefined variables in your templates.
Buttons are styled links that can lead to local page or external link.
1 2 {{< button relref="/" [class="...", size="large|regular"] >}}Get Home{{< /button >}} {{< button href="https://github.com/thegeeklab/hugo-geekdoc" >}}Contribute{{< /button >}} Example Get Home Contribute
The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
Attributes Name Description default size (optional) size of the first column (small|regular|large) regular Usage 1 2 3 4 5 6 7 8 9 10 11 12 13 14 {{< columns >}} <!-- begin columns block --> ## Left Content Dolor sit, sumo unique argument um no ... <---> <!-- magic separator, between columns --> ## Mid Content Dolor sit, sumo unique argument um no .
