我为 GhostCMS 开发的主题是免费的开源软件，并且使用 ITCSS 开发。

一款免费开源的 Ghost 主题

我和我的学生Alejandro Torres一起，使用 ITCSS 架构重新设计了这个博客的主题。

在对博客进行全面重新设计之后，我们认为最好将其发布给社区，让任何用户都能学习和改进它。

您可以在GitHub上找到源代码。

下一篇文章我将解释什么是 ITCSS 以及我们是如何构建模板的。

介绍

Ares Designer是一个从零开始构建的 Ghost 主题，它提供了一系列符合极简主义设计风格的有趣功能。

这个主题最初由Alejandro Torres和 Carlos Caballero 为CarlosCaballero.io博客开发。如果您想为改进这个博客做出贡献，请随时提交 PR，我们非常乐意改进这个项目！

特征

• 完全使用HTML5和CSS3编写。

• 移动优先设计方法。

• 完全响应式布局。

• 使用 ITCSS 架构来构建您的 SASS 项目。

• 在卡片中使用标题图片。

• 根据图像 alt 标签（和图像）自动生成 figcaption。

• 利用 npm 的脚本改进开发工作流程

• 改进了响应式设计和移动端体验。

• 使用元标签改进SEO内容。

• 支持多账户。

• 预估阅读时间。

• 系列博客文章。

• FontAwesome 的集成，方便使用图标字体。

• Highlight.js 集成用于语法高亮显示 — Highlight JS。

你可以在我的博客上看到演示。你也可以查看ITCSS 架构图来了解它的外观。

安装

1. 克隆仓库。

2. 将此仓库的内容压缩成一个 Zip 文件。

3. 通过 Ghost 管理面板上传您的 Zip 文件。

4. 切换到此主题。

5. 玩得开心。

设置

post.hbs
可配置的 JavaScript 标识符。

disqus_shortname：您的 Disqus 唯一标识符

相反，您需要将其粘贴到 Ghost 安装的代码注入中的博客头部：

博客页脚：

开发与定制

您可以通过编辑 settings.scss 文件并执行样式表生成脚本来配置模板：`npm run prod`。

最后，压缩整个模板目录，然后使用 Ghost 控制面板上传。

settings.scss 文件的内容如下：

屏幕截图

路线图

• 一个典型的404页面错误。

• 搜索支持。

• 每个页面的加载进度状态。

你使用的是 Ares Designer 吗？

如果您在实际网站上使用 Ares Designer，请将网站 URL 发送给我。我很乐意看到世界各地用户进行的定制和实施。无论如何，感谢您使用 Ares Designer！

原文发表于www.carloscaballero.io，日期为 2019 年 4 月 11 日。