Import WordPress posts and migrate standalone content to Hugo
- Successfully imported 1731 WordPress posts to Hugo markdown format - Migrated 204+ images from archive to static directory - Copied standalone directories (curtain, farm, gobbler, house, images, party, revcemetery, railsday, birthday) - Fixed all internal links to use /legacy prefix for archived content - Remapped archive links to point to correct Hugo posts - Fixed Louisville Georgia Cemetery post rendering issue 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
136
content/posts/callout-examples.md
Normal file
136
content/posts/callout-examples.md
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: "Callout Block Examples"
|
||||
date: 2025-01-13T19:00:00-05:00
|
||||
draft: true
|
||||
tags:
|
||||
- documentation
|
||||
- features
|
||||
---
|
||||
|
||||
This post demonstrates the new callout blocks feature for highlighting important information in your blog posts.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Available Callout Types
|
||||
|
||||
### Note (Default)
|
||||
|
||||
{{< callout type="note" >}}
|
||||
This is a standard note callout. Use it for general observations or additional information that complements your main text.
|
||||
{{< /callout >}}
|
||||
|
||||
### Tip
|
||||
|
||||
{{< callout type="tip" title="Pro Tip" >}}
|
||||
Share helpful advice or best practices with the tip callout. Great for tutorials and how-to guides!
|
||||
|
||||
You can include **formatted text**, `inline code`, and even lists:
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
{{< /callout >}}
|
||||
|
||||
### Information
|
||||
|
||||
{{< callout type="info" >}}
|
||||
The info callout is perfect for providing context or background information. It draws attention without being too assertive.
|
||||
{{< /callout >}}
|
||||
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
Use warning callouts to alert readers about potential issues or important caveats. This helps prevent mistakes and ensures important information isn't overlooked.
|
||||
{{< /callout >}}
|
||||
|
||||
### Danger
|
||||
|
||||
{{< callout type="danger" title="Critical Alert" >}}
|
||||
Danger callouts are for the most important warnings. Use these sparingly for truly critical information that could lead to data loss or security issues if ignored.
|
||||
{{< /callout >}}
|
||||
|
||||
### Success
|
||||
|
||||
{{< callout type="success" >}}
|
||||
Celebrate achievements or confirm successful operations with success callouts! ✨
|
||||
|
||||
Perfect for:
|
||||
- Confirmation messages
|
||||
- Achievement milestones
|
||||
- Positive outcomes
|
||||
{{< /callout >}}
|
||||
|
||||
### Question
|
||||
|
||||
{{< callout type="question" title="Did You Know?" >}}
|
||||
Question callouts are great for FAQs, rhetorical questions, or thought-provoking content that encourages reader engagement.
|
||||
{{< /callout >}}
|
||||
|
||||
### Quote
|
||||
|
||||
{{< callout type="quote" >}}
|
||||
"The best way to predict the future is to invent it." - Alan Kay
|
||||
|
||||
Quote callouts provide an elegant way to highlight quotations or testimonials.
|
||||
{{< /callout >}}
|
||||
|
||||
### Example
|
||||
|
||||
{{< callout type="example" title="Code Example" >}}
|
||||
Here's how you use a callout in your markdown:
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" title="Custom Title" */>}}
|
||||
Your content here with **markdown** support!
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
Examples help readers understand how to use features in practice.
|
||||
{{< /callout >}}
|
||||
|
||||
### Bug Report
|
||||
|
||||
{{< callout type="bug" title="Known Issue" >}}
|
||||
Document bugs or known issues with the bug callout type. This helps users understand current limitations and workarounds.
|
||||
|
||||
**Workaround**: Use the alternative method described in the documentation until this is fixed.
|
||||
{{< /callout >}}
|
||||
|
||||
## Usage in Your Posts
|
||||
|
||||
To use callouts in your blog posts, use the shortcode syntax:
|
||||
|
||||
```markdown
|
||||
{{</* callout type="tip" title="Optional Custom Title" */>}}
|
||||
Your content with full markdown support
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Parameters:
|
||||
- `type`: The callout type (note, tip, info, warning, danger, success, question, quote, example, bug)
|
||||
- `title`: Optional custom title (defaults to the capitalized type name)
|
||||
|
||||
## Nested Content Support
|
||||
|
||||
{{< callout type="info" title="Advanced Features" >}}
|
||||
Callouts support complex nested content:
|
||||
|
||||
1. **Numbered lists** with formatting
|
||||
2. `Code blocks` for technical content:
|
||||
```bash
|
||||
hugo server -D
|
||||
```
|
||||
3. Links to [other resources](https://gohugo.io)
|
||||
4. Even nested emphasis and ***combined*** styles
|
||||
|
||||
All markdown features work inside callouts!
|
||||
{{< /callout >}}
|
||||
|
||||
## Mobile Responsive
|
||||
|
||||
{{< callout type="success" >}}
|
||||
All callout blocks are fully responsive and adapt to smaller screens with adjusted padding and font sizes for optimal mobile reading experience.
|
||||
{{< /callout >}}
|
||||
|
||||
---
|
||||
|
||||
Now you can make your blog posts more engaging and organized with these beautiful callout blocks!
|
Reference in New Issue
Block a user