evpp/evpp_utdk3_theme

与 UT Drupal Kit 一起使用的 Drupal 主题

安装: 270

依赖: 1

建议: 0

安全: 0

星星: 0

关注者: 2

分支: 0

语言:CSS

类型:drupal-custom-theme

1.1.3 2021-12-02 18:58 UTC

This package is auto-updated.

Last update: 2024-08-29 05:50:26 UTC


README

这是由执行副总裁和教务长办公室维护的 Drupal 主题,用于与 UT Drupal Kit 一起使用。它基于 Bootstrap 库 v4。

内容

开发

设置

开发者首先需要在他们的本地开发机器上安装 NodeJS 和 NPM

提示

现在推荐使用 Node 版本管理器 (NVM) 来安装 Node。这不是必需的,但是您可以继续使用全局安装的 Node。

您的四十英亩子主题将包含一个 package.json 文件,它定义了主题开发所需的包依赖项。此外,gulpfile.js 文件定义了用于代码检查和编译 CSS 的任务。从您的子主题的根目录运行

npm install

这将生成一个 node_modules/ 目录,包含依赖项。此目录不应该作为您的代码库的一部分进行版本控制;如果您使用 Git 进行版本控制,应将其添加到 .gitignore 文件中,以便不会将其提交到您的存储库。

编写和编译 SCSS

为 Drupal 主题渲染的 CSS 定义在主题的 .libraries.yml 文件中(请参阅 将样式表(CSS)和 JavaScript(JS)添加到 Drupal 主题)。但是,当使用 SCSS 工作流程时,不应直接修改引用的 CSS 文件:您的主题中的 /css 目录代表您使用的任何 SCSS 文件的编译版本。

相反,您应该编辑 SCSS。在 /src/scss 目录中有一些样板 SCSS 文件,可以用来开始。

要为您的主题构建 CSS,运行

npm run gulp

每次将代码更改保存到您的 SCSS 中,Gulp 将重新编译 /src/scss 中所有 SCSS 文件,并将它们转换为 /css 中的 CSS 相当物,并自动添加前缀以支持跨浏览器。

此外,此 Gulp 任务将“检查”您的 SCSS,强制执行语法标准以使您的代码更一致、更易于阅读。语法规则违规将在构建过程中直接打印到您的终端窗口。

提示

命令 npm run gulp(与简单的 gulp 相比)使用本地安装的 Gulp 版本运行,位于 node_modules/gulp/bin/gulp.js,确保使用预期的任务运行器版本。