At info@example.com vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
 Home  Home  hom  Contact  Contact  con  Stuff  Stuff  stu
 Blog  Blog  blo  FAQ  FAQ  faq
 Home  Home  hom  Contact  Contact  con  Stuff  Stuff  stu
 Blog  Blog  blo  FAQ  FAQ  faq

This Theme Shortcodes

/images/teaserpics/pixabay.com/blue-2863550_640.png

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

Configuration is in config.toml:

[params]
  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

Style

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-success{
  border-color:#4CAF50!important
}

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

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;
}

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

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

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 %}}
Hi, I’m a success

I'm info

An info with title
A warning
Danger: A stronger warning

You have been warned

A warning with heading

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:

 Hello world  take me to Google  take me to Blog  take me to FAQ  Purge

w3-badge

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

w3-tag

I’m a big one: 42

created with:

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

w3-quote

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

w3-codespan

... 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…

w3-code

{{< 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

{{< 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

{{< 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

Page Resources

res-figure

{{< 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" / >}} 

penguin-2104173_1920.jpg
Resize '300x'
penguin-2104173_1920
pixabay.com
Creative Commons CC0
penguin-2104173_1920.jpg
Fit '200x200'
penguin-2104173_1920
pixabay.com
Creative Commons CC0
penguin-2104173_1920.jpg
Fill '200x200'
penguin-2104173_1920
pixabay.com
Creative Commons CC0

res-attach

{{< res-attach >}}
  Attachments
{{< 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

with Thumbs

{{< 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 1

bar 1

figure caption 1

figure caption 2

figure caption 2

figure caption 3

figure caption 3

(c) by bar 3
figure caption 4

figure caption 4

(c) by bar 5
figure caption 8

figure caption 8

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

figure caption 1

bar 1

figure caption 1

figure caption 2

figure caption 2

figure caption 3

figure caption 3

(c) by bar 3
figure caption 4

figure caption 4

(c) by bar 5
figure caption 8

figure caption 8

figure caption 9

bar 9

figure caption 9

i18n

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

renders as

empty foobar

given:

- id: termNotAvailable
  translation: "empty"

in i18n/en.yaml

asciicast

html-tag

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

We meet at . Don’t be late.

html-tags

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

We meet at . Don’t be late.

html-tag-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 . 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 . 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

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;
}

readfile

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/.
Lrwxrwxrwx 2018-04-06         15 README.md
drwxrwxr-x 2018-04-06            blog
-rw-rw-r-- 2018-04-13        972 contact.md
-rw-rw-r-- 2018-04-13       5407 faq.md
drwxrwxr-x 2018-04-13            pages
-rw-rw-r-- 2018-04-13        190 search.md
{{< 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"
teaserpic:   /images/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

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” >}}
{{< liti search=“VeSTIBULUM” mod=“i” ul=“1” >}}
{{< liti search=“Phasellus” type=“all” ul=“1” >}}
{{< liti search=“Phasellus” type=“all” ofm=“.Title” ul=“1” >}}
{{< liti search=“Phasellus” type=“all” ofm=“.Kind .Title” ul=“1” >}}
{{< liti search=“Phasellus” type=“all” ofm=“.RelPermalink” >}} /hugo-theme-w3css-basic.github.io/pages/folder20/folder21/folder211/phasellus/   /hugo-theme-w3css-basic.github.io/tags/phasellus/  

Here are some examples using in operator

Shortcode Result
{{< liti op=“in” search=“theme” >}}
{{< liti op=“in” search=“theme” mod=“i” ul=“1” >}}
{{< liti op=“in” search=“theme” type=“all” mod=“i” ul=“1” >}}
{{< liti op=“in” search=“theme” type=“all” ofm=“.Kind .Title” mod=“i” ul=“1” >}}
{{< liti op=“in” search=“theme” type=“all” ofm=“.RelPermalink” mod=“i” ul=“1” >}}

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)

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" >}}

See more here: /hugo-theme-w3css-basic.github.io/categories/golang/  

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) *t*axonomyterm *p*age
ofm 5 .Title (OutputFormat) .Kind .RelPermalink .Title

Using positional parameters:

Shortcode Result
{{< litx “*” “Nullam” >}}
{{< litx “” “” “Null” “in” “p” >}}

Using named parameters:

Shortcode Result
{{< litx tax=“tags” term=“go” op=“in” >}}
{{< litx term=“Nullam” >}}
{{< litx term=“Nullam” om=“p” >}}
{{< litx term=“Nullam” om=“tp” >}}
{{< litx term=“web” >}}
{{< litx tax=“categories” term=“web” >}}
{{< litx tax=”*” term=“web” om=“p” >}}
{{< litx tax=”*” term=“web” om=“pt” ofm=“.RelPermalink” >}}

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 >}}