README

这是一个基于Radix主题Renovation子主题的Webspark 2定制的子子主题。我已经从Renovation导入Sass变量，以便我们更容易进行Sass前端开发。

安装和使用说明

1. 如果您计划通过composer（composer install asuwatts/customrenovation:dev-main）安装此模块，则无法为您的站点进行自定义。
   1. 但是，如果您想将其用作自定义主题的起点，可以通过composer安装它，然后将它从web/themes/composer目录移动到一级（在web/themes/）。
   2. 然后您需要从composer.json和composer.lock文件中删除它：composer remove asuwatts/customrenovation
   3. 之后，您需要确保Sass变量的引用已更新。您可能需要找到并替换"customrenovation/src/sass/customrenovation.style.scss"文件中的../../../webspark-theme-renovation为../../../composer/webspark-theme-renovation（您应该在此处进行任何Sass/css编辑）。
   4. 从这一点开始，请注意，主题将专门为您的站点定制，并且不会从github的原始源接收任何更新。

Browsersync配置

为了使此子主题与Browsersync配合使用以进行本地前端开发，您需要做一些更改。

1. 您需要通过创建一个"web/sites/default/settings.local.php"文件来设置Drupal 9以进行本地开发。
   1. 最简单的方法是打开"web/sites/example.settings.local.php"文件并遵循说明。这将禁用Drupal中的一些缓存，这样您就不必在本地环境中每次更改时重建缓存。
2. 在为您的站点设置本地开发环境后，打开"customrenovation/webpack.mix.js"文件，并在const proxy = '<sitename>.ddev.site';所在的行中输入您的站点名称（不带<>>符号）。然后保存文件。请注意，没有http://或https://协议。包含协议将阻止Browsersync正常工作。
3. 如果您想使用browsersync，您可能需要打开端口3000。为此，您需要在站点根目录的.ddev目录中创建一个新文件。该新文件应命名为"docker-compose.webpack.yaml"。此文件的正文应如下所示

version: "3.6"
services:
   web:
      expose:
         - 3000
      environment:
         - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
         - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

1. 将以下内容添加到web/sites/default/settings.local.php中，以便其正常工作

$settings['reverse_proxy'] = TRUE;
$settings['reverse_proxy_addresses'] = ['127.0.0.1', 'REMOTE_ADDR'];

1. 您需要重新启动ddev才能使这些更改生效：ddev restart。
2. 在ddev成功重新启动后，运行ddev ssh
3. 在终端中导航到"web/themes/customrenovation"子主题文件夹。
4. 在子主题文件夹中运行npm install。
5. 在npm安装完成后，从子主题文件夹运行npm run watch。
6. 要使用browsersync，不要使用提供的https://:3000选项。相反，导航到https://<sitename>.ddev.site:3000。（再次，用您的站点的短名称替换<sitename>）。
7. 您可以通过更改"customrenovation/src/sass/customrenovation.style.scss"文件来测试browsersync和Sass变量是否正常工作。一个简单的测试是将链接的颜色从栗色改为蓝色。

a {
  color: $blue;
}

一旦您保存了文件，一秒或两秒后，浏览器中栗色链接的颜色应该变为蓝色。如果发生这种情况，您已成功设置了一切。恭喜！