#nav-small-js {display:none;}

This Theme Shortcodes

/hugo-theme-w3css-basic.github.io/pages/hugo-theme-w3css-basic/page-shortcodes/img/pixabay.com/penguin-2104173_1920_hu8926704450254520434.jpg

You can extend Hugo’s built-in shortcodes by creating your own using the same templating syntax as that for single and list pages.

Shortcodes are a means to consolidate templating into small, reusable snippets that you can embed directly inside of your content. In this sense, you can think of shortcodes as the intermediary between page and list templates and basic content files.

https://gohugo.io/templates/shortcode-templates

Shortcodes in this Theme for W3.CSS classes

alert

Inspired by http://getbootstrap.com/docs/4.0/components/alerts/ and https://www.w3schools.com/w3css/w3css_panels.asp

Configuration is in params.toml:

colorAlertPrimary                     = "w3-purple"
colorAlertSecondary                   = "w3-aqua"
colorAlertSuccess                     = "w3-light-green"
colorAlertInfo                        = "w3-light-blue"
colorAlertWarning                     = "w3-yellow"
colorAlertDanger                      = "w3-red"
colorAlertDark                        = "w3-dark-grey"
colorAlertLight                       = "w3-grey"

{{< alert type="primary"   intro="Primary Alert"   >}}This is a primary alert—check it out!   {{< /alert >}}
{{< alert type="secondary" intro="Secondary Alert" >}}This is a secondary alert—check it out! {{< /alert >}}
{{< alert type="success"   intro="Success Alert"   >}}This is a success alert—check it out!   {{< /alert >}}
{{< alert type="info"      intro="Info Alert"      >}}This is a info alert—check it out!      {{< /alert >}}
{{< alert type="warning"   intro="Warning Alert"   >}}This is a warning alert—check it out!   {{< /alert >}}
{{< alert type="danger"    intro="Danger Alert"    >}}This is a danger alert—check it out!    {{< /alert >}}
{{< alert type="dark"      intro="Dark Alert"      >}}This is a dark alert—check it out!      {{< /alert >}}
{{< alert type="light"     intro="Light Alert"     >}}This is a light alert—check it out!     {{< /alert >}}

Primary Alert This is a primary alert—check it out!

Secondary Alert This is a secondary alert—check it out!

Success Alert This is a success alert—check it out!

Info Alert This is a info alert—check it out!

Warning Alert This is a warning alert—check it out!

Danger Alert This is a danger alert—check it out!

Dark Alert This is a dark alert—check it out!

Light Alert This is a light alert—check it out!

w3-notice-icon

Inspired by W3.CSS Notes

Style

these colors are separate from the ones in w3cssColorTheme

Defined in:

static/css/w3css-basic.css

/* for shortcodes w3-notice-icon and w3-alert-icon */
.shortcode-danger {
  border-color:#f44336!important
}
.shortcode-warning {
  border-color:#ffeb3b!important
}
.shortcode-info  {
  border-color:#2196F3!important
}
.shortcode-exclamation  {
  border-color:#2a8!important
}
.shortcode-success{
  border-color:#4CAF50!important
}

Success

{{% w3-notice-icon type="success" %}}
Well done
{{% /w3-notice-icon %}}

renders as

Well done

{{% w3-notice-icon type="success"  heading="Well done" %}}
Well done
{{% /w3-notice-icon %}}

renders as

Well done

A message with header

Info

{{% w3-notice-icon %}}
A default disclaimer (=> info)
{{% /w3-notice-icon %}}

renders as

A default disclaimer (=> info)

{{% w3-notice-icon heading="I'm a heading" %}}
A default disclaimer with header
{{% /w3-notice-icon %}}

renders as

I'm a heading

A default disclaimer with header

{{% w3-notice-icon type="info" heading="Show Info" %}}
No need for type="info", since this is the default
{{% /w3-notice-icon %}}

renders as

Show Info

No need for type="info", since this is the default

Exclamation

{{% w3-notice-icon type="exclamation" heading="Show Info" %}}
Type="exclamation" - check it out
{{% /w3-notice-icon %}}

renders as

Show Info

Type="exclamation" - check it out

Warning

{{% w3-notice-icon type="warning" heading="Keep in mind" %}}
A warning disclaimer
{{% /w3-notice-icon %}}

renders as

Keep in mind

A warning disclaimer

Danger

{{% w3-notice-icon type="danger" %}}
A check disclaimer
{{% /w3-notice-icon %}}

renders as

Watch out

{{% w3-notice-icon type="danger" heading="Careful" %}}
Watch out
{{% /w3-notice-icon %}}

renders as

Careful

Watch out

w3-alert-icon

I ignored W3.CSS Alerts
used borders instead

Some examples:

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


{{% w3-alert-icon type="success" %}}
Hi, I'm a success
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="info" heading="I'm info" %}}
An info with title
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="warning" %}}
A warning
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="danger" %}}
Danger: A stronger warning
{{% /w3-alert-icon %}}

{{% w3-alert-icon type="warning" heading="You have been warned"  %}}
A warning with heading
{{% /w3-alert-icon %}}

w3-button-icon

{{% w3-button-icon                                                %}}Hello world{{% /w3-button-icon %}}
{{% w3-button-icon icon="fab fa-google" href="https://google.com" %}}take me to Google{{% /w3-button-icon %}}
{{% w3-button-icon "/blog"                                        %}}take me to Blog{{% /w3-button-icon %}}
{{% w3-button-icon "/faq" "far fa-question-circle"                %}}take me to FAQ{{% /w3-button-icon %}}
{{% w3-button-icon icon="fas fa-exclamation-triangle" classes="w3-button w3-circle w3-theme-d3" %}}Purge{{% /w3-button-icon %}}

renders to:

w3-badge

Inspired by W3.CSS Badges

{{% w3-badge            %}}42{{% /w3-badge %}}
{{% w3-badge "w3-green" %}}42{{% /w3-badge %}}

w3-tag

Inspired by W3.CSS Tags

I'm a big one: 42

created with:

{{% w3-tag                    %}}42{{% /w3-tag %}}
{{% w3-tag "w3-blue w3-jumbo" %}}42{{% /w3-tag %}}

w3-quote

Inspired by W3.CSS Quotes

Some examples:

{{% w3-quote }}
*a fool with a tool is still a fool*
{{% /w3-quote %}}

{{% w3-quote source="Igor Stravinsky" layout="icon" %}}
**A good composer does not imitate; he steals.**
{{% /w3-quote %}}

{{% w3-quote source="Albert Einstein" layout="icon-br" %}}
*Life is like riding a bicycle. To keep your balance, you must keep moving*
{{% /w3-quote %}}

a fool with a tool is still a fool

A good composer does not imitate; he steals.

Igor Stravinsky

Life is like riding a bicycle. To keep your balance, you must keep moving

Albert Einstein

using blockquote:

{{% w3-quote source="Albert Einstein" layout="blockquote" %}}
*The true sign of intelligence is not knowledge but imagination*
{{% /w3-quote %}}

{{% w3-quote source="Albert Einstein" layout="icon-br-blockquote" %}}
*The only source of knowledge is experience*
{{% /w3-quote %}}

{{% w3-quote source="Albert Einstein" layout="icon-blockquote" %}}
*Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.*
{{% /w3-quote %}}

The true sign of intelligence is not knowledge but imagination
Albert Einstein

The only source of knowledge is experience
Albert Einstein

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.
Albert Einstein

Style

static/css/w3css-basic.css

/* for shortcode w3-quote */
.shortcode-quote {
  border-color:#4CAF50!important
}

.shortcode-quote-source {
  font-style: italic;
  font-weight: bold;
}

w3-codespan

Inspired by W3.CSS Code
Highlight Inline Code
all on one line

... command: {{% w3-codespan %}}startup *all*{{% /w3-codespan %}} just try it...
... command: {{< w3-codespan >}}startup *all*{{< /w3-codespan >}} just try it...

This is a cool command: startup all just try it... This is a cool command: startup *all* just try it...

Style

these colors are separate from the ones in w3cssColorTheme

Defined in:

static/css/w3css-basic.css

pre.w3-code, span.w3-codespan{
  font-family:monospace,monospace; !important;
  font-size:1em
}

pre.w3-code, pre.chroma {
    border-radius:4px;
    padding: 0 3px 0 3px;
    border: 1px solid;
    overflow: auto;
}

w3-code

Inspired by W3.CSS Code
show code block - but no highlighting

{{< w3-code >}}
genpasswd() {
    local l=$1
    [ "$l" == "" ] && l=16
    tr -dc A-Za-z0-9 < /dev/urandom | head -c ${l} | xargs
}

genpasswd $1
{{< /w3-code >}}

renders as

genpasswd() {
    local l=$1
    [ "$l" == "" ] && l=16
    tr -dc A-Za-z0-9 < /dev/urandom | head -c ${l} | xargs
}

genpasswd $1

Style

static/css/w3css-basic.css

pre.w3-code, span.w3-codespan{
  font-family:monospace,monospace; !important;
  font-size:1em
}

pre.w3-code, pre.chroma {
    border-radius:4px;
    padding: 0 3px 0 3px;
    border: 1px solid;
    overflow: auto;
}

Other Shortcodes in this Theme

icon

{{< icon "fas fa-home">}}
{{< icon "fas fa-home fa-2x" >}}

renders as

{{< icon name="fas fa-home" >}}
{{< icon name="fas fa-home" size="fa-2x" >}}

renders as

csc

use a chromastyle color within text (span)

{{< csc >}}hugo -w -v server --themesDir ../../ --port 1414 --disableFastRender{{< /csc >}}

renders as

Here' a cool command: hugo -w -v server --themesDir ../../ --port 1414 --disableFastRender . But you may use this: hugo -w server. Have fun.

You may give a class name {{< csc k >}}cool code{{< /csc >}}.

renders as

You may give a class name cool code .

Background style for csc is in static/css/w3css-basic.css:

code.chroma {
  background-color: rgba(255, 255, 255, .4) ; /* used e.g. for csc* shortcodes */
}

   | Class   | Type                     |
   | ------- | ------------------------ |
   | err     | Error                    |
   | lntd    | LineTableTD              |
   | lntable | LineTable                |
   | hl      | LineHighlight            |
   | lnt     | LineNumbersTable         |
   | ln      | LineNumbers              |
   | k       | Keyword                  |
   | kc      | KeywordConstant          |
   | kd      | KeywordDeclaration       |
   | kn      | KeywordNamespace         |
   | kp      | KeywordPseudo            |
   | kr      | KeywordReserved          |
   | kt      | KeywordType              |
   | na      | NameAttribute            |
   | nb      | NameBuiltin              |
   | nc      | NameClass                |
   | no      | NameConstant             |
   | nd      | NameDecorator            |
   | ni      | NameEntity               |
   | ne      | NameException            |
   | nf      | NameFunction             |
   | nl      | NameLabel                |
   | nn      | NameNamespace            |
   | nt      | NameTag                  |
   | nv      | NameVariable             |
   | s       | LiteralString            |
   | sa      | LiteralStringAffix       |
   | sb      | LiteralStringBacktick    |
   | sc      | LiteralStringChar        |
   | dl      | LiteralStringDelimiter   |
   | sd      | LiteralStringDoc         |
   | s2      | LiteralStringDouble      |
   | se      | LiteralStringEscape      |
   | sh      | LiteralStringHeredoc     |
   | si      | LiteralStringInterpol    |
   | sx      | LiteralStringOther       |
   | sr      | LiteralStringRegex       |
   | s1      | LiteralStringSingle      |
   | ss      | LiteralStringSymbol      |
   | m       | LiteralNumber            |
   | mb      | LiteralNumberBin         |
   | mf      | LiteralNumberFloat       |
   | mh      | LiteralNumberHex         |
   | mi      | LiteralNumberInteger     |
   | il      | LiteralNumberIntegerLong |
   | mo      | LiteralNumberOct         |
   | o       | Operator                 |
   | ow      | OperatorWord             |
   | c       | Comment                  |
   | ch      | CommentHashbang          |
   | cm      | CommentMultiline         |
   | c1      | CommentSingle            |
   | cs      | CommentSpecial           |
   | cp      | CommentPreproc           |
   | cpf     | CommentPreprocFile       |
   | gd      | GenericDeleted           |
   | ge      | GenericEmph              |
   | gr      | GenericError             |
   | gh      | GenericHeading           |
   | gi      | GenericInserted          |
   | go      | GenericOutput            |
   | gp      | GenericPrompt            |
   | gs      | GenericStrong            |
   | gu      | GenericSubheading        |
   | gt      | GenericTraceback         |
   | w       | TextWhitespace           |

cscb

use a chromastyle color for a block

{{< cscb s >}}
static/css/syntax/syntax.autumn.css
static/css/syntax/syntax.borland.css
static/css/syntax/syntax.bw.css
{{< /cscb >}}

renders as


static/css/syntax/syntax.autumn.css
static/css/syntax/syntax.borland.css
static/css/syntax/syntax.bw.css

Terminal

term-in

show text to type in terminal (no syntax coloring)

{{< term-in >}}
date -d @1435225258
date +%Y%m%d_%H%M%S
{{< /term-in >}}

renders as

date -d @1435225258
date +%Y%m%d_%H%M%S

term-out

show output in terminal (no syntax coloring)

{{< term-out >}}
Don Jun 25 11:40:58 CEST 2015
20180710_172103
{{< /term-out >}}

renders as

Don Jun 25 11:40:58 CEST 2015
20180710_172103

Style

Color themes are defined in the shortcuts:

<pre class="terminal-in  w3-theme-d5 notranslate">{{ .Inner }}</pre>
<pre class="terminal-out w3-theme-l3 notranslate">{{ .Inner }}</pre>

Relevant CSS is in static/css/w3css-basic.css

pre.terminal-in {
  border-radius:    6px;
  border:           1px solid;
  padding:          10px 6px 10px 6px;
  overflow:         auto;
  line-height:      1.2;
}

pre.terminal-out {
  border-radius:    6px;
  padding:          10px 6px 10px 6px;
  border:           1px solid;
  overflow:         auto;
  line-height:      1.2;
}

Page Resources

res-attach

See https://gohugo.io/content-management/page-resources/
See Attachments via Hugo Page Resources for more information

{{< res-attach >}}

Attachments

Parameters

Argument	Position -1	Default	What	Remark
path	0	"."	path to resource page
match	1	**	glob
label	2	Attachments	label	piped into i18n
icon	3	fas fa-paperclip	label icon

res-figure

See https://gohugo.io/content-management/image-processing/ inspired by layouts/shortcodes/imgproc.html
See Hugo image processing (res-figure) for more information

{{< res-figure "." "img/pixabay.com/penguin-21*" />}}
{{< res-figure "." "img/pixabay.com/penguin-21*" "Fit"  "200x200" />}}
{{< res-figure "." "img/pixabay.com/penguin-21*" "Fill" "200x200" />}}
{{< res-figure path="." match="img/pixabay.com/penguin-21*" href="https://google.com" />}}

Resize '300x'
penguin-2104173_1920
pixabay.com
Creative Commons CC0

Fit '200x200'
penguin-2104173_1920
pixabay.com
Creative Commons CC0

Fill '200x200'
penguin-2104173_1920
pixabay.com
Creative Commons CC0

resources:
  - src:           img/pixabay/*.jpg
    params:
      origin:      pixabay.com
      license:     Creative Commons CC0
      licenselink: https://pixabay.com/en/service/terms/#usage
      caption:     "%%I%%n%%B%%n%%O"
  - src:           img/pixabay/penguin-2104173_1920.jpg
    params:
      originlink:  https://pixabay.com/en/penguin-rockhopper-penguin-zoo-2104173/
      attrby:      Michael Frankenstein
      attrlink:    https://pixabay.com/en/users/frankenstein-2135887/
      imgcmd:      Resize
      imgopt:      400x

Parameters

Argument	Position -1	Default	What	Remark
path	0	"."	path to resource page	use . for current page
match	1	*	images	in page resource
cmd	2	Resize	command	Fill, Fit or Resize
opt	3	300x	options	command options
cap	4	%%N	caption format	see below
href	5		url when clicked

Caption format

Code	What
%%n	newline
%%f	.Name
%%F	Filename
%%B	Basename
%%T	.Title
%%N	.Title or Basename
%%L	license
%%O	origin
%%A	attr
%%I	image info

res-gallery

inspired by Hugo Easy Gallery
uses page resources and image processing

{{< res-gallery-load-photoswipe >}}
{{< res-gallery match="teaserpics/gohugo.io/*" >}}

renders as

Golang a closer look<br/><br/><a href='https://github.com/gohugoio/hugo/blob/master/LICENSE' target='_blank'>Apache License 2.0</a><br/>github.com/gohugoio — github.com/gohugoio
Apache-2.0

Hugo dolor<br/><br/><a href='https://github.com/gohugoio/hugo/blob/master/LICENSE' target='_blank'>Apache License 2.0</a><br/>github.com/gohugoio — github.com/gohugoio
Apache-2.0

Hugo ipsum<br/><br/><a href='https://github.com/gohugoio/hugo/blob/master/LICENSE' target='_blank'>Apache License 2.0</a><br/>github.com/gohugoio — github.com/gohugoio
Apache-2.0

Hugo lorem<br/><br/><a href='https://github.com/gohugoio/hugo/blob/master/LICENSE' target='_blank'>Apache License 2.0</a><br/>github.com/gohugoio — github.com/gohugoio
Apache-2.0

Parameters

only named parameters

Argument	Default	What	Remark
path	resources/images	path to resource page	use . for current
match	*/	for .Match
imgCmd	Resize
imgOpt	800x
thumbCmd	Fit	create thumb
thumbOpt	120x120	thumb size
capLng	`%%F`	image caption
capSrt	`%%N`	thumb caption
caption-position	center		none top center bottom (none => hide for thumbs)
caption-effect	appear		none fade appear slide (none => always visible)
hover-effect	zoom		none grow shrink slidedown slideup zoom
hover-transition			(empty or) none (none => hard transition)

Page Resources Metadata

Front Matter Param	What	Remark
Title
attrBy	attribution names
attrLink	attribution link
caption	see below
captionLong	same as caption	caption for image
captionShort		caption for thumb
imgCmd
imgOpt
license
licenseAbrv
licenseLink
licenseLink
origin
originLink
thumbCmd
thumbOpt

  - src:           "**/pixabay.com/*"
    params:
      origin:       pixabay.com
      license:      Creative Commons CC0
      licenseAbrv:  CC0 1.0
      licenseLink:  https://pixabay.com/en/service/terms/
      caption:      "%%N%%n%%A%%n%%L%%n%%O"
      captionShort: "%%O%%n%%l"

Caption format

Code	What
%%n	newline
%%f	.Name
%%F	Filename
%%B	Basename
%%T	.Title
%%N	.Title or Basename
%%l	license (using licenseabrv)
%%L	license
%%O	origin
%%A	attr
%%I	image info

Style

See static/css/res-gallery.css

heg-gallery

kind of obsoleted by res-gallery
taken from https://github.com/liwenyip/hugo-easy-gallery/ https://www.liwen.id.au/heg/

{{< heg-load-photoswipe >}}
{{< heg-gallery dir="/images/teaserpics/gohugo.io"   caption-effect="none" hover-effect="grow" />}}

renders as

Style

Defined in:

static/css/w3css-basic.css

/* -------------------------------------------------- */
/* hugo-easy-gallery */
.gallery figcaption,
.fancy-figure figcaption {
  background: #000;
  color: #FFF;
  font-size: 85%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

.gallery .box figure {
  float: left;
  margin: 1em 4px;
}

.gallery {
  margin: 10px;
  max-width: none;
}

.gallery .box {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

@media only screen and (min-width : 365px) {
  .gallery .box {
    width: 50%;
    padding-bottom: 50%;
  }
}

@media only screen and (min-width : 480px) {
  .gallery .box {
    width: 33.3%;
    padding-bottom: 33.3%;
  }
}

@media only screen and (min-width : 760px) {
  .gallery .box {
    width: 25%;
    padding-bottom: 25%;
  }
}

@media only screen and (min-width : 1024px) {
  .gallery .box {
    width: 20%;
    padding-bottom: 20%;
  }
}

@media only screen and (min-width : 1280px) {
  .gallery .box {
    width: 16%;
    padding-bottom: 16%;
  }
}

heg-figure

kind of obsoleted by res-figure
See for original doc: https://www.liwen.id.au/heg/
heg-figure improves the usage of caption="" title="" attr="" attrlink=""
for this demo I set caption-effect="none"
Inspired by https://stackoverflow.com/questions/21483356/how-to-mark-the-copyright-of-an-image-in-html

with Thumbs

here the thumbs as just too small...

{{< heg-load-photoswipe >}}
{{< heg-figure link="/images/photocards/pixabay.com/01-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="126px" caption="figure caption 1" title="bar 1" >}}
{{< heg-figure link="/images/photocards/pixabay.com/02-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="160px" caption="figure caption 2" >}}
{{< heg-figure link="/images/photocards/pixabay.com/03-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="171px" caption="figure caption 3" attr="(c) by bar 3" >}}
{{< heg-figure link="/images/photocards/pixabay.com/04-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="135px" caption="figure caption 4" attr="(c) by bar 4" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/05-photocard.png" thumb="-thumb" caption-position="bottom" caption-effect="none" width="145px"                    attr="(c) by bar 5" >}}
{{< heg-figure link="/images/photocards/pixabay.com/06-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="135px"                    attr="(c) by bar 6" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/07-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="160px"                                        attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/08-photocard.jpg" thumb="-thumb" caption-position="bottom" caption-effect="none" width="135px" caption="figure caption 8"             attrlink="https://www.example.com" >}}

renders as

figure caption 8

https://www.example.com

without Thumbs

{{< heg-load-photoswipe >}}
{{< heg-figure link="/images/photocards/pixabay.com/01-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 1" title="bar 1" >}}
{{< heg-figure link="/images/photocards/pixabay.com/02-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 2" >}}
{{< heg-figure link="/images/photocards/pixabay.com/03-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 3" attr="(c) by bar 3" >}}
{{< heg-figure link="/images/photocards/pixabay.com/04-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 4" attr="(c) by bar 4" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/05-photocard.png" caption-position="bottom" caption-effect="none" width="640px"                    attr="(c) by bar 5" >}}
{{< heg-figure link="/images/photocards/pixabay.com/06-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px"                    attr="(c) by bar 6" attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/07-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px"                                        attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/08-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 8"             attrlink="https://www.example.com" >}}
{{< heg-figure link="/images/photocards/pixabay.com/09-photocard.jpg" caption-position="bottom" caption-effect="none" width="640px" caption="figure caption 9" title="bar 9" attr="(c) by bar 9" attrlink="https://www.example.com" >}}

renders as

i18n

i18n lookup - if no translation found get argument back (default)

{{< i18n "termNotAvailable" >}}
{{< i18n "foobar" >}}

renders as

empty foobar

given:

- id: termNotAvailable
  translation: "empty"

in i18n/en.yaml

asciicast

taken from https://github.com/gohugoio/hugo/tree/master/docs/layouts/shortcodes
added no javascript fallback

html-tag

surround text with a html tag

We meet at {{< html-tag time >}}23:59{{< /html-tag >}}. Don't be late.

We meet at 23:59 . Don't be late.

html-tags

surround text with nested html tags

We meet at {{< html-tags sup time >}}23:59{{< /html-tags >}}. Don't be late.

We meet at ^23:59 . Don't be late.

html-tag-classes

surround text with a html tag including some classes

We meet at {{< html-tag-classes time w3-xxxlarge w3-text-blue >}}23:59{{< /html-tag-classes >}}. Don't be late.

We meet at 23:59 . Don't be late.

You can use the colorAlert* values (see alert ) using:

We meet at {{< html-tag-classes time w3-xxxlarge colorDanger >}}23:59{{< /html-tag-classes >}}. Don't be late.

We meet at 23:59 . Don't be late.

This works as well

{{% html-tag-classes div w3-container w3-card-4 w3-theme-d3 %}}
## Hello
World
{{% /html-tag-classes %}}

Hello

World

classify

{{< classify "w3-blue" >}}
| foo | bar |
| --- | --- |
| 24  | 42  |
{{< /classify >}}

foo	bar
24	42

{{< classify "w3-green" "span" >}}
**foo** bar
24 42
{{< /classify >}}

foo bar 24 42

kbd

show keyboard sequences

Press {{< kbd "Ctrl+Shift+A" "5" >}} or {{< kbd "CTRL" "ALT" "DEL" >}}

Press Ctrl+Shift+A 5 or CTRL ALT DEL

style

static/css/w3css-basic.css

kbd {
  font-size: 0.8em;
  background-color: #fff;
  padding: 0px 1px 0px 1px;;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 4px;
}

highlightfile

Argument	Default	What	Remark
file		the file	starting in /static
language	python	optional: language	see list-of-chroma-highlighting-languages
opt	linenos=table	optional: options for hugo highlight shortcut	see highlighting-in-code-fences)

{{< highlightfile file="/static/src/demo-hugo-server.sh" >}}

renders as

demo-hugo-server.sh

1
2
3
4
5


#!/bin/bash

cd $(dirname $0)/..
# hugo server -w --themesDir ../../ --disableFastRender --navigateToChanged
hugo server -e example -w --themesDir ../../ --disableFastRender --navigateToChanged

readfile

inspired by https://github.com/gohugoio/hugo/blob/master/docs/layouts/shortcodes/readfile.html
reads a file (or directory) and optionally renders ist using markdownify or highlight

Argument	Position -1	Default	What	Remark
file	0	.	a file (or dir)	. or ending in /. => directory
md	1		markdownify	if "true" => process using markdownify
hll	2	md	highlight lang	see list-of-chroma-highlighting-languages

{{< readfile "content/." >}}

renders as:

content/.
-rw-rw-r-- 2018-08-25        141 .marquee.md
Lrwxrwxrwx 2018-07-06         15 README.md
drwxrwxr-x 2023-03-05            blog
drwxrwxr-x 2023-03-05            contact
drwxrwxr-x 2023-03-04            faq
drwxrwxr-x 2023-03-05            pages
drwxrwxr-x 2018-06-26            resources
drwxrwxr-x 2018-05-03            search

{{< readfile "pages/hugo-theme-w3css-basic/_index.md" "" "yaml" >}}

renders as:

---
weight:      15
title:       "About this Theme"
date:        "2017-11-22T07:42:26+01:00"
icon:        "fas fa-info fa-fw"
---

{{< readfile file="pages/hugo-theme-w3css-basic/_index.md" hll="yaml" >}}

renders as:

---
weight:      15
title:       "About this Theme"
date:        "2017-11-22T07:42:26+01:00"
icon:        "fas fa-info fa-fw"
---

{{< readfile file="pages/showcase/video-03.md" hll="md" >}}

renders as:

---
title:              "Hugo - Static Site Generator"
date:               2018-01-05T21:01:34+01:00
icon:               "fab fa-youtube"
resImgTeaser:  teaserpics/gohugo.io/hugo-dolor.png
teaserpicNotOnPage:
description: "Giraffe Academy, Tutorial 23. *(Demo page without tags or categories)*"
---

{{< youtube 6U3emx29rKg >}}

*(here is no taxonomy bar since this page has no assigned tags or categories)*

Experimental

liti: List by Title

list by Title
hugo has build in shortcodes ref and relref: https://gohugo.io/content-management/shortcodes/
These shortcodes will look up the pages by their relative path (e.g., blog/post.md) or their logical name (post.md)
I created a shortcode to get a list of pages by their Title
by default this list is not given as a <ul> list - just one or more links without newlines
search can be done with eq (which is default) or in (substring)
the case is relevant by default. Use the modifier to ignore (mod="i")

| Argument | Position -1 | Default | What             | Remark                                    |
| -------- | ----------- | ------- | ---------------- | ----------------------------------------- |
| search   | 0           |         | string to search |
| op       | 1           | eq      | eq               | in                                        | (Operator)                                     |
| mod      | 2           |         | i                | (Modifier) i:ignore case                  |
| ul       | 3           |         |                  | if not empty: create unordered list       |
| type     | 4           | regular | regular          | all                                       | regular:$.Site.RegularPages  all:$.Site.Pages) |
| ofm      | 5           | .Title  |                  | (OutputFormat) .Kind .RelPermalink .Title |

An easy and short usage would be:


See more here: {{< liti "Vestibulum" >}}

See more here: Vestibulum


See more here: {{< liti "highlight" "in" >}}

See more here: Code highlighting Hugo - highlight 🎨

Here are more examples using eq operator

Shortcode	Result
{{< liti search="Vestibulum" >}}	Vestibulum
{{< liti search="Vestibulum" type="regular" op="eq" >}}	Vestibulum
{{< liti search="VeSTIBULUM" type="regular" op="eq" mod="i" ul="1" >}}	Vestibulum
{{< liti search="VeSTIBULUM" mod="i" ul="1" >}}	Vestibulum
{{< liti search="Phasellus" type="all" ul="1" >}}	Phasellus Phasellus
{{< liti search="Phasellus" type="all" ofm=".Title" ul="1" >}}	Phasellus Phasellus
{{< liti search="Phasellus" type="all" ofm=".Kind .Title" ul="1" >}}	term: Phasellus page: Phasellus
{{< liti search="Phasellus" type="all" ofm=".RelPermalink" >}}	/hugo-theme-w3css-basic.github.io/tags/phasellus/ /hugo-theme-w3css-basic.github.io/pages/folder20/folder21/folder211/phasellus/

Here are some examples using in operator

Shortcode	Result
{{< liti op="in" search="theme" >}}
{{< liti op="in" search="theme" mod="i" ul="1" >}}	Creating a New Theme This Theme Readme (github) This Theme Shortcodes Add a Theme (asciinema)
{{< liti op="in" search="theme" type="all" mod="i" ul="1" >}}	Creating a New Theme This Theme Readme (github) About this Theme This Theme Shortcodes hugo-theme-w3css-basic exampleSite This Theme Add a Theme (asciinema) Themes
{{< liti op="in" search="theme" type="all" ofm=".Kind .Title" mod="i" ul="1" >}}	page: Creating a New Theme page: This Theme Readme (github) section: About this Theme page: This Theme Shortcodes home: hugo-theme-w3css-basic exampleSite term: This Theme page: Add a Theme (asciinema) term: Themes
{{< liti op="in" search="theme" type="all" ofm=".RelPermalink" mod="i" ul="1" >}}	/hugo-theme-w3css-basic.github.io/pages/hugo-theme-w3css-basic/hugobasicexample/creating-a-new-theme/ /hugo-theme-w3css-basic.github.io/pages/hugo-theme-w3css-basic/readme/ /hugo-theme-w3css-basic.github.io/pages/hugo-theme-w3css-basic/ /hugo-theme-w3css-basic.github.io/pages/hugo-theme-w3css-basic/page-shortcodes/ /hugo-theme-w3css-basic.github.io/ /hugo-theme-w3css-basic.github.io/categories/this-theme/ /hugo-theme-w3css-basic.github.io/pages/showcase/console-01/ /hugo-theme-w3css-basic.github.io/tags/themes/

With positional parameters:


See more here: {{< liti "Vestibulum" "in" >}}

See more here: Vestibulum convallis, lorem a tempus semper Vestibulum Vestibulum Convallis


See more here: {{< liti "Vestibulum" "in" "i" "ul" >}}

See more here:


See more here: {{< liti "Vestibulum" "in" "" "ul" >}}

See more here:

litt: List by Taxonomy/Term (just one result)

this will return just one link, the taxonomy/taxonomyterm link with a configurable text

Argument	Position -1	Default	What	Remark
tax	0	tags	taxonomy
term	1	*	taxonomyterm
ofm	2	.Title		(OutputFormat) .Kind .RelPermalink .Title


See more here: {{< litt term="Go" >}}

See more here: Go


See more here: {{< litt "tags" "Go" >}}

See more here: Go


See more here: {{< litt "categories" "Golang" ".RelPermalink" >}}

ToDo: See more here: {{< litt "categories" "Golang" ".RelPermalink" >}}

litx: List by Taxonomy (full search)

this may be slow for bigger sites
case is ignored (no mod switch as liti has)

Argument	Position -1	Default	What	Remark
tax	0	tags	string to search	in the taxonomy
term	1	*	string to search	in the taxonomy term
title	2	*	string to search	in the title
op	3	eq	en	in
om	4	t	t,p	(OutputMode) taxonomyterm page
ofm	5	.Title		(OutputFormat) .Kind .RelPermalink .Title

Using positional parameters:

Shortcode	Result
{{< litx "*" "Nullam" >}}	tags/nullam
{{< litx "" "" "Null" "in" "p" >}}	categories/know-how Nullam tags/folder20 Nullam tags/nullam Nullam

Using named parameters:

Shortcode	Result
{{< litx tax="tags" term="go" op="in" >}}	tags/go tags/golang tags/hugo tags/logos
{{< litx term="Nullam" >}}	tags/nullam
{{< litx term="Nullam" om="p" >}}	tags/nullam Nullam tags/nullam Vestibulum
{{< litx term="Nullam" om="tp" >}}	tags/nullam tags/nullam Nullam tags/nullam Vestibulum
{{< litx term="web" >}}	tags/web
{{< litx tax="categories" term="web" >}}	categories/web
{{< litx tax="*" term="web" om="p" >}}	categories/web Hugo - highlight 🎨 tags/web Hugo - amnet tags/web Hugo - dolor tags/web Hugo - lorem tags/web Hugo - ipsum
{{< litx tax="*" term="web" om="pt" ofm=".RelPermalink" >}}	categories/web categories/web /hugo-theme-w3css-basic.github.io/blog/2017/11/24/hugo-highlight-chromastyles/ tags/web tags/web /hugo-theme-w3css-basic.github.io/blog/2018/05/11/hugo-amet/ tags/web /hugo-theme-w3css-basic.github.io/blog/2017/11/10/hugo-dolor/ tags/web /hugo-theme-w3css-basic.github.io/blog/2017/11/09/hugo-lorem/ tags/web /hugo-theme-w3css-basic.github.io/blog/2017/11/08/hugo-ipsum/

hc

HTML comment may be included in markdown via:

<!--
foo
bar
-->

Via the hc (Html Comment) shortcode HTML comments may be enabled or disabled in the output:

config.toml

[params]
  enableHC = true

Here's how to use it:


{{< hc "foo" >}}

Look in the html source. Here's a comment: seen?


{{< hc >}}
this works
as well
{{< /hc >}}


{{< hc "some test">}}
more 1
more 2
{{< /hc >}}