在 Ghost CMS 中开发或优化主题时，用标准目录…

适用于基于 Ghost CMS 开发、改造或审查主题，需要模板结构、组件、会员、SEO 与性能最佳实践的场景。

适用场景

解决思路

1. 编写语义化、可访问的 HTML。
2. 有效使用 Handlebars helpers。
3. 针对性能和 SEO 进行优化。
4. 遵循 Ghost 主题开发最佳实践。
5. 创建响应式、移动优先的设计。
6. 按标准 Ghost 主题目录组织文件：assets/css/screen.css、assets/js/main.js、assets/images、partials/header.hbs、partials/footer.hbs、partials/post-card.hbs、default.hbs、index.hbs、post.hbs、page.hbs、tag.hbs、author.hbs、error.hbs、package.json。
7. 在模板中使用 {{!< default}} 指定默认布局，在 main.site-content 中用 {{#foreach posts}} 循环并渲染 {{> post-card}}，最后用 {{pagination}} 输出分页。
8. 在 default.hbs 中构建完整 HTML：html lang 使用 {{@site.locale}}，head 设置 charset、viewport、title 使用 {{meta_title}}，调用 {{ghost_head}}，通过 {{asset "css/screen.css"}} 引入样式。
9. 在 body 上使用 {{body_class}}，引入 {{> header}}，输出 {{{body}}}，引入 {{> footer}}，调用 {{ghost_foot}}，通过 {{asset "js/main.js"}} 引入脚本。
10. 创建 partials/post-card.hbs 作为文章卡片：article 使用 class="post-card {{post_class}}"。
11. 在 post-card 中用 {{#if feature_image}} 判断特色图，输出 a 链接到 {{url}}，img 使用 src="{{img_url feature_image size="m"}}"、alt="{{title}}"、loading="lazy"。
12. 在 post-card 中输出标题和链接：h2.post-card-title > a href="{{url}}" 显示 {{title}}。
13. 在 post-card 中用 {{#if excerpt}} 判断摘要，输出 p.post-card-excerpt 并使用 {{excerpt words="30"}}。
14. 在 post-card 的 footer 中输出时间：time datetime="{{date format="YYYY-MM-DD"}}"，显示 {{date format="D MMM YYYY"}}，以及 {{reading_time}}。
15. 使用内容 helpers：{{content}} 输出正文，{{excerpt words="50"}} 输出限定词数摘要，{{reading_time}} 输出阅读时间，{{img_url feature_image size="l"}} 输出特色图，{{date format="MMMM D, YYYY"}} 格式化日期。
16. 使用条件 helpers：{{#is "home"}} 判断首页，{{#is "post"}} 判断单篇文章，{{#has tag="featured"}} 判断带 featured 标签，{{#if @member}} 判断会员并可用 {{@member.name}}。
17. 使用循环 helpers：{{#foreach posts}} 遍历文章，用 {{#if @first}} 处理首篇文章，用 {{#get "posts" filter="tag:featured" limit="3"}} 获取指定标签文章后再 foreach。
18. 集成 Tailwind CSS：在 tailwind.config.js 中设置 content: ['./**/*.hbs']，在 theme.extend.colors 中定义 ghost.accent 为 'var(--ghost-accent-color)'。
19. 使用 Ghost accent color：在 :root 中设置 --ghost-accent-color: {{@site.accent_color}}，在 .accent-bg 中使用 background-color: var(--ghost-accent-color)。
20. 集成 Alpine.js：用 x-data="{ open: false }" 定义状态，用 @click="open = !open" 切换菜单，用 x-show="open" 和 x-transition 控制导航显示，并渲染 {{navigation}}。
21. 集成会员功能：用 {{#if @member}} 判断登录会员，外层内用 {{#if @member.paid}} 输出 {{content}} 给付费会员，否则显示升级提示，非会员显示 href="#/portal/signup" 的订阅链接。
22. 处理 SEO：依赖 {{ghost_head}} 输出 Ghost 管理的 meta，并可自定义 JSON-LD 结构化数据，@type 为 Blog，name 用 {{@site.title}}，url 用 {{@site.url}}。
23. 优化图片：使用 srcset 提供 {{img_url feature_image size="s"}} 300w、size="m" 600w、size="l" 1000w，设置 sizes 响应式规则，src 使用 size="m"，alt 使用 {{title}}，并加 loading="lazy"。
24. 配置 package.json：设置 name、version、engines.ghost 为 ">=5.0.0"。
25. 在 package.json 的 config 中设置 posts_per_page: 10。
26. 在 package.json 的 config.image_sizes 中定义 s width 300、m width 600、l width 1000、xl width 2000。
27. 使用 gscan 验证主题。
28. 测试不同 Ghost 版本下的兼容性。
29. 检查响应式行为。
30. 验证会员功能。
31. 用各种内容类型进行测试。

适用边界 · 注意事项

• 不适用于非 Ghost CMS 项目，或不想使用 Handlebars 模板体系的前端项目。
• 不适用于无法遵循 Ghost 主题目录、无法运行 gscan 校验的环境。
• 不适用于以 React/Vue 等 SPA 为主、只把 Ghost 当纯 Headless CMS 的场景。