宁皓网 Drupal 8 开发：资源管理

Drupal 8 的自定义主题可以放在项目根目录下的这个 themes 目录的下面 .. 在这里创建一个目录 .. 名字是 ninghao ，它也就是主题的机器名 .. 在这个目录的下面要创建一个文件描述一下这个主题，这样 Drupal 才知道我们自己创建的主题 ..

这个文件的名字是 ninghao.info.yml .. 主题或者自定义模块的描述文件一般就是用 .info.yml 结尾的 .. 文件的格式用的是 yml ..

在这个文件里先添加一个 name 属性，给这个主题起个名字 .. 这外名字会显示给用户看 .. 另起一行再添加一个 description .. 描述一下这个主题 ..

然后设置一下类型，用一个 type 属性 .. 值是 theme ，表示这是一个主题 .. 再用一个 core ，设置一下主题适用的 Drupal 版本 .. 设置成 8.x ..

我想让这个主题基于一个主题，在这里可以设置一下要使用的基础主题 .. 添加一个 base theme .. 用一下 classy ，它是 Drupal 8 核心自带的一个基础主题 ..

主题里面可以定义一些区域，这样我们就可以把一些区块放到这个区域上面显示，定义区域，在这个配置文件里用一个 regions .. 它的下面就是这个主题支持的区域 ..

比如我想添加一个叫 header 的区域，输入 header .. 使用名值对的形式 .. 右边可以是这个区域显示给用户的名字 ..

使用类似的方法，再去添加几个可以使用的区域 .. 保存 .. 重建一下 Drupal 的缓存 ..

回到管理后台 .. 外观 .. 在这里可以看到我们自己定义的这个主题 .. 点击 安装并设置为默认 ..

再回到前台页面 .. 现在你看到的就是刚才我们自己定义的一个主题 ..

主题里面使用的一些资源，比如 css，js 文件，可以在主题的 libraries.yml 文件里面描述一下 .. 先去创建两个资源文件 .. 找到主题的目录 .. 创建一个样式表 .. 把它放在 css 这个目录的下面 .. 文件的名字可以是 style.css ..

在这个样式表里简单的添加点样式 .. 设置一下页面的背景颜色 ..

再创建一个 js 文件 .. 放在 js 这个目录的下面 .. 名字是 script.js .. 然后我们给主题添加一个 libraries.yml .. 放在主题的根目录的下面 .. 文件的名字先用一下主题的机器名 .. 然后再用 libraries.yml 结尾 ..

在这个文件里先定义一个 global-styling 这个库 .. 输入一个 global-styling .. 另起一行 . 添加一个 version 设置一下版本 .. 这里可以大写的 VERSION ..

再用一个 css .. 可以设置一下这个库里面使用的样式表 .. css 可以分分组。 Drupal 的资源管理系统默认有几个样式群组，

这里我们先用一个 theme 组 .. 在它的下面，添加需要的样式表 .. css/style.css .. 它的值用一个空白的对象 .. 在这个对象里面可以包含一些选项，比如这个样式表适用的媒体设备，浏览器，它的位置等等。

我们定义的库里面也可以包含 js 文件 ，先输入一个 js .. 另起一行，再列出需要的 js 文件 .. js/script.js .. 它的值也是一个空白的对象 ..

保存一下 .. 现在我们就定义好了一个资源库，下面再去用一下它 .. 打开主题的描述配置 .. 在这里添加一个 libraries .. 设置一下主题要使用的库 ..

它的值是一个列表 .. 用一个小横线开头 .. 然后是要用的库 .. ninghao/global-styling .. 这样使用定义的资源库，它里面的资源会在所有的页面上载入 ..

保存 .. 重建一下 Drupal 的缓存 ..

回到前台页面 .. 刷新一下 .. 你会看到页面的背景颜色会有变化。因为页面现在用了我们自己定义的样式表里的样式 ..

查看一下页面的源代码 .. 现在 Drupal 用了合并 CSS 与 JS 功能， 我们可以先把这个功能关掉 .. 打开 配置 .. 性能 .. 取消勾选合并 CSS 还有 合并 JS .. 保存一下 ..

再回到前台页面 .. 查看页面源代码，刷新一下 .. 然后搜索一下 style.css .. 你会看到，现在这个页面已经载入了我们自定义主题下面的这个样式表 ..

再搜索一下 script.js .. 同样，页面也载入了自定义的脚本文件 ... 注意默认资源库里的 js 文件都会在页面的底部加载 .. 如果有些 js 文件你想放在页面的 head 部分，可以在定义这个资源库的地方，添加一个 header ，把它的值设置成 ture .. 保存 ..

再重建一下缓存 .. 回到页面 .. 刷新 ..

你会看到，现在这个 js 文件就会在页面的 head 标签里面了 ..

我们在定义资源库的时候，在 CSS 资源里面用了一个 CSS 群组，就是这个 theme .. Drupal 默认定义了几个分组，其实就是给 CSS 分分类。

默认有几个分组，base，layout，component，state，theme .. 你可以根据自己创建的 CSS 的功能 ，把它们放在某个群组里。

这些 CSS 的加载顺序也会按照这个群组的顺序，也就是放在 base 群组里的 css ，会在 theme 这个群组的上面载入。css 文件的载入顺序挺重要的。因为在下面的 css 文件可以覆盖在上面载入的 css 里面的样式 ..

比如在这里，我把这个 theme 改成 base .. 保存 .. 重建一下缓存 .. 注意这个 style.css 的位置 .. 现在是在最下面 .. 因为之前我把它放在了 theme 这个组里面 .. 刷新一下 ..

现在这个 css 文件就会跑到这块 css 列表的最上面 .. 因为 base 组排在所有分组的最上面 .. 所以属于这个分组的 css 也会排在其它 css 文件的上面 ..

这种对 css 分类的方法其实 Druapl 借用了 SMACSS，全称是 Scalable and Modular Architecture for css .. 也就是一种可扩展的模块化的 CSS 架构，它是一种概念或者一种规范，它里面包含了对 CSS 的分类的方法，还有 CSS 的命名规范等等。

对于大型的项目，使用 SMACSS 的规范可能会更好的管理网站应用使用的 CSS 样式。 因为它是一种规范，所以了解这些规范的人很容易理解使用这种规范写的 CSS 。

有兴趣可以搜索一下 SMACSS，去了解它的详细的使用方法。

在我们自己定义的资源库里面，可以设置一下这个库依赖的东西，比如我的这个库需要 jQuery，Backbone，或者 Underscore 提供的功能，你可以把它们放在库的依赖里。这样在使用我们自己定义的资源库的地方，Drupal 可以保证它依赖的这些东西也被载入进来。

在资源库里定义依赖可以这样，先用一个 dependencies .. 再另起一行，下面可以列出依赖的东西 ..每个依赖可以先用一个小横线 .. 然后是依赖的东西的名字 ..

Drupal 核心里面已经包含了一些常用的资源 .. 在 core，assets，vendor 下面可以找到它们 .. Drupal 的核心也定义了一些资源库，你可以在自己的主题或者模块里使用这些资源库 ..

它的位置是在 core 下面，找到 core.libraries.yml .. 这里的东西就是核心定义的资源库 ..

回到我们自己定义的这个资源库 .. 比如我的资源库需要使用一个叫 picturefill 的资源库 ..

在这里，输入一个 core/picturefill ，意思就是我的库需要核心里面的 picturefill 提供的功能 .. 如果需要其它的东西，可以使用类似的形式去列出这些依赖 ..

保存 .. 重建一下 Drupal 的缓存 ..

查看一下使用了我们定义的库的页面 .. 查看一下页面的源代码 .. 搜索一下 picturefill .. 你会看到，这个页面已经载入了核心里面带的这个 picturefill ..

在主题的 info.yml 文件里面，我们可以有机会去禁止或者替换资源库里的资源。比如在这个页面上用了一个 modernizr ，它是核心带的一个资源库 .. 我现在想要禁止它，也就是不让它在页面上加载 ..

打开我们自己的主题的 info.yml 文件 .. 先添加一个libraries-override: 它下面的东西就是覆盖的资源库 .. 输入一个 core/modernizr .. 我想禁用整个资源库，所以可以把它的值设置成 false .. 也就是如果你想禁用整个资源库或者资源库里的某个资源，在这里把它列出来，然后把它的值设置成 false 就行了 ..

这个资源库就是在 core 这个目录的下面 core.libraries.yml 里面定义的 ，它里面定义的就是核心自带的资源库 .. 在这里你会看到这个 modernizr 资源库 ..

保存一下 .. 再重建一下 Drupal 的缓存 ..

回到前台的页面 .. 注意这个 modernizr .. 刷新 .. 搜索一下 .. 现在这个库里面的一个 js 文件就不会被加载了 .. 因为我们在自己主题里面禁用了它 ..

我们可以使用自己提供的资源来替换掉已经加载到页面上的资源。 我自己定义的主题使用了核心自带的 classy 主题作为基础主题，所以页面上会使用这个主题里的一些资源 ..

比如现在我想替换掉这个主题里的 dialog.css ，我想使用自己提供的样式表 .. 回到编辑器 ..

在 core .. themes.. 下面，找到 classy 这个主题 ，打开它的 classy.libraries.yml .. dialog.css 这个资源是在这个主题定义的 dialog 这个资源库里面 ..

复制一下资源库里的 css 这部分内容.. 回到我们自己的主题 info.yml 这个文件 .. 如果你想使用自己主题定义的资源库替换这个资源库，可以这样 .. 输入这个资源库的名字 .. classy/dialog: 它的值就是我们自己的主题定义的资源库 .. 比如 ninghao/dialog .. 这个资源库你可以在自己主题的 libraries.yml 文件里面去定义 ..

现在我想使用自己的一个样式表替换这个资源库里的一个样式表 .. 可以这样 .. 粘贴刚才复制的东西 ..

然后设置一下这个 css/components/dialog.css 的值，它的值就是要替换它的 css 的位置，这个位置就是相对于我们自己的这个主题的一个位置 .. 在这里就输入一个 css/components/dialog.css .. 意思就是使用自己主题下面的 css/components/dialog.css 替换一下 classy 主题里面的 dialog 这个资源库里的这个 css 文件 ..

保存 .. 重建一下缓存 ... 回到前台页面 .. 注意这个 dialog.css 样式表 .. 刷新一下 .. 你会看到，现在这个 dialog.css ，它的位置就变成了我们自己定义的主题下面了 ..

我们可以扩展资源库里的资源，比如在资源库里加上自己设计的样式，这样在使用这个资源库的地方就可以使用我们自己定义的样式了。比如在核心自带的 user 这个模块里面，定义了一个 drupal.user.icons 的资源库。

它里面有一个样式表，现在我想在自己的主题里面扩展一下资源库，比如加上一个自己为 user 模块的 drupal.user.icons. 这个资源库设计的样式 ..

可以先打开自己主题的定义资源库的这个配置文件 .. 添加一个叫 user.icons 的资源库 .. 再用一个 css .. 群组是 theme .. 样式表的位置是在 css/user.icons.admin.css ..

保存一下 .. 回到主题的 info.yml .. 在这里我们可以去扩展定义好的资源库 .. 先用一个 libraries-extend ，表示要扩展资源库 ..

再指定一下要扩展的资源库的名字 .. 这里就是 user/drupal.user.icons .. 它的值可以是一个列表 .. 列表的项目先用一个小横线 .. 然后是资源库的名字 .. 这个 ninghao/user.icons 就是我们自己定义的一个资源库 ..

它的意思就是，在使用了 user 模块里的 drupal.user.icons 这外资源库的地方，加上我们自己的资源库，也就是在 ninghao 这个主题下面定义的 user.icons 这个资源库 .. 这样在页面上就可以使用这个资源库里的资源了 ..

保存 .. 重建一下缓存 .. 打开使用了 user 模块的 drupal.user.icons 这个资源库的页面 .. 查看一下页面的源代码 .. 在这里你会看到页面载入了我们自己的主题里面的这个 user.icons.admin.css 样式表 ..

在我们的主题或者模块里面可以使用一些外部资源，这些资源可能是在 CDN 上，比如我想在主题里面使用一下这个 fontawesome ..
https://www.bootstrapcdn.com/fontawesome
先复制一下这个资源的地址 https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

打开主题的定义资源库用的这个文件 .. 添加一个新的资源库 .. 名字可以是 fontawesome .. 在这个资源库里可以添加一些额外的信息，先用一个 remote ，设置一下这个资源的主页 ..

然后用一个 version ，指定一下这个资源的版本 .. 再添加一个 license ，设置一下资源的版权相关的信息 .. 用一个 name ，设置一下版权的名字 .. MIT .. 再添加一个 qpl-compatible .. 是否兼容 gpl .. 如果是开源的资源，可以设置成 true ..

再添加一个 css ，设置一下这个资源库里面包含的 css 文件 .. 让它属于 theme 这个群组 ... 下面是这个 css 文件的位置 ..

它的值可以用一个对象 .. 因为这是一个外部资源，所以可以设置一下这个资源的选项对象 .. 添加一个 type 属性，它的值设置成 external ，表示这是一个外部的资源 ..

因为这个 css 文件已经被最小化过了，所以可以再加上一个 minified .. 把它的值设置成 true ..

再打开主题的 info.yml 文件，在这里可以配置一下去使用刚才我们定义的 fontawesome 库 .. 也就是这个 ninghao/fontawesome ..

保存 .. 重建一下缓存 .. 回到前台页面 .. 刷新 .. 查看页面源代码 .. 在这里，你会看到，页面已经使用了我们在 fontawesome 资源库里定义的这个外部资源 ..