用户登录

主题里面使用的一些资源,比如 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 与 JS《 Drupal 8 开发:资源管理 》

统计

13356
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点