README

这是一个为 Drupal 10 定制的响应式 UBC CLF（通用外观和感觉）主题，使用 Tailwind 和 Bootstrap 5 构建。由 UBC IT 网络服务部门创建。

Kraken 是一个为 Drupal 10+ 定制的主题，为 UBC 标记的单元提供 UBC CLF（通用外观和感觉）的基本结构。

IE 支持

此主题不 支持 Internet Explorer。如果需要支持旧浏览器，必须单独添加或使用galactus，这是 CLF 的早期版本。

理由

为什么还需要另一个主题？为什么不扩展 Galactus Drupal 10 主题呢？

作为一名网络开发者，您应该能够期待在任何项目中以一致的方式添加 CSS 和 Javascript。Galactus 主题按原样工作，但它是为更广泛的 UBC 社区的一般用途而设计的。Kraken 的目标是添加与我们在应用程序层所做的方式相同的适当依赖项管理和工作流程。它是故意偏向的，并使用特定的 CSS 和 Javascript 框架（Tailwindcss 和 Vuejs）。这两个都得到了很好的支持，并且足够灵活，可以在任何网络项目（CLF 或不）上工作，并提供一组一致的功能和功能。好处是提高了可重用性、提高了学习速度和提高了外观。不应该有任何只有单个开发者才能理解的隐藏功能。

使用主题

要更改主题 CSS 和 Javascript，您需要使用命令行工具。

要求

确保您已安装 node.js，版本 18 或更高。要确认您的版本，请在命令行中导航到 Kraken 主题目录并输入 node -v。

安装

从主题根目录安装主题依赖项

npm install

这将安装所有用于处理 CSS 和 Javascript 所需的内容

• 基于 Tailwindcss 的实用工具 CSS 库
• Bootstrap 5 库（仅限 JavaScript 部分）
• Vuejs JavaScript 框架（可选）
• 如 Webpack、Babel、Postcss 和 Autoprefixer 等软件包，它们自动化构建和准备网络资源。

运行命令

在 /package.json 中定义了四个主要的 node.js 命令。

最常用的两个命令

• npm run dev

  • 在/src/css目录中编译CSS（不包括子目录），并将压缩后的文件保存到/css。设置在/postcss.config.js
  • 在/src/css目录中编译JavaScript（不包括子目录），并将未压缩的文件保存到/js。设置在/webpack.common.js和/webpack.dev.js

• 运行npm run prod

  • 在src > css目录中编译CSS（不包括子目录），并将压缩后的文件保存到/css。设置在/postcss.config.js
  • 在/src/css目录中编译JavaScript（不包括子目录），并将压缩后的文件保存到/js，文件扩展名为.min.js。设置在/webpack.common.js和/webpack.prod.js
  • 以GZip和Brotli格式压缩.js和.css文件。设置在/compress.js
  • 保存外部源映射（.map文件）以方便调试。设置在/webpack.prod.js

还有额外的命令用于CSS属性排序

• 运行npm run css-lint

  • 检查/src/css目录中的CSS属性声明顺序和最佳实践。

• 运行npm run css-fix

  • 尝试自动修复使用npm run css-lint命令找到的错误。

还有命令可以单独构建CSS或JS资源（包括开发和生产版本）

• 运行npm run css

• 运行npm run js

Tailwindcss

该主题广泛使用了Tailwind提供的工具类。

所有Tailwind工具类的配置都设置在/tailwind.config.js。配置使用UBC默认颜色、字体、常规间距等。更多关于此文件的详细信息，请参阅Tailwind文档。

与文档有显著差异的两个重要地方

• 分隔符：默认情况下，Tailwind使用冒号来分隔媒体查询和状态前缀，而配置将前缀分隔符定义为双横线。例如，md:text-white hover:text-black变为md--text-white hover--text-black
• 颜色调色板：配置排除了Tailwind的默认颜色，并用UBC颜色和少量用户定义颜色替换。

当运行生产构建脚本（npm run prod）时，使用PurgeCSS扫描所有Twig、Vue和JavaScript文件，并删除任何未使用的Tailwind工具类。这使我们能够提供更小的CSS类集。请注意，从未由Tailwind提供的类永远不会被清理。

此外，使用Autoprefixer自动添加了对支持浏览器的所有供应商前缀，因此无需添加这些前缀（例如-webkit）。

我强烈推荐安装Tailwind VS Code 扩展。它提供了对在 tailwind.config.js 文件中定义的 Tailwind 工具类的代码补全功能。另一个有用的工具是Headwind VS Code 扩展，它可以根据意见排序您的标记中的类。

Vue.js

这个主题使用的许多 JavaScript 都由 Vue.js 库提供支持。也有一些例外，其中使用了原生 JavaScript（例如，/src/js/kraken.dismiss.js、/src/js/kraken.misc.js、/src/js/kraken.scroll.js）。已尽一切努力移除 jQuery 作为依赖项。

为了便于集成，有一个名为 - #main-content 的单例 Vue 实例。Vue 可以与这个包装器内部的任何模板中的任何标记一起工作。

当运行构建脚本时，包依赖项（包括 Vue.js 库）将与自定义 Vue 代码分开，生成 /js/vue[.min].js 和 /js/vendors~vue[.min].js。设置在 /webpack.common.js。

主要文件位于 /src/js/vue.js，它导入所有依赖项、组件并定义主 Vue 实例。自定义单文件组件存储在 /src/js/components/ 目录中。

为了便于使用 Vue，有一个优秀的 Chrome 开发者工具扩展，可协助进行调试。

Kraken 主题设置

一旦安装并设置为默认值，您可以调整以下主题设置

• 在 v.7 和 v.8 的 CLF 之间切换（注意，CLF 的 v.7 不是来自 CDN，并包含 CLF 的子集）。
• 调整在开发和生产版本中加载的 CSS 和 JavaScript。
• 设置主题颜色选项，并使用 --color-primary、--color-secondary、--color-tertiary 和 --color-accent CSS 变量来使用相同的颜色。这些也映射到 Tailwind 类。
• 更改基本字体大小和行高以调整整体相对尺寸和垂直间距。
• 在登录页面添加 CWL 登录选项。
• 可选地从 Google Fonts 服务加载 CLF 字体。
• 添加针对 Google 和 Bing 搜索服务的验证头标签。
• 选择性地加载可以通过 svg use 标签添加到网站的一组 svg 图标。

计划中的设置（功能尚未完成）

• 启用暗黑模式
• 在向上滚动时，使主水平导航 'sticky'。