diff options
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | layouts/partials/sidebar.html | 2 | ||||
| -rw-r--r-- | layouts/shortcodes/codecaption.html | 7 |
3 files changed, 6 insertions, 7 deletions
@@ -168,7 +168,9 @@ If more than links are added, then add a `</br>` between the first four and the Icons are from [http://fontawesome.io](http://fontawesome.io) by Dave Gandy. To use icons with square dark backgrounds add `-square`. For example `<i class="fa fa-twitter-square fa-3x"></i>`. Size can be from 1 to 5 or `fa-lg` to be adaptive. ## <a name="shortcodes"></a>Shortcodes -Creating [shortcodes](https://gohugo.io/extras/shortcodes/) in Hugo was surprisingly easy. I used two plugins in Octopress that I re-created in Hugo using shortcodes. They add captions to code blocks and images. These shortcodes are located at `hugo-octopress/layouts/shortcodes/` +Creating [shortcodes](https://gohugo.io/extras/shortcodes/) in Hugo was surprisingly easy. I used two plugins in Octopress that I re-created in Hugo using shortcodes. They add captions to code blocks and images. These shortcodes are located at `hugo-octopress/layouts/shortcodes/`. + +I have created a repository for all of my shortcodes at [https://github.com/parsiya/Hugo-Shortcodes](https://github.com/parsiya/Hugo-Shortcodes). ### <a name="codecaption"></a>Code caption This shortcode adds a caption to codeblocks. The codeblock is wrapped in a `<figure>` tag and caption is added using `<figcaption>`. It has two parameters, `title` which is the caption of the code block and `lang` which is the language that is passed to the Hugo `highlight` function along with `linenos=true` which adds line numbers to the codeblock. diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index fbb8135..bb72c71 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -55,7 +55,7 @@ {{ end }} {{ range first ($.Scratch.Get "numberofrecentposts") .Site.Pages }} <li class="post"> - <a href="{{ .RelPermalink }}">{{.Title}}</a> + <a href="{{ .RelPermalink }}">{{ .Title }}</a> </li> {{ end }} </ul> diff --git a/layouts/shortcodes/codecaption.html b/layouts/shortcodes/codecaption.html index 6ce6536..dca5d3f 100644 --- a/layouts/shortcodes/codecaption.html +++ b/layouts/shortcodes/codecaption.html @@ -1,5 +1,4 @@ - -<!-- codecaption short code - basically this is normal highlighted code with caption on top +<!-- codecaption short code - basically this is normal highlighted code with caption on top example usage (Hugo seems to ignore stuff in this): { { < codecaption lang="language e.g. python/csharp" title="captiontitle" > } } @@ -8,13 +7,11 @@ { { < /codecaption > } } --> - - <figure class="code"> <figcaption> <span>{{ .Get "title" }}</span> </figcaption> - <div class="codewrapper"> + <div class="codewrapper"> {{ highlight .Inner (.Get "lang") "linenos=true" }} </div> </figure> |