Zola Cheatsheet - Serene Theme

This post demonstrates all the major features supported by Zola static site generator, including markdown extensions, shortcodes, and theme-specific functionality.

Post Front Matter

The post front matter is the metadata that is used to generate the post. It is located at the top of the post file.

Table of Contents

Zola automatically generates a table of contents when toc = true is set in the front matter. The TOC is based on the heading structure of your document.

Drafts

Posts can be marked as drafts to exclude them from builds:

# In post front matter
draft = true

Aliases & Redirects

Create URL aliases for posts:

# In post front matter
aliases = ["/old-url", "/another-old-url"]

Shortcodes

Theme provided shortcodes:

Quote

Zola is fast, simple, and flexible.

— Vincent Prouillet, Creator of Zola

A quote without attribution.

Detail (Collapsible)

Callouts

Information Note

This is a note callout.

Pro Tip

This is a tip callout.

Important Notice

This is an important callout.

Warning

This is a warning callout.

Proceed with Caution

This is a caution callout.

Markdown Features

Just demonstrating the how it looks in the theme.

Text Formatting

Bold text using **bold** or __bold__

Italic text using *italic* or _italic_

Bold and italic using ***bold and italic***

Strikethrough using ~~strikethrough~~

Inline code using backticks

Blockquotes

This is a simple blockquote.

It can span multiple paragraphs and include formatting.

Blockquotes with Headers

Blockquotes can contain headers and other markdown elements.

Escape Characters

You can escape special characters: *not italic* `not code`

Line Breaks

You can force line breaks
by ending a line with two spaces.

Lists

Unordered Lists

• First item
• Second item
  • Nested item
  • Another nested item
    • Deep nested item
• Third item

Ordered Lists

1. First ordered item
2. Second ordered item
   1. Nested ordered item
   2. Another nested item
3. Third ordered item

Task Lists

• Completed task
• Incomplete task
• Another completed task

Definition Lists

Term 1 : Definition 1

Term 2 : Definition 2a : Definition 2b

Links and References

External link to Zola documentation

Internal link to another post

Link with title

Images

Basic Image

Optimized Images from External Directory

Zola provides built-in image processing to automatically optimize large images. The enhanced optimized_figure shortcode supports sourcing from external directories.

Need to copy the images to the static directory when committing to the repo. And use optimized_figure shortcode to display the image.

{#
    optimized_figure(
      src="DSC00245.jpg", 
      source_dir="source_images",
      alt="Advanced optimized image",
      caption="Sourced from external directory"
    )
#}

Tables

Horizontal Rules

Footnotes

Here's a sentence with a footnote ¹.

Note: Footnotes are a CommonMark extension supported by Zola's markdown processor.

Code Blocks

Basic Code Block

This is a plain code block
without syntax highlighting.

Code Block with Line Numbers and Highlighting

1
fn main() {
2
    let name = "Zola"; // This line is highlighted
3
    
4
    // These lines are highlighted
5
    println!("Hello, {}!", name);
6
    println!("Welcome to static site generation!");
7
    
8
    let features = vec!["Fast", "Simple", "Powerful"];
9
    for feature in features {
10
        println!("- {}", feature);
11
    }
12
}

Mathematical Expressions

Zola supports mathematical expressions using KaTeX when math = true is enabled.

Inline Math

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Block Math

$$ \begin{aligned} \nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \ \nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned} $$

Matrix Example

$$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix} $$

Mermaid Diagrams

Flowchart

  flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix issues]
    E --> B
    C --> F[Deploy]
    F --> G[End]

Sequence Diagram

  sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database
    
    User->>Browser: Enter URL
    Browser->>Server: HTTP Request
    Server->>Database: Query data
    Database-->>Server: Return data
    Server-->>Browser: HTTP Response
    Browser-->>User: Display page

Git Graph

  gitGraph
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Add feature A"
    commit id: "Add feature B"
    checkout main
    merge develop
    commit id: "Release v1.0"
    branch hotfix
    checkout hotfix
    commit id: "Fix critical bug"
    checkout main
    merge hotfix
    commit id: "Release v1.0.1"