Custom Blockquotes
ModernDuang extends standard Markdown blockquotes with four styled types designed to call attention to different kinds of information. Each type has a distinct icon, color scheme, and semantic purpose — and they all feature an interactive mouse-tracking glow effect.
Overview
Syntax
Custom blockquotes use Hexo tag syntax — a pair of opening and closing tags wrapping your content:
{% note %}
This is a helpful tip or piece of supplementary information.
{% endnote %}
{% warning %}
Be careful with this configuration — it may affect performance.
{% endwarning %}
{% declare %}
We are excited to announce the release of version 2.0!
{% enddeclare %}
{% danger %}
**Do not** delete this file. It is required for the theme to function.
{% enddanger %}
You can include any Markdown content inside the tags — paragraphs, lists, code blocks, links, and even other inline elements.
Important: There must be no leading whitespace before the tags. The {% must be at the very beginning of the line.
Custom Titles
By default, each blockquote type displays a preset label (Note, Warning, Declare, Danger). You can override the default title by passing custom text inside the opening tag:
{% note Pro Tip %}
This is a tip with a custom title.
{% endnote %}
{% warning Heads Up %}
Be careful — this action cannot be undone.
{% endwarning %}
{% declare Announcement %}
This content is for informational purposes only.
{% enddeclare %}
{% danger Do Not %}
Never run this command in production!
{% enddanger %}
Custom titles accept any text with no length limit. If you prefer not to show a title, you can leave the space empty, but we recommend using a short, descriptive title for clarity.
Visual Design
Each blockquote type is rendered as a colored card with a left border, tinted background, icon, and claymorphism rounded corners. Here are live demonstrations of each:
Tip
Note — Soft green background with a green left border and icon. Use for general tips, supplementary info, and friendly callouts.
Warning
Warning — Soft amber background with an orange left border and icon. Use for cautions and things to be aware of.
Info
Declare — Soft purple background with a purple left border and icon. Use for announcements, declarations, and highlighted statements.
Danger
Danger — Soft red background with a red left border and icon. Use for critical warnings and breaking changes.
All colors automatically adapt to both light and dark modes for sufficient contrast.
Mouse-Tracking Glow Effect
Each custom blockquote has a subtle mouse-tracking glow effect. As the visitor moves their cursor over the blockquote, a soft radial glow follows the cursor position, illuminating the card with the blockquote's signature color. This interaction reinforces the claymorphism tactile feel and makes the callouts feel responsive and alive.
The effect is implemented via CSS using a radial-gradient that repositions based on mousemove event coordinates. It is purely cosmetic and degrades gracefully — there is no layout shift or performance impact.
Dark Mode
Custom blockquotes automatically adjust their colors in dark mode using CSS variables. The background becomes a darker shade of the type color, and the text and borders maintain appropriate contrast. See the Dark Mode page for the full list of CSS variables.
Best Practices
- Use Note for supplementary information, tips, and non-critical callouts
- Use Warning for things the reader should be aware of before proceeding
- Use Declare for announcements, release notes, or highlighting important statements
- Use Danger sparingly — only for truly critical warnings where ignoring them could cause problems
- Keep content concise — blockquotes are most effective with short, scannable text
- Combine with Markdown — you can use bold, italics, links, and lists inside blockquotes
Example: In a Blog Post
## Installing the Plugin
{% note %}
Make sure you have Node.js 16 or later installed before proceeding.
{% endnote %}
Run the installation command:
```bash
npm install hexo-plugin-example
{% warning %}
This plugin modifies your _config.yml. Back up your config file before installing.
{% endwarning %}
{% danger %}
The --force flag will overwrite existing files without confirmation. Use with extreme caution.
{% enddanger %}
## Post Info Display
ModernDuang automatically displays several useful pieces of information on every post page to give readers a quick overview and enhance the browsing experience.
### Word Count & Reading Time
Every post page automatically calculates and displays a **word count** and **estimated reading time**:
- **Word count**: Strips HTML tags and counts the total characters. Each Chinese character counts as 1 word; English words are counted by whitespace separation.
- **Reading time**: Estimated at an average reading speed of **400 characters per minute**, rounded up. For example, a 2000-character article shows an estimated reading time of ~5 minutes.
The calculation is performed automatically in `layout/post.ejs` — no configuration required. Reading time appears below the post title alongside the publication date, categories, and other metadata.
### Copyright Notice
A **copyright notice** is automatically displayed at the bottom of every post, using the [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) license:
- **Attribution**: Displays the post author (from Hexo's `author` config or the post's `author` field)
- **Source**: Links to the original post URL
- **License**: Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
The copyright notice includes:
- Author name (clickable, links to `/about`)
- Post title and original URL
- License badge and link
- Notice that commercial use is not permitted
If you use a different license, you can customize the copyright block by editing `layout/post.ejs`.
### Table of Contents (TOC)
ModernDuang provides a dynamically generated **Table of Contents** in a fixed left sidebar on post pages:
- **Auto-generated**: Extracted from h1–h4 headings in the post — no manual setup needed
- **Hierarchical display**: h1 as top-level entries, h2 indented one level, h3/h4 further indented
- **Smart collapse**: Only sub-headings under the current h1 section are expanded by default, keeping the TOC clean
- **Scroll spy**: As you scroll, the current section's TOC entry is automatically highlighted
- **Smooth scrolling**: Clicking a TOC entry smoothly scrolls to the corresponding heading
- **Fixed position**: The TOC panel remains visible as you scroll, without overlapping post content
The TOC is generated and managed by JavaScript in `source/js/main.js`. It is automatically hidden on mobile devices to save screen space.
### Back-to-Top Button
After scrolling more than **400px** down the page, a **back-to-top button** automatically appears in the bottom-right corner:
- The button is a circular icon with the claymorphism raised shadow style
- Clicking it smoothly scrolls the page back to the top
- The button hides automatically once you are back at the top
- It adapts to the current color scheme and supports both light and dark modes
This feature is handled by scroll event listeners in `source/js/main.js` and requires no configuration.
## Related Pages
- [Dark Mode](/guide/features/homepage/dark-mode) — How blockquote colors adapt to the color scheme
- [Mermaid Diagrams](/guide/features/post/mermaid) — Another content enhancement feature
