时间戳

首页 > 解决方案 > 尝试在 drupal 8 模块中包含资产（js、img、css）

html - 尝试在 drupal 8 模块中包含资产（js、img、css）

问题描述

我有一个名为 chess 的 drupal 模块，其中要显示不同的图像、要包含的 javascripts 和要链接的 css。

我尝试定义一个chess/chess.libraries.yml看起来像这样的：

chess:
  version: 1.x
  css:
    theme:
      css/chess.css: {}
  js:
    js/jquery-ui.min.js: {}
    js/jquery.ui-touch-punch.min.js: {}
    js/jquery.simulate.js: {}
    js/chess.js: {}
    js/socket.io.js: {}
    js/chess-socket.js: {}
    js/chat.js: {}
  dependencies:
    - core/jquery

并{{ attach_library('chess/chess') }}在chess/templates/index.html.twig. 图像生活在chess/images. 此外，我的 ChessController 的渲染数组如下所示：

public function page(){
  $content = readfile('modules/chess/templates/index.html.twig');
  $element = array (
    '#type' => 'markup',
    '#markup' => $this->t($content),
    '#attached' => array(
    'library' => 'chess/chess'
    ),
  );

  return $element;
}

所以它附带了国际象棋库。唯一出现的是带有损坏图像的html，没有css，并且页面底部有一条错误消息：

网站遇到意外错误。请稍后再试。

InvalidArgumentException: $string ("7864") 必须是字符串。在 Drupal\Core\StringTranslation\TranslatableMarkup->__construct() （core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php 的第 133 行）。

据我所知，甚至没有启用任何翻译模块。有人知道我错过了什么吗？

更新： 我将page()控制器的功能更改为读取

public function page(){
  $content = readfile('modules/chess/templates/page.html.twig');
  $element = array (
    '#type' => 'markup',
    '#template' => $content,
    '#attached' => array(
      'library' => 'chess/chess'
    ),
  );

  return $element;
}

并且 css 出现了，但图像还没有。源代码仍然显示资产功能，而不是填充的脚本标签。

更新 2： 我通过 composer 安装了 symfony/asset，我的 twig 文件现在看起来像这样：

<link href="{{ asset('css/chess.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/jquery-1.12.min.js') }}"></script>
...
<div class="piece black queen" id="black-queen"><img src="{{ asset('images/queen-black.png') }}" /></div>

css 显示出来，但内容显示在 drupal 页面的其余部分上方。有没有办法将页面放在 drupal 布局中的适当位置？（另外，图像没有显示）。

更新 3： 我src="{{ asset(...) }}"从 page.html.twig 中删除了所有标签，并且 javascript 似乎可以正常工作，css 也是如此。剩下的唯一事情是如何让页面在 drupal 页面的框架内工作（而不是在它之上），以及如何包含图像。

标签： htmlcssdrupaldrupal-8

解决方案

我认为您应该将其更改为

{{ attach_library('chess/chess') }}

而不是 CSS 文件的绝对路径。

推荐阅读