库:CSS 和 JS

admin 提交于 周三, 06/07/2023 - 15:21

库:CSS 和 JS

在前面的章节中,都没有涉及 CSS/JS 代码,本节我们介绍如何把 CSS/JS 代码添加到 Drupal 页面。

库(Library) 在 Drupal 中指的是用于组织 CSS 和 JS 代码的一种基本单元。比如常用的前端开发框架 Bootstrap, 它主要由一个 CSS 文件和一个 JS 文件组成:

├── css
│   ├── bootstrap.css
│   ├── bootstrap.min.css
└── js
    ├── bootstrap.js
    └── bootstrap.min.js

这两个文件便可以组织成一个 库(Library),下面我们以它为例,介绍如何在 Drupal 中创建并使用 库(Library)

BootStrap 示例

定义库

新建一个名为 example0405 的模块,把 Bootstrap 的主要文件放入模块中任意位置,比如 ./assets 目录。

├── assets
│   └── bootstrap-4.4.1-dist
│       ├── css
│       │   ├── bootstrap.css
│       │   └── bootstrap.min.css
│       └── js
│           ├── bootstrap.js
│           └── bootstrap.min.js
├── example0405.info.yml
└── ...

在模块根目添加库配置文件 example0405.library.yml