Drupal中CSS与JavaScript文件加载方式

张志军 11个月前 (06-20) 511次浏览 0个评论

Drupal中,模块和主题中的CSS文件和JavaScript加载方式与其他库文件加载方式一致。只有显示告诉drupal加载的CSS文件和JavaScript文件,drupal才会加载,而不会加载所有的资源文件,导致前台性能降低。加载CSS和JS文件的方法1、定义library在theme文件......

Drupal中,模块和主题中的CSS文件和JavaScript加载方式与其他库文件加载方式一致。只有显示告诉drupal加载的CSS文件和JavaScript文件,drupal才会加载,而不会加载所有的资源文件,导致前台性能降低。

加载CSS和JS文件的方法

1、定义library

在theme文件夹下创建*.libraries.yml文件,其中*为主题名称,例如beginner.library.yml。

# beginner.libraries.yml
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

在这个例子中,JavaScript: cuddly-slider.js和CSS cuddly-slider.css 分别位于主题的各自文件夹中。

2、库文件中增加jQuery

Drupal不会在所有页面中加载jQuery,因此如果cuddly-slider依赖jQuery,你必须声明一个dependence,在core 库中包含jQuery。如果其他的库依赖cuddly-slider,声明方式如下:

Beginner/cuddly-slider  #主题名/library名称

注意:不能声明独立的文件作为dependency,必须是一个library。
因此,要使jQuery可用,就必须更新beginner.library.yml如下样式:

# beginner.libraries.yml
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
- core/jquery

3、声明dependency

声明dependency时,依赖的library在resource/library中声明。针对core library,resource就是core,除core library之外的就是模块名和主题名。因此,如果new_library依赖core中的jQuery,两个my_library文件,一个my_library在my_theme中声明,另外一个my_library在my_module中声明,那么dependency的声明应该按照如下方式声明:

# beginner.libraries.yml
new_library:
  js:
    js/new_library.js: {}
  dependencies:
    - core/jquery
    - my_module/my_library
- my_theme/my_library

模块的名称和主厅名称提供了一个命名空间为同名的library。

4、将library链接到所有页面

大部分主题会使用一个全局的样式文件,因此全局的css文件需要在激活的主题下的所有文件中加载。Js文件也是类似的。定义方式如下:

# beginner.libraries.yml
global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
global-scripts:
  version: 1.x
  js: 
    js/navmenu.js: {}   

为了能使全局的样式文件和js文件在主题中生效,全局样式文件和全局js文件需要在主题的info.yml文件中体现。注意不要和模块的info.yml文件混淆。

#beginner.info.yml
name: Beginner
type: theme
description: 'A drupal theme.'
core: 10.x
libraries:
  - beginner/global-styling
  - beginner/global-scripts
base theme: stable9
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

使用方法

1、模块中使用库文件

如果在模块中使用library,可以通过ook_preprocess_HOOK()或者hook_page_attachments()调用。例如:


function fluffiness_page_attachments(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/global-styling';
}

或者


function fluffiness_preprocess_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/global-styling';
}

2、在twig模板中引入库文件

在twig模板中使用库文件,可以通过 attach_library() 函数在任一*.html.twig文件中,例如:


{{ attach_library('fluffiness/cuddly-slider') }}
Some fluffy markup {{ message }}

3、在页面子集中使用库文件

在某些情况下,不需要在所有页面中引入库文件,仅需要在一些页面子集中使用。那么可以通过.theme文件中的THEME_preprocess_HOOK()函数实现, 其中THEME为主题名,HOOK为主题hook。例如,如果只在维护页面加载库文件,HOOK就是maintenance_page,调用函数如下:

function beginner_preprocess_page(&$variables) {
  $variables['page']['#cache']['contexts'][] = 'route';
  $route = "entity.node.preview";
  if (\Drupal::routeMatch()->getRouteName() === $route) {
    $variables['#attached']['library'][] = 'beginner/node-preview';
  }
}
0 0 投票数
文章评分

版权申明:

本博客所有文章除特别声明外均采用BY-NC-SA 4.0许可协议。依据BY-NC-SA 4.0许可协议,转载请附上原文出处链接及本声明。

原文链接:https://ilearning.org.cn/program/web/drupal-zhong-css-yu-javascript-wenjian-jiazai-fangshi.html

客官,说点什么吧!

订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论
关于本站
立学网是一个分享个人学习总结的知识网站,内容覆盖编程技术讨论,金融经济,历史哲学,读书笔记,生活随笔等内容。
关注我们
关注微信公众号 关注微博