Ghost

作者 mindrally97184105b5da无许可证269 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5周前更新

Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization

仅含说明Software DevelopmentDesign & Creative
AI 生成的概览

指导 Ghost CMS 主题开发，涵盖 Handlebars 模板、Alpine.js、Tailwind CSS 与性能优化实践。

功能
提供构建 Ghost CMS 主题的参考指引，涵盖项目结构、Handlebars 模板与辅助函数、局部模板以及默认布局。同时说明 Tailwind CSS 配置、Alpine.js 交互、会员条件判断、SEO 元标签、响应式图片处理、package.json 配置以及使用 gscan 进行主题测试。该技能仅为说明性内容，本身不生成文件或脚本。
适用场景
适用于创建或修改 Ghost CMS 主题、编写 Handlebars 模板与局部模板，或接入 Tailwind CSS、Alpine.js 与会员功能时。也适合在发布前检查主题的 SEO、图片优化与校验。
运行要求
该技能不附带脚本。使用前提是已安装 Ghost CMS 并具备主题项目，同时需要 Tailwind CSS、Alpine.js 以及用于测试的 gscan 校验工具。

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}}
<main class="site-content">  {{#foreach posts}}    {{> post-card}}  {{/foreach}}
  {{pagination}}</main>

Default Layout (default.hbs)

handlebars
<!DOCTYPE html><html lang="{{@site.locale}}"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>{{meta_title}}</title>
  {{ghost_head}}
  <link rel="stylesheet" href="{{asset "css/screen.css"}}"></head><body class="{{body_class}}">
  {{> header}}
  {{{body}}}
  {{> footer}}
  {{ghost_foot}}
  <script src="{{asset "js/main.js"}}"></script></body></html>

Partials

handlebars
{{!-- partials/post-card.hbs --}}<article class="post-card {{post_class}}">  {{#if feature_image}}    <a href="{{url}}" class="post-card-image-link">      <img        class="post-card-image"        src="{{img_url feature_image size="m"}}"        alt="{{title}}"        loading="lazy"      >    </a>  {{/if}}
  <div class="post-card-content">    <h2 class="post-card-title">      <a href="{{url}}">{{title}}</a>    </h2>
    {{#if excerpt}}      <p class="post-card-excerpt">{{excerpt words="30"}}</p>    {{/if}}
    <footer class="post-card-meta">      <time datetime="{{date format="YYYY-MM-DD"}}">        {{date format="D MMM YYYY"}}      </time>      <span class="reading-time">{{reading_time}}</span>    </footer>  </div></article>

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"}}  <span class="featured-badge">Featured</span>{{/has}}
{{#if @member}}  <p>Welcome, {{@member.name}}!</p>{{/if}}

Loop Helpers

handlebars
{{#foreach posts}}  {{!-- Access loop variables --}}  {{#if @first}}<div class="first-post">{{/if}}  {{> post-card}}  {{#if @first}}</div>{{/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.jsmodule.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
<div x-data="{ open: false }">  <button @click="open = !open">Toggle Menu</button>
  <nav x-show="open" x-transition>    {{navigation}}  </nav></div>

Membership Integration

handlebars
{{#if @member}}  {{#if @member.paid}}    {{!-- Premium content --}}    {{content}}  {{else}}    {{!-- Free member content --}}    <p>Upgrade to access premium content</p>  {{/if}}{{else}}  {{!-- Public content --}}  <a href="#/portal/signup">Subscribe</a>{{/if}}

SEO and Performance

Meta Tags

handlebars
<head>  {{!-- Ghost handles meta via ghost_head --}}  {{ghost_head}}
  {{!-- Custom structured data --}}  <script type="application/ld+json">  {    "@context": "https://schema.org",    "@type": "Blog",    "name": "{{@site.title}}",    "url": "{{@site.url}}"  }  </script></head>

Image Optimization

handlebars
{{!-- Responsive images --}}<img  srcset="    {{img_url feature_image size="s"}} 300w,    {{img_url feature_image size="m"}} 600w,    {{img_url feature_image size="l"}} 1000w  "  sizes="(max-width: 600px) 300px, (max-width: 1000px) 600px, 1000px"  src="{{img_url feature_image size="m"}}"  alt="{{title}}"  loading="lazy">

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

来源与署名

来源：mindrally/skills位于ghost提交9718410

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 mindrally/skills 的技能

Zustand State Management

mindrally

为 React 和 TypeScript 应用中的 Zustand 状态管理提供设计与使用规范。

Software Development2695周前更新

Zod Schema Validation

mindrally

关于 Zod 模式校验与 TypeScript 类型推断的实践指导。

Software Development2695周前更新

Woocommerce

mindrally

面向 WordPress 与 WooCommerce 插件开发的指南，涵盖 PHP 规范、钩子、安全与扩展模式。

Software Development2695周前更新

Wordpress

mindrally

以 PHP 规范、安全实践和测试约定指导 WordPress 与 WooCommerce 开发。

Software Development2695周前更新

Websocket Development

mindrally

使用 WebSocket 通信构建实时应用的最佳实践与指南。

Software Development2695周前更新

Web Development

mindrally

提供 Bootstrap、Django、HTMX 以及通用 Web 最佳实践的 Web 开发指南。

Software Development2695周前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新