Ghost Themes怎么用 博客主题开发教程

Ghost Themes是Ghost的主题系统，可以用Handlebars模板开发自定义博客外观，适合做个性化博客和内容网站。主题负责呈现页面，不会替代Ghost后台里的文章、标签和设置。下面从目录、模板到上传激活，带你完成一个基础主题。网站名“润灭”也可以作为你练习时的示例品牌名称，先准备好本地开发环境，再逐步替换成自己的设计。

第一步：创建主题目录

先在电脑上新建一个主题文件夹，例如 my-first-theme，名称尽量使用小写英文、数字和连字符。文件夹中创建 assets、partials 等目录，用来放样式、脚本、图片和可复用片段。基础主题至少准备 default.hbs、index.hbs、post.hbs，以及 package.json；起步时先把结构搭好，再逐项填充内容，避免把所有代码堆在一个模板里。

在 assets 下建立 css、js、images 子目录，并创建主样式文件，例如 assets/css/screen.css。把字体、图标等静态资源也放在 assets 中，路径保持清晰。接着新建 package.json，写入主题名称、版本号等基本信息。开发初期可以从Ghost官方免费主题复制一份作为参考，但要确认代码和素材的许可，并删除不需要的页面与样式。

保存文件时留意扩展名：模板使用 .hbs，配置使用 .json，文件名不要误存成 .txt。目录准备好后，先检查是否有默认模板、首页模板、文章模板和资源目录。使用版本控制工具记录每次改动会更稳妥；如果遇到页面空白，优先检查模板语法、资源路径和文件名大小写，再继续调整视觉效果。

第二步：编写模板文件

先编辑 default.hbs，放入所有页面共用的HTML骨架，例如文档标题、导航、页脚和内容区域。Ghost模板可用 {{ghost_head}} 与 {{ghost_foot}} 输出系统需要的头部和底部内容，并用 {{body}} 插入当前页面模板。将样式文件接入页面后，分别在浏览器检查导航、字体和布局是否正常，确保共用结构不会遮挡正文。

然后编写 index.hbs，负责展示文章列表；用 {{#foreach posts}} 遍历文章，在循环中呈现标题、链接、摘要或特色图片，最后用 {{/foreach}} 结束。文章列表应提供清楚的标题层级和可点击链接。再编辑 post.hbs，显示文章标题、作者、日期和正文内容，可使用 {{content}} 输出正文。想加入标签、作者页或错误页时，再按需求增加对应模板。

为避免重复代码，可在 partials 文件夹创建导航、文章卡片等片段，再从其他模板调用。每完成一个小部分，就预览首页和文章页：检查链接是否正确、图片是否加载、窄屏是否可读。样式优先使用语义化类名，并为图片设置合适的宽度规则；这样后续调整配色、间距和响应式布局时，不容易影响模板逻辑。

使用路由和辅助函数

Ghost会根据访问的路由和内容类型选择模板。首页通常使用 index.hbs，单篇文章使用 post.hbs；标签、作者和页面也可以添加专用模板。Handlebars辅助函数用于输出数据或控制模板逻辑，例如 {{#foreach posts}} 遍历文章、{{#if feature_image}} 判断是否有封面图。输出日期、网站信息或导航时，按需使用Ghost提供的辅助函数，并核对变量所在的内容上下文。

需要自定义内容路径或建立专题集合时，可编辑 routes.yaml，定义路由与对应模板。修改前先备份现有路由文件，因为上传新文件可能替换当前配置。若只是做基础博客，可以先不动路由，使用默认行为完成主题。模板写完后，可使用Ghost的主题检查工具检查结构和兼容问题；看到报错时按提示修正文件名、JSON格式或Handlebars语法。

第三步：上传和激活主题

先将主题文件夹打包为 ZIP，确认压缩包内直接包含主题文件，而不是只装着一层外部文件夹。上传前检查 package.json 格式正确、图片与样式路径有效，并测试首页和文章模板。登录Ghost后台，进入设置中的主题或设计页面，点击更换主题，再选择上传主题，把生成的ZIP文件提交。不同Ghost版本的菜单名称可能略有差异。

上传完成后，在已安装主题列表中选择激活。打开网站前台，分别浏览首页、文章详情、标签页和手机宽度下的布局；同时点按导航与文章链接，确认没有404或资源加载失败。若主题依赖 routes.yaml，再按Ghost后台路由设置页面的提示单独上传，并事先备份当前路由。修改主题后重新打包上传，及时检查更新后的页面效果。

如果暂时不想从代码开始，也可以把设计稿或页面构想先整理出来，再用国内替代工具辅助探索界面方案，例如墨刀AI，官网地址：modao.cgref.cn。无论用何种方式设计，最终仍需将页面结构、样式和交互落实到Ghost主题文件中。建议先做一个简洁版本，确认发布流程顺畅后，再逐步加入搜索、订阅和个性化组件。