--- name: ghost description: Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization --- # Ghost CMS Theme Development You are an expert in Ghost CMS theme development, Handlebars templating, and modern frontend technologies. ## Core Principles - Write semantic, accessible HTML - Use Handlebars helpers effectively - Optimize for performance and SEO - Follow Ghost theme development best practices - Create responsive, mobile-first designs ## Project Structure ``` theme/ ├── assets/ │ ├── css/ │ │ └── screen.css │ ├── js/ │ │ └── main.js │ └── images/ ├── partials/ │ ├── header.hbs │ ├── footer.hbs │ └── post-card.hbs ├── default.hbs ├── index.hbs ├── post.hbs ├── page.hbs ├── tag.hbs ├── author.hbs ├── error.hbs └── package.json ``` ## Handlebars Templating ### Basic Template Structure ```handlebars {{!< default}}

``` ### Default Layout (default.hbs) ```handlebars {{meta_title}} {{ghost_head}} {{> header}} {{{body}}} {{> footer}} {{ghost_foot}} ``` ### Partials ```handlebars {{!-- partials/post-card.hbs --}}

``` ## Ghost Helpers ### Content Helpers ```handlebars {{!-- Post content --}} {{content}} {{!-- Excerpt with word limit --}} {{excerpt words="50"}} {{!-- Reading time --}} {{reading_time}} {{!-- Featured image with responsive sizes --}} {{img_url feature_image size="l"}} {{!-- Date formatting --}} {{date format="MMMM D, YYYY"}} ``` ### Conditional Helpers ```handlebars {{#is "home"}} {{!-- Home page content --}} {{/is}} {{#is "post"}} {{!-- Single post content --}} {{/is}} {{#has tag="featured"}} Featured {{/has}} {{#if @member}}

Welcome, {{@member.name}}!

{{/if}} ``` ### Loop Helpers ```handlebars {{#foreach posts}} {{!-- Access loop variables --}} {{#if @first}}

{{/if}} {{/foreach}} {{!-- Get posts with specific tag --}} {{#get "posts" filter="tag:featured" limit="3"}} {{#foreach posts}} {{> post-card}} {{/foreach}} {{/get}} ``` ## Tailwind CSS Integration ### Setup ```javascript // tailwind.config.js module.exports = { content: ['./**/*.hbs'], theme: { extend: { colors: { ghost: { accent: 'var(--ghost-accent-color)', }, }, }, }, }; ``` ### Using Ghost Accent Color ```css :root { --ghost-accent-color: {{@site.accent_color}}; } .accent-bg { background-color: var(--ghost-accent-color); } ``` ## Alpine.js Integration ```handlebars

``` ## Membership Integration ```handlebars {{#if @member}} {{#if @member.paid}} {{!-- Premium content --}} {{content}} {{else}} {{!-- Free member content --}}

Upgrade to access premium content

{{/if}} {{else}} {{!-- Public content --}} Subscribe {{/if}} ``` ## SEO and Performance ### Meta Tags ```handlebars {{!-- Ghost handles meta via ghost_head --}} {{ghost_head}} {{!-- Custom structured data --}} ``` ### Image Optimization ```handlebars {{!-- Responsive images --}} {{title}}

``` ## Package.json Configuration ```json { "name": "theme-name", "version": "1.0.0", "engines": { "ghost": ">=5.0.0" }, "config": { "posts_per_page": 10, "image_sizes": { "s": { "width": 300 }, "m": { "width": 600 }, "l": { "width": 1000 }, "xl": { "width": 2000 } } } } ``` ## Testing - Use gscan to validate theme - Test across different Ghost versions - Check responsive behavior - Validate membership features - Test with various content types