Post Page

In Quick Start, we created an example article as below:


---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# covercaption: a description of the cover image
# images:
#   - /img/cover.jpg
categories:
  - category1
tags:
  - tag1
  - tag2
# nolastmod: true
# math: true
draft: true
---
 
Cut out summary from your post content here.
 
<!--more-->
 
The remaining content of your post.

There are some parameters in the front matter you can use to customize your post page (and also its summary).

View the below section to learn more about the parameters.

Parameters

Parameter	Description	Required	Auto-generated
`title`	Title of the post	Yes	Yes
`date`	Date of the post	Yes	Yes
`lastmod`	Last modified date of the post	No	Yes
`author`	Author of the post, if it’s not set, the global `author` will be used. If both are not set, the author will not be displayed.	No	No
`avatar`	Author’s avatar	No	No
`authorlink`	Custom link for the current author	No	No
`cover`	Cover image of the post	No	No
`covercaption`	Caption for the cover image	No	No
`images`	Used in `og:image` meta tag	No	No
`categories`	Categories of the post	No	No
`tags`	Tags of the post	No	No
`nolastmod`	Disable the last modified date	No	No

Features

See https://g1en.site/posts/dream-post-features/ for a live demo.

Alerts

Dream supports GitHub Alerts Markdown extension compatible alerts. You can use it in your post like below:


> [!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.
 
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
 
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

If you want to change the default title of the alerts, you can add a markdown attribute named text like below:


> [!NOTE]
> The default alert title is changed to "Hello".
{text="Hello"}

Important

To enable markdown attributes, you still need to set below configuration in your hugo.toml:


[markup]
[markup.goldmark.parser.attribute]
block = true

Mermaid Diagrams

Dream supports Mermaid diagrams. You can use it like below:

Markdown


```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Rendered as:

Mathematics

Dream supports mathematical equations and expressions by using MathJax . The implementation of this feature referred to https://gohugo.io/content-management/mathematics/ .

To use this feature, you need to enable and configure the Goldmark passthrough extension in your site configuration:


[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.passthrough]
        enable = true
        [markup.goldmark.extensions.passthrough.delimiters]
          block = [['\[', '\]'], ['$$', '$$']]
          inline = [['\(', '\)'], ['$', '$']]

And then you can use it like below:

Markdown


```math
This is an inline \(a^*=x-b^*\) equation.
 
This is also an inline $a^*=x-b^*$ equation.
```
 
```math
These are block equations:
 
\[
\begin{aligned}
KL(\hat{y} || y) &= \sum_{c=1}^{M}\hat{y}_c \log{\frac{\hat{y}_c}{y_c}} \\
JS(\hat{y} || y) &= \frac{1}{2}(KL(y||\frac{y+\hat{y}}{2}) + KL(\hat{y}||\frac{y+\hat{y}}{2}))
\end{aligned}
\]
 
These are also block equations:
 
$$a^*=x-b^*$$
 
$$
a^*=x-b^*
$$
```

If you don’t want to use the math codeblock everywhere, you can also set math: true in the front matter of your post like below:


---
math: true # YAML syntax
---

This allows you to use mathematics with other markdown syntaxes in the whole post, like:


- This is an inline \(a^_=x-b^_\) equation.
- This is also an inline $a^*=x-b^*$ equation.