进阶篇14. 使用预处理函数加载CSS和JS

在第一篇中我们已经提过几种不同的在页面上加载css和js文件的方法。这一节再介绍一种,使用预处理函数来加载它们,即:

THEME_preprocess_HOOK()

其中,THEME是主题的名称,HOOK是模板钩子,模板名的第一组单词。

比如,如果你想在维护页面上加载一个特定的JS文件,维护页面的钩子是”maintenance_page“,预处理函数如下:

function nowicode_preprocess_maintenance_page(&$variables) {
  $variables['#attached']['library'][] = 'nowicode/maintenance';
}

第二行中的nowicode是主题名,maintenance是库的名称。

因此,为了让这个预处理函数生效,还应该在库文件即.libraries.yml中定义一个名为maintenance的库。

用这种方法加载CSS和JS文件的强大之处在于,你可以在.theme文件中写自己的逻辑。

与上面类似,但是使用更多的情况是,你可以用同样的方法,为某个区块(block)添加js,比如某个页面上的某个区块展示的是一个轮播图(旋转木马):

function nowicode_preprocess_block(&$variables) {
  $variables['#attached']['library'][] = 'nowicode/someSlider';
}

这里的 someSlider是在.libraries.yml中定义的名为someSlider的库。

需要指出的是,上面讲述的方法和我们在《基础篇34. CSS和JS的另外两种加载方式》中讲过的在模板中添加库的方法是等效的。Themer通常根据项目的实际需求和自己的习惯(更多的是自己的习惯),选择在模板中,或者在.theme文件中加载库。

本书共102小节:

评论 (写第一个评论)