diff options
Diffstat (limited to 'CONTENT_GUIDE.md')
| -rw-r--r-- | CONTENT_GUIDE.md | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/CONTENT_GUIDE.md b/CONTENT_GUIDE.md index b071166..3f16340 100644 --- a/CONTENT_GUIDE.md +++ b/CONTENT_GUIDE.md @@ -663,6 +663,157 @@ Styled video with custom class: --- +### Text Formatting Shortcodes + +#### Strike Shortcode + +Creates strikethrough text. + +**Usage:** +```hugo +{{< strike >}}This text is crossed out{{< /strike >}} +``` + +#### Highlight (em) Shortcode + +Creates highlighted/marked text (yellow background). + +**Usage:** +```hugo +{{< em >}}This text is highlighted{{< /em >}} +``` + +#### Dropcap Shortcode + +Creates a paragraph with a decorative drop cap (large first letter). + +**Usage:** +```hugo +{{< dropcap >}} +Once upon a time, there was a beautiful story that began with this first letter... +{{< /dropcap >}} +``` + +**Parameters:** +- `class` (optional) — CSS class for styling + +--- + +### Container Shortcodes + +#### Div Shortcode + +Opens a `<div>` wrapper with optional CSS class. Pair with `div-close` shortcode. + +**Usage:** +```hugo +{{< div class="container featured" >}} +Content inside the div +{{< div-close >}} +``` + +**Parameters:** +- `class` — CSS class(es) for the div element + +#### Div-Close Shortcode + +Closes a div opened with the `div` shortcode. + +--- + +### Gallery Shortcodes + +#### Gallery Shortcode + +Creates a gallery container for displaying multiple images. + +**Usage:** +```hugo +{{< gallery >}} +{{< gal-img src="photo1.jpg" alt="Photo 1" >}} +{{< gal-img src="photo2.jpg" alt="Photo 2" >}} +{{< /gallery >}} +``` + +#### Gallery Image (gal-img) Shortcode + +Embeds an image in a gallery. Must be used inside a `gallery` shortcode. + +**Usage:** +```hugo +{{< gal-img src="image.jpg" alt="Image description" >}} +``` + +**Parameters:** +- `src` (required) — Path to image file +- `alt` (required) — Alt text for accessibility + +--- + +### Utility Shortcodes + +#### SVG Shortcode + +Embeds inline SVG icons from your `assets/SVGs/` folder. + +**Usage:** +```hugo +{{< svg name="icon-name" class="optional-class" >}} +``` + +**Parameters:** +- `name` (required) — Name of SVG file (without .svg extension). File must be in `assets/SVGs/` folder. +- `class` (optional) — CSS class for styling the icon + +**Example:** +```hugo +{{< svg name="github" class="social-icon" >}} +``` + +#### Actions Shortcode + +Creates a button-style action link (useful for CTAs). + +**Usage:** +```hugo +{{< actions url="https://example.com" desc="Click Me" outclass="optional-wrapper-class" inclass="optional-button-class" >}} +``` + +**Parameters:** +- `url` (required) — Link URL +- `desc` (required) — Button text +- `outclass` (optional) — CSS class for the `<ul>` wrapper +- `inclass` (optional) — CSS class for the `<a>` button element + +**Example:** +```hugo +{{< actions url="https://github.com/danix2" desc="Visit my GitHub" outclass="centered" inclass="primary" >}} +``` + +#### Search Shortcode + +Embeds a search form with results display. Requires JavaScript integration. + +**Usage:** +```hugo +{{< search >}} +``` + +**Note:** This shortcode requires corresponding JavaScript and i18n (internationalization) configuration to function properly. + +#### Contact Shortcode + +Embeds a comprehensive contact form with fields for name, email, subject, and message. + +**Usage:** +```hugo +{{< contact >}} +``` + +**Note:** The form POSTs to `/php/contact.php` by default. You can update the form action in the shortcode if using a different backend endpoint. + +--- + ## Troubleshooting ### Article doesn't appear on site |
