README

要包含此主题，您需要在 composer.json 文件中添加以下内容

{
  "repositories": [
    {
      "type": "vcs",
      "url": "git@github.com:ZuCommunications/rapidkit_theme.git"
    }
  ],
  "require": {
    "zucommunications/rapidkit_theme": "dev-main"
  }
}

要从此存储库提取更改，您需要从命令行运行 composer update。

dev- 前缀是 composer 的约定。在上面的示例中，实际的分支名称将是 GitHub 上的 main。有关更多信息，请参阅 https://composer.php.ac.cn/doc/05-repositories.md#loading-a-package-from-a-vcs-repository。

安装后，您将在 web/themes/contrib/rapidkit_theme 中找到此主题。

依赖项

此主题需要以下依赖项

composer require 'drupal/cl_server:^2.0@beta'
drush en -y cl_server sdc

启用

要从项目中启用此主题，您可以从项目根目录运行以下命令

drush theme:install rapidkit_theme
drush config-set system.theme default rapidkit_theme -y
drush cr

禁用

要从项目中禁用此主题，您可以从项目根目录运行以下命令

drush config-set system.theme default olivero -y
drush theme:uninstall rapidkit_theme
drush cr

编译

此主题使用 Webpack Encore 编译资产。

要从项目中编译资产，您可以从项目根目录运行以下命令

cd web/themes/contrib/rapidkit_theme
nvm use
npm install
npm run build

Storybook

我们正在使用 @lullabot/storybook-drupal-addon 来为 storybook 提供支持。它使用由 https://github.com/storybookjs/storybook/tree/next/code/frameworks/server-webpack5 提供的 fetchStoryHtml 函数向运行的 Drupal 安装发送请求。cl_server Drupal 模块将创建一个路由，该路由将返回给定组件的标记。有关用法示例，请参阅 https://github.com/Lullabot/storybook-drupal-addon/blob/main/src/fetchStoryHtml.ts。

设置

您需要告诉 storybook 在哪里查找您的后端服务器。将示例.env 文件复制到 .env 并更新 STORYBOOK_DRUPAL_URL 变量，使其指向您的本地 Drupal 安装。

此外，cl_server 的 storybook 集成需要 CORS 启用才能正常工作。将以下内容添加到 development.services.yml

parameters:
  twig.config:
    debug: true
    cache: false
  cors.config:
    enabled: true
    allowedHeaders: ["*"]
    allowedMethods: []
    allowedOrigins: ["*"]
    exposedHeaders: false
    maxAge: false
    supportsCredentials: true

此外，每个故事都需要定义故事的完整路径。当使用 lando 时，它应该如下所示

{
  "parameters": {
    "fileName": "/app/web/themes/contrib/rapidkit_theme/components/alert/alert.stories.json"
  }
}

此外，您需要在 /admin/people/permissions 上为匿名用户添加“使用 CL 服务器端点”

用法

要从项目根目录启动 storybook 服务器，您可以运行以下命令

cd web/themes/contrib/rapidkit_theme
npm run storybook

代码检查

此主题使用 ESLint 对 JavaScript 进行代码检查。我们只检查代码质量规则。有关更多信息，请参阅 https://prettier.node.org.cn/docs/en/comparison.html。您需要 配置您的编辑器 以在保存时运行。

npm run lint

格式化

此主题使用 Prettier 格式化文件。您需要 配置您的编辑器 以在保存时运行。

npm run format

生成 Starterkit

要使用此主题作为 starterkit 生成新的自定义主题，您可以从项目根目录运行以下命令

cd web
mkdir -p themes/custom
php core/scripts/drupal generate-theme duchess --starterkit "rapidkit_theme" --path themes/custom
cd themes/custom/duchess
find . -type f ! -name "*.png" ! -name "*.svg" ! -name "*.gif" -exec sed -i '' -e 's/rapidkit_theme/duchess/g' {} +
lando drush theme:install duchess
lando drush config-set system.theme default duchess -y
lando drush en -y sdc
lando drush cr