update
This commit is contained in:
53
content/_index.md
Normal file
53
content/_index.md
Normal file
@@ -0,0 +1,53 @@
|
||||
+++
|
||||
title = "Home"
|
||||
sort_by = "date"
|
||||
template = "index.html"
|
||||
+++
|
||||
|
||||
{{ hero3(
|
||||
announcement='<a href="#" class="font-semibold text-gray-300 hover:text-white">Read more →</a>',
|
||||
subheader="SUBHEADER",
|
||||
title="This is Hero1.html",
|
||||
subtitle="This is smaller title h2",
|
||||
description="Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.",
|
||||
button1_text="Get started",
|
||||
button1_link="#",
|
||||
button2_text="Learn more",
|
||||
button2_link="#"
|
||||
) }}
|
||||
|
||||
{{ hero2(title="Welcome to Your Zola Site", subtitle="A modern, responsive website built with Zola and styled with Tailwind CSS", button_text="Learn More", button_link="/blog", bg_color="bg-blue-700") }}
|
||||
|
||||
## About This Site
|
||||
|
||||
This is a modern, responsive website built with [Zola](https://www.getzola.org/) and styled with [Tailwind CSS](https://tailwindcss.com/). It demonstrates the use of shortcodes and markdown together to create beautiful, reusable components.
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
|
||||
{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}
|
||||
|
||||
{{ feature_card(title="Modern Design", description="Tailwind CSS provides utility classes for rapid UI development", icon="🎨") }}
|
||||
|
||||
{{ feature_card(title="Responsive Layout", description="Looks great on all devices, from mobile to desktop", icon="📱") }}
|
||||
|
||||
{{ feature_card(title="Markdown Content", description="Write your content in Markdown for easy formatting", icon="📝") }}
|
||||
|
||||
{{ feature_card(title="Syntax Highlighting", description="Code blocks are automatically highlighted", icon="💻") }}
|
||||
|
||||
{{ feature_card(title="Search Functionality", description="Built-in search for your content", icon="🔍") }}
|
||||
|
||||
</div>
|
||||
|
||||
### Getting Started
|
||||
|
||||
To add new content, create Markdown files in the `content` directory. Zola will automatically generate pages for each file.
|
||||
|
||||
For more information, check out the [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tailwind CSS documentation](https://tailwindcss.com/docs).
|
||||
|
||||
{{ 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") }}
|
||||
|
||||
{% raw %}
|
||||
```html
|
||||
<!-- Example of using the hero2 shortcode -->
|
||||
{{ hero2(title="Welcome", subtitle="A subtitle here", button_text="Click Me", button_link="/some-page", bg_color="bg-blue-700", image="/path/to/image.jpg") }}
|
||||
```
|
||||
{% endraw %}
|
||||
8
content/blog/_index.md
Normal file
8
content/blog/_index.md
Normal file
@@ -0,0 +1,8 @@
|
||||
+++
|
||||
title = "Blog"
|
||||
sort_by = "date"
|
||||
template = "section.html"
|
||||
page_template = "page.html"
|
||||
+++
|
||||
|
||||
Welcome to the blog section. Here you'll find all the latest articles and updates.
|
||||
59
content/blog/first-post.md
Normal file
59
content/blog/first-post.md
Normal file
@@ -0,0 +1,59 @@
|
||||
+++
|
||||
title = "Getting Started with Zola and Tailwind CSS"
|
||||
date = 2025-03-18
|
||||
description = "Learn how to set up a static site using Zola and Tailwind CSS"
|
||||
+++
|
||||
|
||||
# Getting Started with Zola and Tailwind CSS
|
||||
|
||||
Zola is a fast static site generator written in Rust, and Tailwind CSS is a utility-first CSS framework. Together, they make a powerful combination for building modern websites.
|
||||
|
||||
## Why Zola?
|
||||
|
||||
Zola offers several advantages:
|
||||
|
||||
- **Speed**: Built in Rust, Zola is incredibly fast
|
||||
- **Simplicity**: Everything is included out of the box
|
||||
- **Flexibility**: Customize your site with Tera templates
|
||||
- **Live Reload**: See changes instantly during development
|
||||
|
||||
## Why Tailwind CSS?
|
||||
|
||||
Tailwind CSS provides:
|
||||
|
||||
- **Utility-First**: Build custom designs without leaving your HTML
|
||||
- **Responsive**: Easily create responsive designs with responsive utility variants
|
||||
- **Component-Friendly**: Extract reusable components with @apply
|
||||
- **Customizable**: Tailor the framework to your design needs
|
||||
|
||||
## Code Example
|
||||
|
||||
Here's a simple example of a Zola template using Tailwind CSS:
|
||||
|
||||
```html
|
||||
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
|
||||
<div class="md:flex">
|
||||
<div class="md:flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover md:w-48" src="/img/example.jpg" alt="Example image">
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
|
||||
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the perfect balance</a>
|
||||
<p class="mt-2 text-gray-500">Getting the right mix of technology for your project can be challenging.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
To create your own Zola site with Tailwind CSS:
|
||||
|
||||
1. Install Zola and Node.js
|
||||
2. Create a new Zola site: `zola init my-site`
|
||||
3. Set up Tailwind CSS: `npm init -y && npm install -D tailwindcss postcss autoprefixer`
|
||||
4. Initialize Tailwind: `npx tailwindcss init -p`
|
||||
5. Configure your templates and styles
|
||||
6. Build and deploy your site
|
||||
|
||||
Happy coding!
|
||||
118
content/blog/second-post.md
Normal file
118
content/blog/second-post.md
Normal file
@@ -0,0 +1,118 @@
|
||||
+++
|
||||
title = "Customizing Your Tailwind CSS Theme"
|
||||
date = 2025-03-17
|
||||
description = "Learn how to customize Tailwind CSS to match your brand"
|
||||
+++
|
||||
|
||||
# Customizing Your Tailwind CSS Theme
|
||||
|
||||
One of the greatest strengths of Tailwind CSS is its customizability. In this post, we'll explore how to tailor Tailwind to match your brand's design system.
|
||||
|
||||
## The tailwind.config.js File
|
||||
|
||||
The `tailwind.config.js` file is where all your customizations live. Here's a basic example of customizing colors and fonts:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
theme: {
|
||||
colors: {
|
||||
primary: '#3490dc',
|
||||
secondary: '#ffed4a',
|
||||
danger: '#e3342f',
|
||||
// ...
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Graphik', 'sans-serif'],
|
||||
serif: ['Merriweather', 'serif'],
|
||||
},
|
||||
extend: {
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
'144': '36rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
}
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
borderColor: ['focus-visible'],
|
||||
opacity: ['disabled'],
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Extending vs. Overriding
|
||||
|
||||
When customizing Tailwind, you have two options:
|
||||
|
||||
1. **Extending** - Add new values while keeping the defaults
|
||||
2. **Overriding** - Replace the defaults entirely
|
||||
|
||||
For most projects, extending is the safer option as it preserves Tailwind's useful defaults.
|
||||
|
||||
## Custom Plugins
|
||||
|
||||
You can also create custom plugins to add more complex functionality:
|
||||
|
||||
```js
|
||||
// tailwind.config.js
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
plugin(function({ addUtilities, theme }) {
|
||||
const newUtilities = {
|
||||
'.text-shadow-sm': {
|
||||
textShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
|
||||
},
|
||||
'.text-shadow': {
|
||||
textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
'.text-shadow-lg': {
|
||||
textShadow: '0 15px 30px rgba(0, 0, 0, 0.11), 0 5px 15px rgba(0, 0, 0, 0.08)',
|
||||
},
|
||||
}
|
||||
|
||||
addUtilities(newUtilities)
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive Design
|
||||
|
||||
Tailwind makes it easy to create responsive designs with breakpoint prefixes:
|
||||
|
||||
```html
|
||||
<div class="text-center sm:text-left md:text-right lg:text-justify">
|
||||
This text will be centered on mobile, left-aligned on small screens,
|
||||
right-aligned on medium screens, and justified on large screens.
|
||||
</div>
|
||||
```
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Tailwind v2.0 and later includes built-in dark mode support:
|
||||
|
||||
```js
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
darkMode: 'media', // or 'class'
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
Then in your HTML:
|
||||
|
||||
```html
|
||||
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
|
||||
This will be light mode by default and dark mode when the user's
|
||||
system preferences are set to dark mode (or when the 'dark' class
|
||||
is applied to an ancestor if you're using 'class' mode).
|
||||
</div>
|
||||
```
|
||||
|
||||
By customizing Tailwind CSS, you can create a unique design system that perfectly matches your brand while still leveraging the productivity benefits of a utility-first CSS framework.
|
||||
144
content/shortcodes.md
Normal file
144
content/shortcodes.md
Normal file
@@ -0,0 +1,144 @@
|
||||
+++
|
||||
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 %}
|
||||
Reference in New Issue
Block a user