通过 
搜索
搜索asuwebplatforms / webspark-theme-renovation
Webspark 2 主题：实现 Web 标准 2.0
1.0.47
2023-03-30 22:35 UTC
- dev-main
- 1.0.47
- 1.0.46
- 1.0.45
- 1.0.44
- 1.0.43
- 1.0.42
- 1.0.41
- 1.0.40
- 1.0.39
- 1.0.38
- 1.0.37
- 1.0.36
- 1.0.35
- 1.0.34
- 1.0.33
- 1.0.32
- 1.0.31
- 1.0.30
- 1.0.29
- 1.0.28
- 1.0.27
- 1.0.26
- 1.0.25
- 1.0.24
- 1.0.23
- 1.0.22
- 1.0.21
- 1.0.20
- 1.0.19
- 1.0.18
- 1.0.17
- 1.0.16
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- dev-ws2-1515
- dev-ws2-1560-use-yarn
- dev-ws2-1536
This package is auto-updated.
Last update: 2024-10-01 00:14:22 UTC
README
Webspark 2 主题：实现 Web 标准 2.0
内容
一般信息
此主题包含在 ASU 的 Drupal 9+ 自定义配置文件 Webspark 2 中。当启动新站点时，如果您选择 ASU Webspark 安装配置文件，此主题将自动安装并作为默认主题选择。
翻新主题是 Radix 主题的子主题。为了使翻新主题正常工作，需要保持 Radix 主题的启用状态。您可以通过创建翻新主题的子主题进一步自定义您的网站，但请务必谨慎行事。子主题网站将不会由大学技术办公室官方支持，因为难以调试可能出现的任何问题。因此，请确保您有足够的开发资源来创建和维护您的子主题。
翻新主题利用 Sass 创建和维护站点样式。这使我们能够使用变量、混合和其他工具来提高主题开发体验的效率和愉悦性。翻新的 Sass 代码依赖于 Webpack 将其编译成标准 CSS 和 JavaScript。
翻新主题是平台无关的 Unity 设计系统（UDS）定制化的 bootstrap4-theme 的扩展和演变。Unity bootstrap4-theme 已在翻新中略微修改以适应 Twig 模板引擎，并包含其他 Drupal 特定修改，同时保持对 UDS 中建立的标准的忠诚。
开发者信息
由于此主题在某种程度上与 UDS 的源内容不同，以下提供了关于翻新主题维护者如何解决这些差异的说明，尤其是在为 Webspark 2 发布做准备时。
设置本地开发环境
- 从 Github 将存储库克隆到您的本地开发环境（https://github.com/ASUWebPlatforms/webspark-theme-renovation）。如果您无法访问存储库，请联系 Web 平台开发团队以获得帮助。
- 使用
git checkout -b branchname创建本地新分支（理想情况下以 Jira 工单名称命名，例如 WS2-NNN）。 - 将您的新分支推送到 Github 存储库，并设置远程跟踪：
git push -u origin branchname
Unity 与翻新主题的协调
- 确定自上次 Webspark2 发布以来哪些文件已更改。
- 使用 UDS 中的 check-element-changes 工具确定哪些文件需要关注。此工具将提醒您自您指定的日期以来哪些 bootstrap4-theme 设计组件的代码已更改。它还指导您运行 git 命令以查看自选定日期以来所有已更改的文件。
- 将Unity中使用的
bootstrap4-theme包的版本更新到您希望在本版本中使用的版本。请参阅bootstrap4-theme包注册表。请使用Yarn进行包管理以确保一致性。例如：yarn upgrade @asu/bootstrap4-theme@1.10.3这一步将更新您的node_modules文件夹中的bootstrap4-theme包。注意：我们提交了bootstrap4-theme包的文件夹，以确保我们有主题所需的全部资源，并且确保我们没有将重复的资源复制到主题中。请将包的文件保留在原处，并在需要时引用它们。 - 该包将提供您需要的scss文件和其他资源，但不包括模板故事文件。要更新模板，请根据第1步中的发现，参考包版本号，这将对应于GitHub标签。使用该标签浏览GitHub中的模板。一种简单的方法是浏览发布版并点击包发布版本的标签链接。
- 作为Unity中的故事存在的模板将在如下路径找到：
asu-unity-stack/packages/bootstrap4-theme/stories/**/*.templates.stories.js，它们在Webspark 2 Twig模板中的对应物可以找到在：webspark-theme-renovation/src/components/**/*.twig您可以将*.templates.stories.js文件中的故事与Renovation组件的*.twig文件进行大致关联。注意*.templates.stories.js文件中的任何更改，并相应地调整Renovation的*.twig文件。 - 可能还有JS文件已经更新，将这些更新引入WS2的过程可能会有所不同，但JS文件通常与Twig模板在同一个文件夹中。UDS中的非故事
*.js文件有时与Renovation中的*.js文件匹配，但有时为了适应Drupal的工作方式，已经进行了更改。这些差异中最常见的是与Drupal行为相关。有关更多信息，请参阅JavaScript API文档。由于存在差异的可能性，请不要简单地从UDS复制/粘贴此文件到Renovation。相反，在两个存储库中打开文件，比较UDS中的内容与Renovation中的内容。如果有更改，请手动将这些更改添加到Renovation文件中。UDS中的代码可能需要包裹在Drupal行为中以使其工作。 - 要更新和编译来自
bootstrap4-theme的Sass/CSS以及我们在主题中的Renovation自定义，Renovation中实现了几个文件，用于聚合和导入许多scss文件。具体说明如下：- Renovation主题的
src/sass/bootstrap-asu-extends.scss：您会注意到这个文件在Renovation中与包自己的node_modules/@asu/bootstrap4-theme/src/scss/bootstrap-asu-extends.scss中的内容显著不同。这是因为由于bootstrap4-theme设计组件在Drupal中的添加方式与Unity中的不同，因此样式路径不可避免地有所不同。请注意，一些导入中引用了我们主题的模板的../components/路径，而其他则引用了node_modules中的包的extends/文件夹。强烈建议不要直接从bootstrap4-package扩展文件复制/粘贴更新到Renovation版本，而应逐行检查以确保所有样式都正确导入和更新。 - Renovation主题的
src/sass/bootstrap-asu.scss：同样，此文件将许多样式从bootstrap4-theme包导入到Renovation主题中。请注意，在Renovation中与UDS不同，$image-assets-path。 - 装修主题的
src/sass/bootstrap-asu-upgrade.scss：此文件解决了UDS和装修当前处于不同版本的Bootstrap的事实。它填补了差距，使两者在装修中保持一致。
- Renovation主题的
请注意：在更新bootstrap4-theme设计组件或Sass文件时，最佳实践是在所有pull请求合并且准备最终发布之前，不要推送编译好的Sass和JS资产。这有助于避免回归和冲突。
如何编译 Sass 文件以发布
- 转到装修主题的根目录，并运行以下命令：
yarn install。 - 创建一个
config.js的副本，并将其重命名为config.local.js。更新proxy键，以包含您本地开发服务器的URL。 - 运行以下命令以编译Sass并监视更改：
yarn watch。 - 按照“与装修协调Unity”中描述的进行更改。
- 完成更改后，通过运行
yarn production编译生产环境的资产。重要！在此点不要将编译好的资产（位于assets/css和assets/js）添加到您的git提交中。 - 使用
git add path/file添加所有其他更改的文件。 - 在git中提交更改并推送到远程仓库。
- 针对
main分支创建一个pull请求。 - 验证所有待处理的发布pull请求都已合并。
- 使用
git pull origin main从主分支将所有最新更改拉入您的分支。 - 如有必要，修复任何冲突并提交您的更改。
- 发布准备就绪时，最后一步是在最后提交之前编译生产环境的CSS。再次运行
yarn production。这次，请确保使用git add添加assets目录中的更改文件，然后提交更改。如果您在编译scss时遇到以下错误（来自./node_modules/postcss-loader/src/index.js）：JisonLexerError：在行1上的词法错误：未识别的文本./ [...] 然后引用一些scss变量...，请在node_modules代码中查找有问题的变量。这些变量可能被用于calc()函数中。为了解决装修编译脚本的编译问题，将变量用#{}括起来。例如，max-height: calc($uds-card-height - $uds-size-spacing-8);应变为max-height: calc(#{$uds-card-height} - #{$uds-size-spacing-8});（注意：这可以通过对UDS的更改来解决，但因为我们正在撰写本文时开始更新到Bootstrap 5，这些可能会改变，如果更新后仍然存在问题，可以再次检查这个问题。） - 将提交推送到远程仓库。
- 当您的pull请求被批准时，将其合并到主分支。
- 为发布创建一个新的标签（使用语义版本控制原则），并更新
webspark-release-testing/upstream-configuration/中的composer.json文件，将此标签更新为"asuwebplatforms/webspark-theme-renovation"。 - 在composer.json文件的底部递增版本号。
- 就是这样！提交发布以进行测试，并且开心地跳舞（直到收到错误报告）。
注意事项
- 核心布局构建器中的一些类需要更改。因为这些核心类会覆盖我们在这里写的所有内容，所以我们必须在.info文件中禁用它们，并在/css文件夹中重新创建它们。
- 此主题中使用的库的版本是
固定的。您可以在package.json中找到版本号。 - 通过利用webpack提供的
watch功能（如在“如何编译Sass文件以发布”的第2步中提到），可以简化主题的工作。有关使用webpack开发Radix主题的更多信息，请查看这个优秀的教程。