html - 尝试在 drupal 8 模块中包含 Assets (js、img、css)

Question

我有一个名为 chess 的 drupal 模块，其中要显示不同的图像、要包含的 javascript 和要链接的 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

并在 chess/templates/index.html.twig 中包含一行 {{ attach_library('chess/chess') }}。这些图像存在于 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 和页面底部的错误消息:

The website encountered an unexpected error. Please try again later.

InvalidArgumentException: $string ("7864") must be a string. in Drupal\Core\StringTranslation\TranslatableMarkup->__construct() (line 133 of core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php).

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

更新:我将 Controller 的 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 出现了，但是图像还没有出现。源代码仍然显示 Assets 功能，而不是填充的脚本标签。

更新 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:我从 page.html.twig 中删除了所有 src="{{ asset(...) }}" 标签，javascript 和 css 似乎都可以工作。剩下的唯一事情就是如何让页面在 drupal 页面的框架内(而不是在它上面)工作，以及如何包含图像。

Answer 1

我觉得你应该把它改成just

{{ attach_library('国际象棋/国际象棋') }}

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