README

Droopler 的新项目模板

关于

Droopler 是一个专为 Drupal 10 设计的配置文件，旨在几分钟内启动一个新的网页。它基于最新的前端技术，包括 Bootstrap 5。Droopler 的维护者是 Droptica。

• 官方网站: droptica.com/droopler
• 教程: droptica.com/droopler/tutorials
• 演示: droopler-demo.droptica.com
• 配置文件仓库: github.com/droptica/droopler
• Drupal.org 项目: drupal.org/project/droopler
• 问题队列: drupal.org/project/issues/droopler

获取最新消息，请关注我们的 Facebook 和 Twitter。

这个 Droopler 模板是什么？

它是一个基于 Droopler 的新项目的骨架和样板。如果您想使用 Droopler，请（分叉或下载）此仓库。它包含启动新站点所需的最小代码集。就像 drupal/recommended-project 或 drupal-composer/drupal-project 一样对待它。

此仓库包括

• composer.json，包含运行 Droopler 所需的所有依赖项。
• .gitignore 调整以使用 Drupal 的 Git。
• 包含最小所需 CSS/SCSS 和 JavaScript 的样板子子主题。它包含 gulpfile.js 以加快 Drupal 前端开发。

在 Platform.sh 上部署

您可以在 Platform.sh 上部署和托管您的 Droopler 安装。

快速入门

分叉此仓库并将新创建的克隆到您的本地计算机上。

本地开发

本节提供了运行 Droopler 分发的本地说明。

使用自定义开发环境

1. 运行 composer create-project droptica/droopler-project:^4.0-alpha <path> 来安装项目及其依赖项。
2. 运行 npm 来下载主题依赖项并编译资源。
   
   Droopler 使用 npm 栈来加快新站点的开发。它将 SCSS 编译为 CSS，允许 Autoprefixer 处理浏览器兼容性，并最小化所有 JavaScript 文件。在您的计算机上安装 Node v18 和 npm 并在项目的根目录中运行以下命令：

$ cd web/profiles/contrib/droopler/themes/custom/droopler_theme
$ npm install

$ cd web/themes/custom/droopler_subtheme
$ npm install
$ npm run dev

1. 运行 Drupal 安装程序。
   转到 http://yourserver.local/install.php 并按照配置步骤操作。

使用 DDEV

1. 安装 ddev.
2. 运行 ddev config 来配置项目。
3. 运行 ddev start 来启动项目。
4. 运行 ddev composer install 来下载项目依赖项。
5. 如果您在访问存储库时遇到问题，请运行 ddev auth ssh 将您的 ~/.ssh 目录中的密钥添加到 Web 容器，并再次运行 ddev composer install 命令。
6. 运行 ddev theme 以安装主题依赖项并编译资产。默认情况下，会编译生产资产。您也可以运行 ddev theme dev 以编译开发环境下的资产。您还可以运行 ddev theme watch 以监视 SCSS 和 JS 的更改并在即时处理它们。
7. 访问 ddev 提供的 URL 完成网站的安装。您还可以通过 CLI 运行 ddev build-profile 从 CLI 构建Droopler配置文件（您将获得一个功能齐全的版本，包括博客、产品演示内容）。

使用 Lando

1. 安装 lando.
2. 运行 lando start 以启动项目。
3. 运行 lando prepare 以构建项目代码。或者，您也可以运行 lando composer install 下载项目依赖项，然后运行 lando theme-production 和 lando subtheme-production 以编译资产。
4. 访问 lando info 提供的 URL 完成网站的安装。您还可以通过 CLI 从 CLI 构建 Droopler 配置文件。运行 lando build-full-profile 以获取功能齐全的版本，或运行 lando build-full-profile 以获取最小版本。

使用连接到活跃 Platform.sh 环境上的数据库实例的 DDEV

以下是在活动 Platform.sh 环境的实时数据库实例上运行模板的本地说明。

对于所有使用 Platform.sh 进行开发的场景，在孤立环境中进行开发非常重要——在本地开发时不要连接到生产环境中的数据。以下所有选项都假设您已将此模板部署到 Platform.sh，以及以下起始命令

platform get PROJECT_ID
cd project-name
platform environment:branch updates

DDEV 与 Platform.sh 集成，可让您轻松在本地开发 Drupal。有关最新信息，请参阅提供者文档。

通常，步骤如下

1. 安装 ddev.
2. 配置文件已提供在 .ddev/providers/platform.yaml，因此您无需运行 ddev config。
3. 通过管理控制台通过检索 API 令牌。
4. 更新您的 ddev 全局配置文件以使用您刚刚检索到的令牌

   web_environment:
   - PLATFORMSH_CLI_TOKEN=abcdeyourtoken

5. 运行 ddev restart。
6. 使用 platform project:info 获取您的项目 ID。如果您尚未将本地 repo 与项目连接（例如，通过源集成，默认情况下），您可以使用 platform project:list 定位项目 ID，并使用 platform project:set-remote PROJECT_ID 在本地配置 Platform.sh。
7. 更新 .ddev/providers/platform.yaml 文件以匹配您的当前配置

   environment_variables:
   project_id: PROJECT_ID
   environment: CURRENT_ENVIRONMENT
   application: drupal

8. 使用 ddev pull platform 获取当前环境的数据。
9. 完成工作后，运行 ddev stop 和 ddev poweroff。

注意

对于上述许多步骤，如果您不在项目目录中或环境与现有拉取请求相关联，则可能需要包含 CLI 标志 -p 项目 ID 和 -e 环境 ID。

如何处理子主题？

使用 DDEV

有几个命令可以帮助您处理子主题。您可以从项目根目录运行它们。

• ddev theme watch - 监视 SCSS 和 JS 的更改并在即时处理它们
• ddev theme dev - 清理衍生文件并编译子主题中的所有 SCSS/JS 用于开发环境
• ddev theme production - 清理衍生文件并编译子主题中的所有 SCSS/JS 用于生产环境

使用 lando

有几个命令可以帮助您处理子主题。您可以从项目根目录运行它们。

• lando theme-watch 或 lando subtheme-watch - 监视 SCSS 和 JS 的更改并在即时处理它们
• lando theme-dev 或 lando subtheme-dev - 清理派生文件并编译主题中的所有 SCSS/JS 以用于开发环境
• lando theme-production 或 lando subtheme-production - 清理派生文件并编译主题中的所有 SCSS/JS 以用于生产环境

自行运行 npm

首先在子主题目录中运行 npm run watch。它将跟踪主题源文件中的所有更改并在飞行中编译资源。

$ cd web/themes/custom/droopler_subtheme
$ npm run watch

还有其他针对主题开发者的 npm 命令，以下是完整参考

• npm run watch - 监视 SCSS 和 JS 中的更改并即时处理它们
• npm run dev - 清理派生文件并编译子主题中的所有 SCSS/JS 以用于开发环境
• npm run production - 清理派生文件并编译子主题中的所有 SCSS/JS 以用于生产环境
• npm run stylint - 运行 stylint
• npm run stylint-fix - 运行 stylint 并自动修复错误

SCSS 结构

• src/scss/main.style.scss - 将基础主题和子主题中的所有 SCSS 代码合并
• src/components - 存储所有组件的目录，请参阅 components/README.md

您可以使用任何喜欢的 SCSS 结构。我们建议将文件分为 layout/ 和 components/ 目录。只需记住将您的文件包含在 main.style.scss 中。

SCSS 配置

Droopler 设计得使您的工作更轻松。您无需覆盖 SCSS 或 CSS 代码来调整自己的设置。在大多数情况下，修改配置就足够了。

只需查看子主题中的变量定义。

使用 src/scss/bootstrap/_variables.scss 文件来覆盖基础 bootstrap 变量。

// Colors.
// $red: #ac0000 !default;
// $orange: #ff9475 !default;
// $primary: $red !default;

使用 src/scss/base/_themes.scss 文件来覆盖每个主题中的项目特定颜色。

// *[data-theme="theme-light"] {
//   --section-background-color: #fff;
//   --overlay-background-color: #fff;
//   --divider-background-color: #{$red};
//   ...
// }

使用 src/scss/base/_variables.scss 文件来覆盖 components/paragraphs 变量。

// :root {
//   // Base component: CTA.
//   --cta-width: 100%;
//   --cta-max-width: 18rem;
//   --cta-margin-top-bottom: 0.25rem;
//   ...
// }

当您保存此配置文件时，npm run dev 将使用您的配置重新编译所有 SCSS。

扩展和覆盖组件

您可以通过在 src/components 目录中扩展或覆盖组件来替代通过 _variables.scss 文件中的 CSS 变量覆盖特定组件。

请参阅： components/README.md

更新 Droopler

请参阅 Droopler 配置文件中的 UPDATE.md 文件。

如何安装 Google Fonts？

默认情况下，Droopler 使用免费的 Inter 网络字体。如果您想从 Google 安装自己的字体，请将它们的定义放入 droopler_subtheme.libraries.yml 中，如下所示

global-styling:
  version: VERSION
  css:
    theme:
      '//fonts.googleapis.com/css?family=Rajdhani:500,600,700|Roboto:400,700&subset=latin-ext': { type: external, minified: true }
      css/style.css: {}

如何安装图标字体？

如果您想从 CDN 安装 FontAwesome 或 Glyphicons，只需获取它们的 URL 并遵循上一章中关于 Google Fonts 的说明。您可以在 droopler_subtheme.libraries.yml 和 droopler_subtheme.info.yml 中找到 FontAwesome 的示例。

设置 git 钩子

在 .githooks 目录中，您可以找到预提交钩子，用于运行质量工具并确保前端已以 production 模式编译。

要设置 git 钩子，请运行

git config --local core.hooksPath .githooks/

首次运行或遇到无权限错误时，请为这些脚本添加 +x。

chmod -R +x .githooks/