Template

Creating content

create a new chapter

hugo new --kind chapter basics/_index.md

create a new content

hugo new basics/first-content.md

content

Front matter configuration

+++
# Table of content (toc) is enabled by default. Set this parameter to true to disable it.
# Note: Toc is always disabled for chapter pages
disableToc = "false"
# If set, this will be used for the page's menu entry (instead of the `title` attribute)
menuTitle = ""
# The title of the page in menu will be prefixed by this HTML content
pre = ""
# The title of the page in menu will be postfixed by this HTML content
post = ""
# Set the page as a chapter, changing the way it's displayed
chapter = false
# Hide a menu entry by setting this to true
hidden = false
# Display name of this page modifier. If set, it will be displayed in the footer.
LastModifierDisplayName = ""
# Email of this page modifier. If set with LastModifierDisplayName, it will be displayed in the footer
LastModifierEmail = ""
+++

Icon in menu entry

+++
title = "Github repo"
pre = "<i class='fab fa-github'></i> "
+++

use weight to handle orders.

+++
title = "My page"
weight = 5
+++

Using a custom title for menu entries

+++
title = "Install on Linux"
menuTitle = "Linux"
+++

Icons

<i class="fas fa-heart"></i>

also

Built with <i class="fas fa-heart"></i> from Grav and Hugo

file attachment

If your page is a markdown file, attachements must be place in a folder named like your page and ending with .files.

e.g:

  • content
    • _index.md
    • page.files
      • attachment.pdf
    • page.md
If your page is a folder, attachements must be place in a nested ‘files’ folder.
  • content
    • _index.md
    • page
      • index.md
      • files
        • attachment.pdf
attach files
{ {%attachments title="Related files" pattern=".*(pdf|mp4)"/%} }
colored box
{ {%attachments style="orange" /%} } ->  blue gray red green

Also checkout Markdown page.

BUTTON

{ {% button href="https://test.org/" %} }test{ {% /button %} }
{ {% button href="https://test.org/" icon="fas fa-download" %} }test{ {% /button %} }
{ {% button href="https://trest.org/" icon="fas fa-download" icon-position="right" %} }test right{ {% /button %} }

Expand

{ { %expand "Is this learn theme rocks ?" %} }Yes !.{ {% /expand%} }

{ {%expand%} }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{ {% /expand%} }

Graph and diagrams

{{<mermaid align="left">}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}
graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] 
{{<mermaid>}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
{{< /mermaid >}}
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! 
/*mermaid*/
gitGraph:
options
{
  "nodeSpacing": 150,
  "nodeRadius": 10
}
end
  commit
  branch newbranch
  checkout newbranch
  commit
  commit
  checkout master
  commit
  commit
  merge newbranch

gitGraph:
options
{
  "nodeSpacing": 150,
  "nodeRadius": 10
}
end
  commit
  branch newbranch
  checkout newbranch
  commit
  commit
  checkout master
  commit
  commit
  merge newbranch

Configuration

working with menus

in config.toml

[[menu.shortcuts]] 
name = "<i class='fab fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/matcornic/hugo-theme-learn"
weight = 10

[[menu.shortcuts]]
name = "<i class='fas fa-camera'></i> Showcases"
url = "/showcase"
weight = 11

[[menu.shortcuts]]
name = "<i class='fas fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 20

[[menu.shortcuts]]
name = "<i class='fas fa-bullhorn'></i> Credits"
url = "/credits"
weight = 30

Tags

add tags to a page

Each tag is a link to a Taxonomy page displaying all the articles with the given tag.


---
date: 2018-11-29T08:41:44+01:00
title: Theme tutorial
weight: 15
tags: ["tutorial", "theme"] 
---

list all tags

add in config.toml

[[menu.shortcuts]]
name = "<i class='fas fa-tags'></i> Tags"
url = "/tags"
weight = 30

notice

{{% /*notice note %}}
A notice disclaimer
{{% /notice %}}

A notice disclaimer

{{% notice info  %}}
An information disclaimer
{{% /notice  %}}

An information disclaimer

{{% notice tip  %}}
A tip disclaimer
{{% /notice  %}}

A tip disclaimer

{{% notice warning  %}}
An warning disclaimer
{{% /notice  %}}

An warning disclaimer

edit value

siteparam shortcode is used to help you print values of site params.

For instance, in this current site, the editURL variable is used in config.toml

[params]
  editURL = "https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/"

Use the siteparam shortcode to display its value.

`editURL` Value : {{% siteparam "editURL" %}}

is displayed as

editURL Value : https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/