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 週前更新