### Badge Shortcode Examples

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/badge/_index.en.md

Demonstrates the usage of the badge shortcode with various content, styles, and icons. This is a general example showcasing multiple badge configurations.

```go
{{% multishortcode name="badge" print="false" format="%s\n%s\n%s\n%s\n%s\n" %
- content: "Important"
- content: "6.6.6"
  style: "primary"
  title: "Version"
- content: "Captain"
  style: "red"
  icon: "angle-double-up"
- content: "New"
  style: "info"
- content: "Awesome"
  color: "fuchsia"
  icon: "fa-fw fab fa-hackerrank"
{{% /multishortcode %}}
```

--------------------------------

### Install Node.js Dependencies for Screenshots Tool

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/CLAUDE.md

Run this command in the 'tools' directory to install the necessary Node.js dependencies before using the screenshots generation tool.

```bash
cd tools
npm ci
npm run screenshots
```

--------------------------------

### Usage Example: Python Highlight

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/highlight/_index.en.md

Demonstrates the usage of the highlight shortcode with Python code, including line numbers and wrapping.

```go
{{% multishortcode name="highlight" execute="false" %
lineNos: "true"
type: "py"
wrap: "true"
title: "python"
content: |
  print("Hello World!")
{{% /multishortcode %}}
```

--------------------------------

### Comprehensive Theme Variant Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/branding/colors/_index.en.md

An extensive example demonstrating various theme variant configurations, including auto mode, custom names, and different variant identifiers.

```toml
themeVariant = [
	{ identifier = 'relearn-auto',  name = 'Relearn Light/Dark', auto = [] },
	{ identifier = 'relearn-light'  },
	{ identifier = 'relearn-dark'   },
	{ identifier = 'relearn-bright' },
	{ identifier = 'zen-auto',      name = 'Zen Light/Dark', auto = [ 'zen-light', 'zen-dark' ] },
	{ identifier = 'zen-light'      },
	{ identifier = 'zen-dark'       },
	{ identifier = 'retro-auto',    name = 'Retro Learn/Neon', auto = [ 'learn', 'neon' ] },
	{ identifier = 'neon'           },
	{ identifier = 'learn'          }
]
```

--------------------------------

### Tree Shortcode Execution Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/tree/_index.en.md

This example demonstrates the `tree` shortcode with `execute="false"`, indicating it's for display or configuration reference rather than immediate execution.

```shortcode
{{% multishortcode name="tree" execute="false" %}}
content = """
- home | folder
  - [.config](http://example.com) | folder
  - My Documents | folder | magic
    - home.php | fa-fw fab fa-php | #888cc4
"""
{{% /multishortcode %}}
```

--------------------------------

### Basic Tabs Shortcode Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/tabs/_index.en.md

Demonstrates the basic usage of the `tabs` shortcode with different content types and optional styling for individual tabs.

```gohtml
{{% multishortcode name="tabs" print="false" }}
content:
  - title: "Python Saying"
    content: "The AI native programming language."
  - title: "Terminal Sourcecode"
    content: |
      ````bash
      echo "For guys who like to tinker."
      ````
  - title: "C Ramblings"
    color: "fuchsia"
    content: "For the connoisseur of programming."
  - title: "C++ Ramblings++"
    color: "red"
    content: "For the guys that can cope with syntax."
  - title: "C# ~~GC is cool~~
    content: "For guys that need two destructors."
{{% /multishortcode %}}
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/development/screenshots/_index.en.md

Install Node.js dependencies for the screenshot generation script. Ensure Node.js is installed before running this command.

```bash
npm install
```

--------------------------------

### Mermaid Diagram Usage Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/mermaid/_index.en.md

Demonstrates the usage of the mermaid shortcode with explicit parameters for alignment and zoom, and defines the graph content.

```go
{{% multishortcode name="mermaid" execute="false" %
align: "center"
zoom: "true"
content: |
  graph LR;
    If --> Then
    Then --> Else
{{% /multishortcode %}}
```

--------------------------------

### Initialize and Fetch Hugo Relearn Module

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Initialize your Hugo site's module system and fetch the Relearn theme. Then, start the Hugo server.

```bash
# Initialize and fetch the module
hugo mod init github.com/yourname/yoursite
hugo mod get github.com/McShelby/hugo-theme-relearn@latest
hugo server
```

--------------------------------

### Install Hugo Relearn Theme as a Module

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Add the theme as a Hugo module to your project. This is the recommended installation method for easy updates.

```toml
# hugo.toml
module:
  imports:
    - path: github.com/McShelby/hugo-theme-relearn
```

--------------------------------

### Multishortcode Usage Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/layouts/shortcodes/multishortcode.html

This is an example of how to use the multishortcode. It demonstrates passing various parameters like name, outputtype, formats, format, print, and execute, along with inner content. The format parameter uses a replaceRE function to handle backticks.

```html
multishortcode {name="{{.Get "name"}}" outputtype="{{.Get "outputtype"}}" formats="{{.Get "formats"}}" format="{{.Get "format" | replaceRE "`" "`"}}" print="{{.Get "print"}}" execute="{{.Get "execute"}}"} {{.Inner}}
```

--------------------------------

### Badge with All Options Set

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/badge/_index.en.md

An example showcasing a badge with content, icon, style, and title all explicitly defined.

```gohtml
{{% multishortcode name="badge" format="%s\n%s\n%s\n" %
- content: "6.6.6"
  icon: "star"
  title: "Version"
- content: "Awesome"
  style: "info"
- content: "Captain"
  style: "red"
  icon: "angle-double-up"
{{% /multishortcode %}}
```

--------------------------------

### Basic Tabs Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/tabs/_index.en.md

Demonstrates creating tabbed content with different types of content like JSON, XML, and plain text. Tabs with the same `groupid` will be grouped together.

```go-html-template
{{% multishortcode name="tabs" print="false" %
groupid: "tab-example-a"
title: Group A, Tabs 1
content:
  - title: "JSON"
    content: |
      ```json
      { "Hello": "World" }
      ```
  - title: "_**XML**_"
    content: |
      ```xml
      <Hello>World</Hello>
      ```
  - title: "Text"
    content: "    World"
{{% /multishortcode %}}
```

```go-html-template
{{% multishortcode name="tabs" print="false" %
groupid: "tab-example-a"
title: Group A, Tabs 2
content:
  - title: "JSON"
    content: |
      ```json
      { "Hello": "World" }
      ```
  - title: "XML"
    content: |
      ```xml
      <Hello>World</Hello>
      ```
{{% /multishortcode %}}
```

```go-html-template
{{% multishortcode name="tabs" print="false" %
groupid: "tab-example-b"
title: Group B
content:
  - title: "JSON"
    content: |
      ```json
      { "Hello": "World" }
      ```
  - title: "XML"
    content: |
      ```xml
      <Hello>World</Hello>
      ```
{{% /multishortcode %}}
```

--------------------------------

### Expand Shortcode - All Defaults Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/expand/_index.en.md

Demonstrates the expand shortcode with only the required 'content' parameter. The title defaults to 'Details' and the content is initially collapsed.

```shortcode
{{% multishortcode name="expand" %}}
content: |
  Yes, you did it!
{{% /multishortcode %}}
```

--------------------------------

### Markdown Link Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/customization/linkeffects.en.md

An example of a Markdown link that will be affected by the custom `bg-white` and `target=_blank` configurations.

```markdown
[Magic in new window](images/magic.gif)
```

--------------------------------

### Button Shortcode Basic Usage

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/button/_index.en.md

Demonstrates the basic usage of the button shortcode with content and href parameters. This example shows how to create simple clickable buttons.

```go-html-template
{{% multishortcode name="button" print="false" format="%s\n%s\n" %
- content: "Go Hugo"
  href: "https://gohugo.io/"
- content: "Download Magic"
  href: "images/magic.gif?download"
  style: "tip"
  icon: "hand-sparkles"
{{% /multishortcode %}}
```

--------------------------------

### Configure Sidebar Menus

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/sidebar/menus/_index.en.md

Example of configuring sidebar header menus, a divider, and the main page menu. Reconfiguration requires copying default elements.

```yaml
sidebarheadermenus = [
	{ type = 'custom', elements = [
		{ type = 'languageswitcher', icon= 'globe' },
		{ type = 'historyclearer' }
	]},
	{ type = 'divider' },
]
sidebarmenus = [
	{ type = 'page' }
]
sidebarfootermenus = []
```

--------------------------------

### Render Block Math with Passthrough

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/math/_index.en.md

This example demonstrates rendering block math using the `math` shortcode with a LaTeX array formula. It assumes Passthrough configuration is enabled.

```shortcode
{{% multishortcode name="math" %
content: |
  $$\left|
  \begin{array}{cc}
  a & b \\
  c & d
  \end{array}
  \right|$$
{{% /multishortcode %}}
```

--------------------------------

### Annotated TOML Front Matter Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/frontmatter/reference/_index.en.md

An example of TOML front matter with theme-specific parameters included within a [params] section. This demonstrates the structure for applying Relearn theme settings.

```toml
+++
[params]
{{% include "frontmatter.toml" %}}+++
```

--------------------------------

### Include Arbitrary Content

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/include/_index.en.md

This is a basic example of the include shortcode used to embed arbitrary content from a specified file directly into the page.

```go-html-template
{{% multishortcode name="include" }}
file = "shortcodes/include/INCLUDE_ME.md"
{{% /multishortcode %}}
```

--------------------------------

### Button Shortcode Usage Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/button/_index.en.md

Illustrates how to use the button shortcode with multiple items, showcasing different content, href, style, and icon configurations. This is useful for creating a list of actionable buttons.

```go-html-template
{{% multishortcode name="button" execute="false" format="%s\n%s\n" %
- content: "Go Hugo"
  href: "https://gohugo.io/"
- content: "Download Magic"
  href: "images/magic.gif?download"
  style: "tip"
  icon: "hand-sparkles"
{{% /multishortcode %}}
```

--------------------------------

### Icon Usage Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/icon/_index.en.md

Demonstrates the basic usage of the icon shortcode to display a single icon within text. The icon inherits the text color by default.

```shortcode
{{% multishortcode name="icon" format="Built with %s by Relearn and Hugo" %
icon: "heart"
{{% /multishortcode %}}
```

--------------------------------

### Load Shortcode Dependencies in Partials

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Define the HTML for loading dependencies of a custom shortcode. This example loads jQuery in the footer if the location is 'footer'.

```go
{{/* layouts/partials/dependencies/myshortcode.html */}}
{{- if eq .location "footer" }}
  <script src="https://unpkg.com/jquery/dist/jquery.js"></script>
{{- end }}
```

--------------------------------

### Run Hugo Server with Specific Configuration

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/CLAUDE.md

Execute this command to start the Hugo development server with a specific configuration environment, such as 'performance'. This is useful for testing different site generation scenarios.

```bash
cd docs && hugo server -p 3131 -e performance
```

--------------------------------

### Serve Hugo Website Locally

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/introduction/quickstart/_index.en.md

Start a local development server to preview your Hugo website. The server automatically rebuilds the site and refreshes the browser on file changes.

```shell
hugo serve
```

--------------------------------

### Configure Predefined Shortcuts Menu

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/sidebar/menus/_index.en.md

Add entries to the `[[menu.shortcuts]]` section in your Hugo configuration to create a predefined menu in the sidebar. This example adds a single entry with a URL.

```toml
[[menu.shortcuts]]
  name = 'Example Entry'
  weight = 1
  url = 'https://example.com'
```

--------------------------------

### Basic Card with C Code

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/card/_index.en.md

Shows a basic card structure with a title, link, and content that includes a C code block. This example is suitable for displaying C code snippets.

```go
{{% multishortcode name="card" execute="false" }}
- title: "High performance code"
  href: "https://example.com"
  content: |
    Awesome AI accelerated code

    ```c
    printf("Hello World!");
    ```
{{% /multishortcode %}}
```

--------------------------------

### Math Formula with Execution Disabled

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/math/_index.en.md

This example shows how to use the `math` shortcode with `execute="false"`, which is useful for previewing the shortcode's output without rendering the math.

```shortcode
{{% multishortcode name="math" execute="false" %
align: "center"
content: |

  $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
{{% /multishortcode %}}
```

--------------------------------

### Get Site Param Value

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/siteparam/_index.en.md

Use the siteparam shortcode to retrieve a specific site parameter. This example shows how to get the value of 'editURL'.

```shortcode
{{% multishortcode name="siteparam" execute="false" %}}
name = "editURL"
{{% /multishortcode %}}
```

--------------------------------

### Run Hugo Server Locally

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/exampleSite/content/en/about.md

Execute this command in the exampleSite directory to build and serve the website locally. Access it via http://localhost:1313.

```bash
hugo server
```

--------------------------------

### Define Custom Shortcode Logic in Go Template

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Implement the logic for a custom shortcode using Go templates. This example sets a page variable to indicate the shortcode's presence.

```go
{{/* layouts/shortcodes/myshortcode.html */}}
{{- .Page.Store.Set "hasMyShortcode" true }}
<div class="my-shortcode">{{ .Inner }}</div>
```

--------------------------------

### Multilingual Versioning Configuration in Hugo TOML

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/sitemanagement/versioning/_index.en.md

Configure versioning for a multilingual Hugo site, specifying separate version parameters for each language. This example shows the setup for English and Pirrratish languages, each with its own versioning scheme.

```toml
[languages]
  [languages.en]
    weight = 1
    languageName = 'English'
    languageCode = 'en'
    contentDir = 'content/en'
    title = 'My Website'
    baseURL = 'https://example.com/'

    [languages.en.params]
      version = 'v2.0'
      versions = [
        { identifier = 'v2.0', title = 'Latest', baseURL = 'https://example.com/', isLatest = true },
        { identifier = 'v1.0', title = 'v1.0', baseURL = 'https://example.com/v1.0/' }
      ]

  [languages.pir]
    weight = 2
    languageName = 'Pirrratish'
    languageCode = 'art-x-pir'
    languageDirection = 'rtl'
    contentDir = 'content/pir'
    title = 'Arrr, my Website'
    baseURL = 'https://pir.example.com/'

    [languages.pir.params]
      version = 'v2.0'
      versions = [
        { identifier = 'v2.0', title = 'Latest', baseURL = 'https://pir.example.com/', isLatest = true },
        { identifier = 'v1.0', title = 'v1.0', baseURL = 'https://pir.example.com/v1.0/' }
      ]

```

--------------------------------

### Piratify Shortcode Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/resources/index.pir.md

The 'piratify' shortcode is a simple example shortcode that can be used for demonstration purposes.

```html
{{< piratify >}}
```

--------------------------------

### Include Content for Rendering

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/include/_index.en.md

This example shows how to include content from a file that will be rendered directly. The `execute="false"` parameter is used here, which is typically for demonstrating shortcode usage without execution, but in the context of 'include', it implies rendering the included file's content.

```go-html-template
{{% multishortcode name="include" execute="false" }}
file = "shortcodes/include/INCLUDE_GREETINGS.md"
{{% /multishortcode %}}
```

--------------------------------

### Create Shortcode Dependency Loader

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/customization/extending/_index.en.md

Create a partial file to load dependencies for a shortcode, typically in the footer. The key in `relearn.dependencies` must match this loader file name.

```go
{{- if eq .location "footer" }}
  <script src="https://www.unpkg.com/jquery/dist/jquery.js"></script>
{{- end }}
```

--------------------------------

### Mermaid Shortcode Examples

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Embed interactive Mermaid diagrams with optional pan and zoom. Global settings can be configured in `hugo.toml`.

```html
{{< mermaid zoom=true align="center" >}}
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Do it]
  B -->|No| D[Skip it]
  C --> E[End]
  D --> E
{{< /mermaid >}}
```

```html
<!-- Sequence diagram -->
{{< mermaid >}}
sequenceDiagram
  Client->>Server: GET /api/data
  Server-->>Client: 200 OK { data }
{{< /mermaid >}}
```

```toml
# hugo.toml — global Mermaid settings
[params]
  mermaidZoom       = true
  mermaidInitialize = '{ "securityLevel": "loose", "theme": "default" }'
```

--------------------------------

### Link Effect Settings After URL Override

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/linking/linkeffects.en.md

These are the effective link settings after applying the URL query parameter from the previous example.

```toml
linkEffects.download = false
linkEffects.target = '_self'
```

--------------------------------

### List Resources with Info Style and Descending Sort

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/resources/index.en.md

This snippet demonstrates how to display resources using an 'info' style and sort them in descending order.

```go
{{%/* resources style="info" sort="desc" */%}}
```

--------------------------------

### Include Content from a File

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/include/_index.en.md

This example demonstrates how to include the content of a specific file. The `print="false"` parameter prevents the content from being immediately rendered, allowing for further processing or conditional display.

```go-html-template
{{% multishortcode name="include" print="false" }}
file = "shortcodes/include/INCLUDE_GREETINGS.md"
{{% /multishortcode %}}
```

--------------------------------

### Expand Shortcode Examples

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Use the expand shortcode for collapsible content sections. Supports setting the title and initial expanded state.

```html
<!-- Collapsed by default; first positional param is the title -->
{{% expand title="Show Details" %}}
Hidden content here. Supports **Markdown**.
{{% /expand %}}
```

```html
<!-- Open by default -->
{{% expand title="Already Open" expanded=true %}}
This content is visible on page load.
{{% /expand %}}
```

```html
<!-- Positional syntax -->
{{% expand "Click Me" %}}
Content shown when expanded.
{{% /expand %}}
```

--------------------------------

### Initialize Git Repository

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/introduction/quickstart/_index.en.md

Initialize a new Git repository for your project if you plan to use Git for version control.

```shell
git init
```

--------------------------------

### Styling Custom Image Effects

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/customization/imageeffects.en.md

Add custom CSS styles for your effects in `layouts/partials/content-header.html`. This example provides a style for the `bg-white` class.

```html
<style>
img.bg-white {
  background-color: white;
}
</style>
```

--------------------------------

### Badge by Brand Colors

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/badge/_index.en.md

Showcases badges styled with brand colors: 'primary', 'secondary', and 'accent'. These examples include an icon and a title for each badge.

```go
{{% multishortcode name="badge" format="%s\n%s\n%s\n" %
- content: "Mandatory"
  style: "primary"
  icon: "bullhorn"
  title: "Announcement"
- content: "Optional"
  style: "secondary"
  icon: "bullhorn"
  title: "Announcement"
- content: "Special"
  style: "accent"
  icon: "bullhorn"
  title: "Announcement"
{{% /multishortcode %}}
```

--------------------------------

### Display All Default Children

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/children/_index.en.md

This example shows the basic usage of the `children` shortcode without any specific parameters, rendering the child pages with their default settings. The `content: ""` is likely a placeholder or an empty content indicator for the shortcode's internal processing.

```shortcode
{{% multishortcode name="children" %
- content: ""
{{% /multishortcode %}}
```

--------------------------------

### Add Theme Options to hugo.toml

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/reference/_index.en.md

Add theme-specific options to the `params` section of your `hugo.toml` file. This example shows how to enable math rendering.

```toml
[params]
math = true
```

--------------------------------

### Include All Front Matter

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/frontmatter/reference/_index.en.md

Include all theme front matter settings from a separate file. This is useful for managing a large number of configurations.

```toml
{{% include "frontmatter.toml" %}}
```

--------------------------------

### Badge Shortcode Usage Example

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/badge/_index.en.md

Illustrates how to use the badge shortcode in a typical content scenario. The `execute="false"` parameter prevents the shortcode from rendering directly, useful for documentation.

```go
{{% multishortcode name="badge" execute="false" format="%s\n%s\n%s\n%s\n%s\n" %
- content: "Important"
- content: "6.6.6"
  style: "primary"
  title: "Version"
- content: "Captain"
  style: "red"
  icon: "angle-double-up"
- content: "New"
  style: "info"
- content: "Awesome"
  color: "fuchsia"
  icon: "fa-fw fab fa-hackerrank"
{{% /multishortcode %}}
```

--------------------------------

### Image with Shadow Class

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/markdown.en.md

Apply CSS classes to an image by adding the `?classes=classname` query parameter to the image URL. This example applies a 'shadow' class.

```markdown
![Spidertocat](https://octodex.github.com/images/spidertocat.png?classes=shadow)
```

--------------------------------

### Link as Download

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/markdown.en.md

Make a link downloadable by appending `?download` or `?download=filename.ext` to the URL.

```markdown
[Magic as a download](images/magic.gif?download)
```

--------------------------------

### Badge Shortcode Examples

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Use the badge shortcode for inline marker badges. Supports named styles, custom colors, icons, and titles for tooltips.

```html
<!-- Named style -->
{{% badge style="warning" %}}Breaking{{% /badge %}}
```

```html
<!-- Custom color and icon -->
{{% badge style="info" icon="plus-circle" color="green" %}}New in 9.0{{% /badge %}}
```

```html
<!-- Title overrides inner text for tooltip/aria -->
{{% badge style="note" title="Note" %}}Change{{% /badge %}}
```

--------------------------------

### Create Home Page

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/frontmatter/designs/_index.en.md

Use this command to create a new content file specifically for a home page, utilizing the `home` page design.

```shell
hugo new --kind home _index.md
```

--------------------------------

### Override Link Effects in Page Front Matter

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/linking/linkeffects.en.md

This example shows how to override the default link effects for a specific page using its front matter.

```yaml
linkEffects.target = '_blank'
```

--------------------------------

### Configure Mermaid Initialization Options

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/mermaid/_index.en.md

Provide custom JSON initialization options for the Mermaid library globally. This allows overriding default settings like security levels.

```go
{{< multiconfig section=params >}}
mermaidInitialize = '{ "securityLevel": "loose" }'
{{< /multiconfig >}}
```

--------------------------------

### Link to Different Output Format

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/linking/pages.en.md

Link to different output formats of a page by adding the `format` query parameter. For example, link to the print format.

```markdown
[a printable page](my-page?format=print)
```

--------------------------------

### Configure Headless Branch Bundle for Showcase

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/sidebar/menus/_index.en.md

Use front matter in `content/showcase/_index.en.md` to create a headless branch bundle. This bundle will not be included in the sitemap but its resources will be published.

```yaml
title = 'Showcase'
[build]
  render = 'always'
  list = 'never'
  publishResources = true
```

--------------------------------

### Configure Theme (Zip Download/Git Submodule)

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/introduction/quickstart/_index.en.md

Specify the Relearn theme in your Hugo configuration file when using the zip download or Git submodule installation methods.

```toml
theme = 'hugo-theme-relearn'
```

--------------------------------

### Button with Severity Style Override

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/button/_index.en.md

Applies a specific severity style (e.g., 'warning') to a button, overriding default styles. This example uses a 'dragon' icon.

```html
{{% multishortcode name="button" format="%s" %
- content: "Get Hugo"
  href: "https://gohugo.io/"
  icon: "dragon"
  style: "warning"
{{% /multishortcode %}}
```

--------------------------------

### Format Site Param Output

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/siteparam/_index.en.md

This example demonstrates how to format the output of the siteparam shortcode using the 'format' attribute. It retrieves the 'editURL' and prepends it with custom text.

```shortcode
{{% multishortcode name="siteparam" format="`editURL` value: %s" %}}
name = "editURL"
{{% /multishortcode %}}
```

--------------------------------

### Render Configuration Data in Multiple Formats

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/layouts/partials/shortcodes/multiconfig.html

This shortcode renders configuration data in TOML, YAML, and JSON formats. It can display content directly or from specific sections of site data. Use the `file` parameter to specify a filename to display above the code, and `fm` to render as front matter.

```html
{{- "/shortcodes/multiconfig.html" | partial "function/import.html" (dict "page" $page "params" $params) -}}
```

--------------------------------

### Public Web Server from Root Configuration

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/sitemanagement/deployment/_index.en.md

Use this configuration when deploying your site to the root of a public web server.

```toml
baseURL = 'https://example.com/'
```

--------------------------------

### Indented Code Blocks in Markdown

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/markdown.en.md

Create code blocks by indenting lines of code by at least two spaces. This is useful for displaying longer code examples.

```markdown
    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code
```

--------------------------------

### Tab with Default Style and Color

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/tab/_index.en.md

Demonstrates a tab using the 'default' style and a specified color. The background adapts to the theme's default style but with the specified color.

```go
{{% multishortcode name="tabs" %}}
content:
  - title: "default style and color"
    style: "default"
    color: "blue"
    content: |
      The `style` parameter affects how the `color` parameter is applied.

      The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
{{% /multishortcode %}}
```

--------------------------------

### Override Topbar Area

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/customization/topbar/_index.en.md

Redefine a predefined area, such as the '_end_' area, to customize its content. This example shows how to keep only the '_more_' button by overriding the `end.html` partial.

```html
{{ partial "topbar/button/more.html" (dict
  "page" . 
  "onempty" "disable"
)}}

```

--------------------------------

### Basic Notice Shortcode Usage

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/shortcodes/notice/_index.en.md

Demonstrates the basic usage of the notice shortcode with style, title, icon, and content. This is useful for displaying important information in a visually distinct box.

```html
{{% multishortcode name="notice" print="false" %}}
style: "primary"
title: "There may be pirates"
icon: "skull-crossbones"
content: |

  It is all about the boxes.
{{% /multishortcode %}}
```

--------------------------------

### Enable Link and Image Warnings

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/authoring/frontmatter/linking/index.en.md

Configure `link.errorlevel` and `image.errorlevel` to control build behavior for unresolved local links and images. Set to 'warning' to print a console warning or 'error' to abort the build.

```toml
link.errorlevel = "warning"
image.errorlevel = "warning"
```

--------------------------------

### Math Shortcode Examples

Source: https://context7.com/mcshelby/hugo-theme-relearn/llms.txt

Render mathematical and chemical formulas using MathJax. Supports inline and block formulas, and can be enabled globally or via code fences.

```html
<!-- Inline formula using shortcode -->
{{< math >}}$E = mc^2${{< /math >}}
```

```html
<!-- Block / display formula -->
{{< math align="center" >}}
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$ 
{{< /math >}}
```

```yaml
<!-- Enable math globally in front matter -->
+++
[params]
  math.force = true
+++
```

```markdown
<!-- Or use codefence syntax -->
```math
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)
```
```

--------------------------------

### Directory Structure (Content Directory Translation)

Source: https://github.com/mcshelby/hugo-theme-relearn/blob/main/docs/content/configuration/sitemanagement/multilingual/_index.en.md

Example directory structure for a multilingual site using translation by content directory, where content is organized into language-specific subdirectories.

```tree
- content | folder
  - en | folder
    - log | folder
      - first-day | folder
        - _index.md | fa-fw fab fa-markdown | secondary
      - second-day | folder
        - index.md | fa-fw fab fa-markdown | secondary
      - third-day.md | fa-fw fab fa-markdown | secondary
      - _index.md | fa-fw fab fa-markdown | secondary
    - _index.md | fa-fw fab fa-markdown | secondary
  - pir | folder
    - log | folder
      - first-day | folder
        - _index.md | fa-fw fab fa-markdown | secondary
      - second-day | folder
        - index.md | fa-fw fab fa-markdown | secondary
      - third-day.md | fa-fw fab fa-markdown | secondary
      - _index.md | fa-fw fab fa-markdown | secondary
    - _index.md | fa-fw fab fa-markdown | secondary
- themes | folder
  - hugo-theme-relearn | folder
    - ... | folder
- hugo.toml | file-alt | accent
```