145 lines
4.9 KiB
Markdown
145 lines
4.9 KiB
Markdown
+++
|
|
title = "Shortcodes"
|
|
template = "page.html"
|
|
date = 2025-03-18
|
|
+++
|
|
|
|
# Zola Shortcodes
|
|
|
|
This page documents the custom shortcodes available in this Zola site. Shortcodes are reusable components that can be included in your Markdown content.
|
|
|
|
## Hero Shortcode
|
|
|
|
The hero shortcode creates a prominent banner section at the top of a page.
|
|
|
|
### Usage
|
|
|
|
```
|
|
{{ hero(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-600", text_color="text-white") }}
|
|
```
|
|
|
|
### Parameters
|
|
|
|
- `title` (required): The main heading text
|
|
- `subtitle` (optional): Secondary text displayed below the title
|
|
- `button_text` (optional): Text for the call-to-action button
|
|
- `button_link` (optional): URL the button links to
|
|
- `bg_color` (optional): Background color class (default: "bg-indigo-600")
|
|
- `text_color` (optional): Text color class (default: "text-white")
|
|
|
|
### Example
|
|
|
|
```html
|
|
{{ hero(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-gradient-to-r from-purple-600 to-indigo-600") }}
|
|
```
|
|
|
|
## Hero2 Shortcode
|
|
|
|
The hero2 shortcode creates a centered hero section with a patterned background.
|
|
|
|
### Usage
|
|
|
|
```
|
|
{{ hero2(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-blue-700", text_color="text-white", image="/path/to/image.jpg") }}
|
|
```
|
|
|
|
### Parameters
|
|
|
|
- `title` (required): The main heading text
|
|
- `subtitle` (optional): Secondary text displayed below the title
|
|
- `button_text` (optional): Text for the call-to-action button
|
|
- `button_link` (optional): URL the button links to
|
|
- `bg_color` (optional): Background color class (default: "bg-blue-700")
|
|
- `text_color` (optional): Text color class (default: "text-white")
|
|
- `image` (optional): Path to an optional image to display below the text
|
|
|
|
### Example
|
|
|
|
```html
|
|
{{ hero2(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-blue-700") }}
|
|
```
|
|
|
|
## Feature Card Shortcode
|
|
|
|
The feature card shortcode creates a card to highlight a feature or service.
|
|
|
|
### Usage
|
|
|
|
```
|
|
{{ feature_card(title="Feature Name", description="Feature description", icon="🚀", bg_color="bg-white", hover_color="hover:bg-gray-50") }}
|
|
```
|
|
|
|
### Parameters
|
|
|
|
- `title` (required): The feature name
|
|
- `description` (optional): Description of the feature
|
|
- `icon` (optional): An emoji or icon to display
|
|
- `bg_color` (optional): Background color class (default: "bg-white")
|
|
- `hover_color` (optional): Hover effect color class (default: "hover:bg-gray-50")
|
|
|
|
### Example
|
|
|
|
```html
|
|
{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}
|
|
```
|
|
|
|
## Call-to-Action (CTA) Shortcode
|
|
|
|
The CTA shortcode creates an attention-grabbing section with a button.
|
|
|
|
### Usage
|
|
|
|
```
|
|
{{ cta(title="Call to Action", description="Description text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-100", text_color="text-indigo-800", button_color="bg-indigo-600", button_text_color="text-white") }}
|
|
```
|
|
|
|
### Parameters
|
|
|
|
- `title` (required): The main heading text
|
|
- `description` (optional): Description text
|
|
- `button_text` (optional): Text for the call-to-action button
|
|
- `button_link` (optional): URL the button links to
|
|
- `bg_color` (optional): Background color class (default: "bg-indigo-100")
|
|
- `text_color` (optional): Text color class (default: "text-indigo-800")
|
|
- `button_color` (optional): Button background color class (default: "bg-indigo-600")
|
|
- `button_text_color` (optional): Button text color class (default: "text-white")
|
|
|
|
### Example
|
|
|
|
```html
|
|
{{ cta(title="Ready to Get Started?", description="Create your own beautiful website with Zola and Tailwind CSS today.", button_text="View Blog", button_link="/blog") }}
|
|
```
|
|
|
|
## Using Multiple Shortcodes Together
|
|
|
|
You can combine multiple shortcodes on a single page. For example, you might use a hero at the top, followed by feature cards in a grid, and a CTA at the bottom:
|
|
|
|
```markdown
|
|
+++
|
|
title = "Home"
|
|
+++
|
|
|
|
{{ hero(title="Welcome", subtitle="A modern website") }}
|
|
|
|
## Features
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
|
|
{{ feature_card(title="Feature 1", description="Description 1", icon="🚀") }}
|
|
{{ feature_card(title="Feature 2", description="Description 2", icon="⚡") }}
|
|
{{ feature_card(title="Feature 3", description="Description 3", icon="🔍") }}
|
|
</div>
|
|
|
|
{{ cta(title="Ready?", description="Get started today", button_text="Sign Up", button_link="/signup") }}
|
|
```
|
|
|
|
## Advanced Usage: Nested Content
|
|
|
|
Some shortcodes support nested content using the block syntax. This allows you to include more complex content inside the shortcode.
|
|
|
|
```
|
|
{% call hero(title="Welcome") %}
|
|
<div class="custom-content">
|
|
<p>This is custom content inside the hero.</p>
|
|
</div>
|
|
{% endcall %}
|