Blog-Doc

Some Hugo/Mainroad Theme documentation

How to separate Cut: #

<!--more-->

Text before this tag will appear in announce, but after in post body.

Code Blocks #

The source code with numbers

-> ```rust {linenos=true}
fn main() {
    println!("Hello, world!");
}
-> ```

1
2
3

fn main() {
    println!("Hello, world!");
}

without numbers

-> ```rust {linenos=false}
fmt.Println("Hello with numbers")
-> ```

fn main() {
    println!("Hello, world!");
}

Default without numbers

-> ```rust
fn main() {
    println!("Hello, world!");
}
-> ```

fn main() {
    println!("Hello, world!");
}

See themes\MainRoad\layouts_markup\render-codeblock.html

Link - Syntax highlighting.

Shortcuts #

tabpane #

{{< tabpane >}}
  {{< tab "Tab 1" >}}
    This is content for **tab 1**
  {{< /tab >}}
  {{< tab "Tab 2" "selected" >}}
    This is content for **tab 2**
  {{< /tab >}}
  {{< tab "Tab 3" >}}
    This is content for **tab 3**
  {{< /tab >}}
{{< /tabpane >}}

Blockquotes #

> Quote

> [!INFO]
> Useful information that users should know, even when skimming content.
> 
> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

Icons in blog\themes\MainRoad\assets\icons

Colors blog\themes\MainRoad\assets\scss\components\_icon.scss

Colors blog\themes\MainRoad\assets\scss\components\_alert.scss

Inline Image #

This is an inline image.

Block Image #

Links #

This is a [link](/doc/blog-doc/#shortcuts).

This is a link.

This is an [external link](https://github.com/).

This is an external link.

Tables #

| Month    | Amount |
| :------- | -----: |
| January  |    $10 |
| February |   $100 |
| March    |  $1000 |

Take a note about alignment.

accordion #

{{< accordion name="my-accordion" >}}
  {{< details summary="**Accordion 1**" open="true" >}}
    Lorem ipsum dolor sit amet.
  {{< /details >}}
  {{< details summary="**Accordion 2**" >}}
    Lorem ipsum dolor sit amet.
  {{< /details >}}
{{< /accordion >}}

alert #

{{< alert "success" >}}
  **Success:** This is a success alert.
{{< /alert >}}

{{< alert severity="warning" size="small" >}}
  **Warning:** This is a small warning alert.
{{</* /alert >}}

{{< alert hideIcon="true" >}}
  This alert doesn't have an icon.
{{</* /alert >}}

blockquote #

{{< blockquote author="Aldous Huxley" cite="https://www.huxley.net/bnw/" caption="Brave New World" >}}
  Most human beings have an almost infinite capacity for taking things for granted.
{{< /blockquote >}}

button #

collapse #

{{< collapse "120" >}}
code
{{< /collapse >}}

1
2
3
4
5
6
7
8
9
10

{{< collapse "40" >}}
code
{{< /collapse >}}

The Expand appear only of the text not fit into collapsed area!

details #

{{< details summary="Summary" name="my-details" title="My Details" >}}
  Lorem ipsum dolor sit amet.
{{< /details >}}

file-list #

• Page 1
• Page 2
• Page 3

icon #

ifparam #

The title param is not set

img #

include #

_includes/file.md has been included

labeled-highlight #

1
2
3
4
5
6

[
  {
    "name": "John",
    "age": 30
  }
]

1
2

- name: John
  age: 30

param #

The page title is “Blog-Doc”

The page description is Documentation

tabpane #

carousel #

{{< carousel4 items="1" height="70" unit="%" >}}

Spoiler #

fn main() {
    println!("Hello, world!");
}

<details>
  <summary>Spoiler</summary>

Lorem ipsum dolor sit amet, ...

</details>