README

本项目使用以下库及其版本

Craft CMS: 4
Tailwind CSS: 3
Alpine JS: 3
Vite: 4

平台需求

PHP: 8.2
Node: 18
PostgreSQL: 14
Redis: 7

本地开发需求

ddev - 管理平台需求
tableplus - 本地数据库客户端

功能

导航构建器
SEO优化
本地开发预配置
- ddev 预配置所有平台需求及SSL
- 预配置额外容器命令
- VSCode插件用于调试和智能感知
预配置构建过程
- JavaScript打包和压缩
- CSS打包和压缩
- 自定义字体打包
- 缓存失效清单
- 子资源完整性
预配置VSCode集成
- 扩展
- 语法高亮
- 静态错误
质量保证
- （自动）格式化
- 代码检查
- 类型检查
轻松设置favicon
从src目录的绝对导入
oklch支持

创建新项目

运行命令以克隆，将被提示输入项目名称，并在可能的情况下自动更新，提交所有更改，运行设置

手动设置cp触发器，电子邮件

确保满足本地开发需求。然后，只需运行

composer create-project --no-install acalvino4/boilerplate PATH

由于这些操作针对每个新项目都是特定的，因此需要手动完成一些操作

将所有“boilerplate”实例替换为您的项目名称
- package.json
- composer.json
- .env.example.dev
- .ddev/config.yaml
- .vscode/launch.json
- config/build/vite.config.ts
- 在整个config/project目录中
在config/general.php中更新cpTrigger为有趣/适当的值
在config/project/project.yaml中更新email.fromEmail为应发送系统电子邮件的适当电子邮件地址
在本地设置说明中更新<repo-url>和<project-name>
请遵循本文档底部关于favicon的说明
根据您的项目适当删除或修改LICENSE.md
删除此“创建新项目”部分
git add -A; git commit -a -m "initial project scaffolding";
git remote add origin <repo-url>; git push;

本地设置

确保满足本地开发需求。然后，导航到您希望设置项目的目录，并运行

git clone <repo-url>
cd <project-name>
ddev setup

从预发布或生产环境下载数据库备份，并使用下一节中的命令导入

开发

命令

启动/停止应用：ddev start / ddev stop
启动/停止开发服务器：ddev dev / ^c
启动/停止xdebug：ddev xdebug on + F5 / ddev xdebug off
启用Craft调试工具栏：从Craft控制面板，右上角的用户图标 > 预设 > 开发。然后通过右下角的图标访问调试工具栏。
在TablePlus中打开数据库：ddev tableplus
导出数据库：ddev export-db -f=/tmp/dump.sql.gz
导入数据库：ddev import-db --src=/tmp/dump.sql.gz
启动 Mailhog 窗口：ddev launch -m
手动构建资源：ddev build
更新所有依赖项：ddev update
检查 ts 和 php 的格式化、代码风格和类型安全：ddev test
修复可自动修复的问题：ddev fix
composer、npm 和 craft 命令必须从 ddev 容器中运行 - 只需在它们前面加上 ddev

Typescript

此项目配置为使用 alpine.js。在实现任何自定义行为之前，请先检查 alpine 是否可以使用模板指令来满足您的需求，并且还可以查看无头、集成和组件，按照此优先级顺序查看是否可以满足您的需求。

Typescript 已经配置为从 css 和 ts 目录进行绝对导入。要为任何其他目录设置绝对导入，您可以在 tsconfig.json 的 compilerOptions.paths 设置和 vite.config.ts 的 resolver.alias 设置中遵循格式，或者参考此指南。

CSS

此项目已配置为使用 tailwindcss，因此您应尽可能使用实用类而不是编写 CSS。

favicon

您只需将几个特定的文件放入 src/public/favicon 目录。构建过程和模板将处理其余部分。有关创建各种图标格式的详细信息（svg 应始终是所有其他图标的母版图像），请参阅此指南。

favicon.ico，一个 32x32 的 ico 格式图像
favicon.svg，一个配置了亮色和暗色环境的 svg
favicon-180.png，一个 180x180 的 png，用于 apple touch 图标，最好带有背景颜色和 20 像素的填充
favicon-192.png，一个 192x192 的 png，用于 android 主屏幕链接
favicon-512.png，一个 512x512 的 png，用于 android 启动屏幕

将项目的品牌图标和徽标添加到 storage/rebrand/icon 和 storage/rebrand/logo 目录，分别进行定制。确保它已配置为亮色和暗色环境。

字体

建议使用 Google fonts，只需在 wrapper.twig 中粘贴几行即可。强烈推荐使用可变字体，您可以在 google 上将其搜索范围限制为它们，尽管您必须手动组合链接。如果您需要使用自定义字体，请确保它以 woff2 格式提供以获得最佳性能，将文件放在 src/fonts 中，并将相应的 @font-face 规则放在 src/styles/font.css 中。

颜色

oklch 颜色在构建过程中自动处理，以便在不支持它们的浏览器和显示设备上有回退。了解此方法的优势。使用此颜色模型的主要优势是更宽的色域和更可预测的调色板生成。只需在您的 tailwind 配置中添加 oklch() 函数。

colors: {
  primary: {
    100: "oklch(90% 0.3 17)",
    200: "oklch(80% 0.3 17)",
    ...
  }
}

上游更新

如果一个网站的需求适用于大多数网站，请在模板仓库中创建它们，然后将它们合并到您的网站中。这样，我们可以利用您的改进来提升所有衍生网站。要将模板中的更改合并到您的网站中

git remote add boilerplate https://github.com/acalvino4/craft-boilerplate.git （只需执行一次）
检出新分支
git fetch boilerplate
git merge boilerplate/master
处理任何合并冲突并提交

acalvino4 / craft-boilerplate

维护者

详细信息