ubc-web-services/kraken

本包的最新版本（2.0.2）没有可用的许可证信息。

Drupal 10 UBC CLF 主题

维护者

详情

github.com/ubc-web-services/kraken

源代码

问题

安装: 5

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 3

分支: 0

开放问题: 0

语言:JavaScript

类型:drupal-theme

2.0.2 2024-09-23 16:48 UTC

Unknown License 92e607a99d24fd48dd0cbc30579c06909cd97bae

  • O'Toole, James <james.otoole.woop@ubc.ca>

This package is auto-updated.

Last update: 2024-09-23 16:49:03 UTC

README

这是一个使用 Tailwind 和 Bootstrap / Vue.js 开发的响应式 UBC CLF (通用外观感觉) 主题，适用于 Drupal。由 UBC IT 网络服务部门创建。

Kraken 是一个适用于 Drupal 10+ 的主题，为 UBC 标识的单元提供 UBC CLF (通用外观感觉) 的基本结构。

推荐用法。

使用以下命令将主题包含到您的项目中：composer require ubc-web-services/kraken

然后，将主题作为起始工具包使用来创建自己的： cd web php core/scripts/drupal generate-theme [themename] --name "[themename]" --starterkit kraken --path themes/custom

然后根据需要修改生成的主题，kraken 保持不变。

使用主题

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

要求

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

安装

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

npm install

这将安装所有用于与 CSS 和 Javascript 一起工作的必需项

运行命令

在 /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 命令发现的错误。

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 类集。请注意，尾wind未提供的类永远不会被清除。

此外，使用 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插件 Vue开发者工具 可以帮助进行调试。

Kraken主题设置

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

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

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

  • 启用暗黑模式