README

这是一个 Craft CMS 3.x 和 Craft Commerce 3.x 的样板文件，由 Craft CMS 和 Craft Commerce 内部用于项目。最初灵感来自 Made By Shape 的 Craft 3 样板文件。

要求

• PHP 7.3+
• Composer 2.x.x
• Node 14.x.x

安装

1. composer create-project myth-digital/craft-3-stack
2. 不要运行 ./craft setup，而是复制并编辑 .env.example 文件。
3. 一旦完成 .env，运行 ./craft install
4. 使用 ./craft setup/security-key 生成安全密钥

包含 Commerce

按照以下步骤设置 Commerce。

1. 将新创建的 config/project 替换为 config/project-stack-commerce 文件夹 rm -rf config/project && mv config/project-stack-commerce config/project
2. 运行项目同步命令以同步 db 配置 ./craft project-config/apply
3. 将回退图片复制到 dist 文件夹。 cp src/images/* public/dist/images/
4. 更新模板目录，使其与您希望的 URL 匹配。默认为 /shop。

[] 待办事项 - 为回退图片添加更好的解决方案

设置 / 全局
某些设置在安装后是必需的，以便完成设置。

• 在 全局 > 网站 中启用 VueJS（对于 Commerce 是必需的）
• 在 全局 > 商务 中更新商店路径全局设置。这应该与模板目录的路径匹配。确保在前后使用正斜杠。例如：/shop/。如果您希望商店位于根级别，只需输入一个正斜杠 /。

不包含 Commerce

该堆栈默认包含 Commerce。

1. 将新创建的 config/project 替换为 config/project-stack 文件夹 rm -rf config/project && mv config/project-stack config/project
2. 运行项目同步命令以同步 db 配置 ./craft project-config/apply
3. 运行以下删除脚本以删除所有 Commerce 文件。

[] 待办事项 - 构建脚本

npm 脚本

npm run dev 本地开发时的首选

npm run prod 生成生产资源（压缩、favicon 等）。非常适合在服务器上运行。

npm run setup 如果项目已存在，则此命令将拉取、迁移和应用项目配置并运行开发任务

包含内容

• Craft CMS 3.x
• Craft Commerce 3.x
• CSS
  • Tailwind CSS 2.0.x
• JavaScript
  • Vue.js
  • Alpine.js
  • loadCSS
  • JavaScript Cookie
  • Vanilla Lazyload
• 模板
  • 块
  • 组件
  • 页面（带动态页面类型）
  • 电子邮件
  • 异常
  • 插件
    • 自由表单
• 配置
  • 自定义 .env 文件
  • 自定义 general.php
  • 项目配置（使用 config/project.yaml）
  • 插件配置
    • Asset Rev
    • Blitz
    • 自由表单
    • Imager X
    • Minify
    • SEOMatic
• 插件
  • Asset Rev
  • Blitz
  • 默认仪表板
  • Imager X
  • 链接字段
  • Minify
  • Redactor
  • SEOMatic
  • DO Spaces
  • CP CSS
  • Super Table
  • Webpayments
  • Commerce 小部件
  • Stripe
• 附加内容
  • 脚本（从不同环境中拉取资产、数据库等）
  • .gitignore
    • 包
    • SASS
    • JavaScript
    • 操作系统文件
    • Craft CMS
    • 缓存
    • 资产源文件夹
    • 日志文件
    • 编辑器目录和文件

术语

组件

组件是模板的组成部分，例如按钮、输入字段等，它们可以组成一个块或完整的模板。请使用 components 文件夹，并按照其用途命名每个组件文件，例如 inputField.twig。

请确保在每个组件文件顶部描述每个组件的使用方法，以便其他开发者了解其用途。如果组件接受任何属性，请确保在组件文件（驼峰命名）顶部包含这些属性的描述（参见 components/_example.twig 文件）。

块

块是较大的标记块，或由较小的组件组成。例如，一个块可以是一个表单，其中包含按钮和输入字段组件。请使用 blocks 文件夹，并按照其用途（驼峰命名）命名每个组件文件，例如 largeForm.twig（如果块存在对应的SASS文件，请使用相同的文件名）。

理想情况下，块应该可以通过矩阵字段进行选择，以便CP用户可以按模板选择这些块。但在某些情况下，这可能不可行，例如页面是动态生成的。

路线图

[] 添加 Google Workbox [] 通过 Webpack 任务预加载字体 [] 将一些 Twig 组件移动到 VueJS