如何将CSS和JavaScript添加到<head>？

我想使用Bartik的Drupal 8子主题在首页的以下部分中添加以下代码。

有人可以帮忙吗？在这个新的树枝版本主题中，最佳方法是什么？page.tpl在哪里？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>

8 javascript

— 马努·亚当
source

Answers:

在您身上THEME.libraries.yml：

global-styling:
  version: VERSION
  header: true // <--- To the header!!!
  css:
    theme:
      css/mystyle.css: {} // if you want add custom css
  js:
    js/stepcarousel.js: {}
  dependencies:
    - core/drupal // for use drupal.js
    - core/jquery

在您身上THEME.info.yml：

name: THEME
base theme: Bartik
...
libraries:
  - THEME/global-styling
...

和清除缓存

page.tpl在哪里？

此处：core / modules / system / templates / page.html.twig

如果要使用它，请复制到模板内的主题文件夹，如下所示：

 THEME
   templates
     page.html.twig

更改所有所需内容并清除缓存

— 木瓜
source

在Drupal 8中，样式表和JavaScript文件作为库附加：

您将yourtheme.libraries.info添加到主题（或自定义模块）文件夹中：

power-slider:
  version: 1.x
  js:
    js/power-slider.js: {}
  css:
    theme:
      css/power-slider.css: {}
  dependencies:
    - core/jquery

然后将库附加到渲染数组。例如，这会将库附加到所有页面：

function yourtheme_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'yourtheme/power-slider';
}

这种方法具有可重复使用的优点。您只需定义一次必要的路径，就可以在代码中的不同位置重复使用它们。

看到：

将样式表（CSS）和JavaScript（JS）添加到Drupal 8主题

这个答案很大程度上是受柏林人的答案启发的。

— 巴替利克斯
source

链接已断开

— Yzmir Ramirez

更新了链接。

— Neograph734

在Drupal 8中，诸如CSS和JavaScript文件之类的客户端资源被附加到渲染数组：

$element['#attached'] = array('js' => array(PATH_TO_JS));

其中$element可以是输出渲染数组或表单元素。

另外，您可以通过在* .libraries.info文件中定义库来注册库

power-slider:
  version: 1.x
  js:
    js/power-slider.js: {}
  dependencies:
    - core/jquery

然后将库附加到渲染数组，如下所示：

$element['#attached']['library'][] = 'NAMEOFTHEMODULE/power-slider';

后一种方法具有可重复使用的优点。您只需定义必要的路径，就可以在代码的不同位置重复使用它们。

— 柏林人
source

编写完之后，此hook_library_info（）被* .libraries.yml文件替换。参见drupal.stackexchange.com/a/109029/12010和drupal.org/node/2216195

— batigolix 2014年

我不认为这真的过时了。它需要一些编辑，仅此而已。尝试一下

— batigolix 2014年

我更新了答案

— batigolix 2014年

@batigolix，不错的编辑。但是，它可能会更好，你发布更新的答案你的答案，而不是改变柏林的代码（代码编辑往往会被拒绝，因为太冒昧）。

— 2014年

好的，我将更新的版本添加为新答案。您是对的：我不得不做出比最初认为必要的更改更多的更改。

— batigolix 2014年