simplicateca / burton
Burton 是 Craft CMS 5 的原型网站/启动套件
This package is auto-updated.
Last update: 2024-09-16 21:57:24 UTC
README
这是一个专为 Craft CMS 5 设计的原型网站/启动套件,擅长快速构建深度、信息丰富的网站。 有意见但灵活。
了解更多信息请访问 buildwithburton.com ➜
什么是 Burton?
Burton 是一个用于以现代、合理、设计/开发/编辑/客户端友好方式建模和架构网站内容的框架。它不是一个包含网站的盒子、通用的页面构建器或 Craft CMS 的主题。
Burton 受 80/20 原则的强烈影响,通过实施一个强大的“默认”内容模型以及支持它的轻量级 Twig 模板,简化了一些网站开发方面。
这使得设计 & 开发团队能够专注于每个项目的独特且具有挑战性的方面,而不是重新发明轮子。
要求
本地开发
Burton 需要 Docker 进行本地开发。请确保您的开发机器上安装了最新版本的 Docker Engine。此外,如果您已经使用 DDEV 进行 Craft 网站开发,Burton 可以无缝运行在您现有的 DDEV 项目旁边,因为 DDEV 是建立在 Docker 之上的。
如果您是 Windows 用户,安装 WSL2 可以增强您使用命令行 make
命令的体验。
如果您在启动项目时遇到任何问题,请打开一个问题,这样我可以为其他操作系统和设置进行调试。
Craft 插件要求
必需插件
Burton 默认情况下只需几个必需的 Craft 插件即可高效运行,每个插件都经过精心选择以提供核心功能。
虽然这些插件并非“必需”,但强烈推荐它们,如果不用它们,将会很麻烦。
当然,您可以根据需要添加额外的插件,但以下插件对于 Burton 正常工作至关重要
由 Burton 的创造者 Simplicate 开发的 SelectPlus 是 Burton 高效运行所必需的付费插件。
我说“高效”,因为虽然理论上可以省略 SelectPlus,但这样会牺牲布局灵活性、作者体验和开发速度。
显然我有偏见,但我也不想给您留下 SelectPlus 是 Craft 中管理块级设计 & 布局标记的唯一选项的印象。
Design Tokens by TrendyMinds、LJ Dynamic Fields by Lewis Jenkins 和 Element Meta by BlueWhale 是三个也可能工作的插件。
当然,您始终可以选择为 Variant / Layout / Theme 属性字段开发自己的解决方案。
预安装插件(免费)
默认安装,但您也可以轻松使用 Redactor 或任何其他可用的富文本字段插件。
甚至可能仅使用 Markdown 字段就过得去,尽管会失去一些功能和作者体验。
这些Twig辅助插件不是严格必需的,但你真的没有理由在每个项目中不使用它们。
而且我也喜欢它们,完全从代码库中删除它们的引用会非常麻烦。
这个非常出色的插件默认已包含在内,但如果你打算使用Vite作为前端构建工具,我会称它为必需的。
如果你想使用其他东西,你当然可以更改它——或者你甚至可以使用没有任何前端构建工具(我有时也怀念网络简单的日子,在webpack和npm之前;但然后我想到了IE5,我就想,“不。”)。
建议的插件(免费)
这些插件的配置已经包含在Burton中,但它们默认并未安装。
- Feed Me
- topshelfcraft/environment-label
- verbb/knock-knock
- vaersaagod/dospaces(或用于资产管理类似的东西)
推荐的付费插件
这些插件的配置和预设已经包含在Burton中,但它们不是严格意义上的必需的。
你可以使用其他插件(或者一个都不用)来实现它们各自的功能
- SEOMatic
- 导航
- Formie
- putyourlightson/craft-blitz
- putyourlightson/craft-sherlock
前端工具 & 框架
CSS
默认模板样式使用Tailwind 3(以及与Vite一起使用的PostCSS),但它们不是严格必需的。
已经非常小心地尽量减少在核心模板中Tailwind的使用。一些类名仍然存在,但它们是可以替换的。
默认网站主题中广泛使用了Tailwind容器查询插件。
JavaScript
Alpine.js和htmxF用于客户端交互。它们不是严格必需的,但您将不得不自己编写几个组件来替换现成的版本:模态框、手风琴、选项卡、搜索字段、下拉菜单、轮播图等。
默认交互组件旨在具有:无障碍、SEO、性能和自定义友好。
此外,Burton模板中还包括了如何实现自定义Vue.js组件和Greensock JS动画的示例。
Vue和Greensock都已包含在前端package.json
文件中,但像几乎所有其他内容一样,它们不是严格必需的(除非您想要它们提供的功能,那么事情就会变得稍微严格一些)。
Vite
如插件部分所述,Burton默认配置为使用Vite作为前端构建工具,但这不是严格的要求,如果需要可以替换。
虽然Burton提供的线框布局旨在“开箱即用”时看起来和功能良好,但它们故意轻量级和简约,允许使用纯CSS、Sass或替代样式方法轻松自定义。
资产存储
Burton已配置为利用Amazon S3或兼容S3的CDN进行资产存储。
虽然这为资产管理提供了一个合理的默认值,但这不是严格的要求,资产存储可以根据需要重新配置。
设置 & 配置
在craftcms/.env
中编辑以下内容
CDN_URL=https://[YOUR_BUCKET].[YOUR_REGION].digitaloceanspaces.com
CDN_FOLDER=[asset/root/folder]
S3_KEY=[...]
S3_SECRET=[...]
S3_ENDPOINT=https://[YOUR_REGION].digitaloceanspaces.com
S3_BUCKET=[YOUR_BUCKET]
S3_REGION=[YOUR_REGION]
在修改.env
文件后,重启Docker,它们使用上述字段在Craft管理界面中配置资产卷。
构建 & 部署
Burton包括用于自动化构建和部署过程的Atomic Build+Deploy脚本。
这些脚本旨在与提供免费计划的CI/CD工具Buddy无缝工作。
虽然使用Buddy不是强制性的,但提供的脚本可以轻松地适应大多数托管设置,并提供用于测试和生产的单独脚本。
安装
使用以下命令创建并运行一个新的Burton项目
composer create-project simplicateca/burton YOUR_PROJECT_NAME
cd YOUR_PROJECT_NAME
make dev
第一次安装Burton项目时,这个过程可能需要几分钟。一旦Docker镜像被本地缓存,后续的安装和加载时间将更快。
成功后,控制台将输出如何访问网站和内容管理面板的信息,如下所示
status-1 | Your Docker Development Environment is Ready!
status-1 | _______________________________________________
status-1 |
status-1 | Frontend Website
status-1 | >> https://:8000
status-1 |
status-1 | Craft CMS Admin
status-1 | >> https://:8000/cms
status-1 | u: craft@example.com
status-1 | p: letmein
前端网站
如果一切顺利,网站前端现在可在以下地址访问:https://:8000。
CMS访问
使用凭据https://:8000/cms:用户名:craft@example.com,密码:letmein。
配置
环境文件
`craftcms/.env`
注意:如果您更改了.env文件
的内容,您需要关闭Docker容器并重新启动它。
Twig模板
我该如何...
导入/导出数据库
管理Composer包
管理前端/Node包
推送到预发布/生产环境
鸣谢
由simplicate.ca开发。
感谢Pixel & Tonic团队对Craft CMS的持续工作。还要感谢Andrew Welch,他的优秀博客文章和插件为许多Craft开发者提供了灵感和学习资源。