Ghost CMS主题开发指南：从入门到精通，掌握Handlebars模板与SEO优化

ghost by mindrally/skills

101 周安装量

43 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mindrally/skills --skill ghost

开发内容管理系统 SEO

🇨🇳中文介绍

Ghost CMS 主题开发

您是一位精通 Ghost CMS 主题开发、Handlebars 模板引擎和现代前端技术的专家。

核心原则

编写语义化、可访问的 HTML
高效使用 Handlebars 助手
针对性能和 SEO 进行优化
遵循 Ghost 主题开发最佳实践
创建响应式、移动优先的设计

项目结构

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 模板引擎

基本模板结构

{{!< default}}

<main class="site-content">
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}

  {{pagination}}
</main>

默认布局 (default.hbs)

<!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>

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

867,400 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

283,600 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

228,700 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

157,400 周安装

{{!-- 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>

{{!-- 文章内容 --}}
{{content}}

{{!-- 带字数限制的摘要 --}}
{{excerpt words="50"}}

{{!-- 阅读时间 --}}
{{reading_time}}

{{!-- 带响应式尺寸的特色图片 --}}
{{img_url feature_image size="l"}}

{{!-- 日期格式化 --}}
{{date format="MMMM D, YYYY"}}

{{#is "home"}}
  {{!-- 首页内容 --}}
{{/is}}

{{#is "post"}}
  {{!-- 单篇文章内容 --}}
{{/is}}

{{#has tag="featured"}}
  <span class="featured-badge">精选</span>
{{/has}}

{{#if @member}}
  <p>欢迎，{{@member.name}}！</p>
{{/if}}

{{#foreach posts}}
  {{!-- 访问循环变量 --}}
  {{#if @first}}<div class="first-post">{{/if}}
  {{> post-card}}
  {{#if @first}}</div>{{/if}}
{{/foreach}}

{{!-- 获取带有特定标签的文章 --}}
{{#get "posts" filter="tag:featured" limit="3"}}
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}
{{/get}}

// tailwind.config.js
module.exports = {
  content: ['./**/*.hbs'],
  theme: {
    extend: {
      colors: {
        ghost: {
          accent: 'var(--ghost-accent-color)',
        },
      },
    },
  },
};

使用 Ghost 强调色

:root {
  --ghost-accent-color: {{@site.accent_color}};
}

.accent-bg {
  background-color: var(--ghost-accent-color);
}

<div x-data="{ open: false }">
  <button @click="open = !open">切换菜单</button>

  <nav x-show="open" x-transition>
    {{navigation}}
  </nav>
</div>

{{#if @member}}
  {{#if @member.paid}}
    {{!-- 付费会员内容 --}}
    {{content}}
  {{else}}
    {{!-- 免费会员内容 --}}
    <p>升级以访问高级内容</p>
  {{/if}}
{{else}}
  {{!-- 公开内容 --}}
  <a href="#/portal/signup">订阅</a>
{{/if}}

<head>
  {{!-- Ghost 通过 ghost_head 处理元数据 --}}
  {{ghost_head}}

  {{!-- 自定义结构化数据 --}}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Blog",
    "name": "{{@site.title}}",
    "url": "{{@site.url}}"
  }
  </script>
</head>

{{!-- 响应式图片 --}}
<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"
>

{
  "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 }
    }
  }
}

使用 gscan 验证主题
在不同 Ghost 版本上进行测试
检查响应式行为
验证会员功能
使用各种内容类型进行测试

🇺🇸English

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

{{!< default}}

<main class="site-content">
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}

  {{pagination}}
</main>

Default Layout (default.hbs)

<!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

{{!-- 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

{{!-- 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

{{#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

{{#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

// tailwind.config.js
module.exports = {
  content: ['./**/*.hbs'],
  theme: {
    extend: {
      colors: {
        ghost: {
          accent: 'var(--ghost-accent-color)',
        },
      },
    },
  },
};

Using Ghost Accent Color

:root {
  --ghost-accent-color: {{@site.accent_color}};
}

.accent-bg {
  background-color: var(--ghost-accent-color);
}

Alpine.js Integration

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle Menu</button>

  <nav x-show="open" x-transition>
    {{navigation}}
  </nav>
</div>

Membership Integration

{{#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

<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

{{!-- 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

{
  "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

Weekly Installs

101

Repository

mindrally/skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli85

opencode85

codex78

cursor77

claude-code75

github-copilot74

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

116,600 周安装