试图在Drupal 8模块中包含资产(js,img,css)

时间:2018-07-16 22:11:32

标签: html css drupal drupal-8

我有一个称为国际象棋的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

,并在{{ 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()(行   133 of core / lib / Drupal / Core / StringTranslation / TranslatableMarkup.php)。

据我所知,甚至没有启用任何翻译模块。有人知道我想念什么吗?

更新: 我将控制器的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: 我通过作曲家安装了symfony / asset,现在我的树枝文件如下所示:

<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页面的框架内工作(而不是在其上方),以及如何包含图像。

1 个答案:

答案 0 :(得分:0)

我认为您应该将其更改为公正

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

不是CSS文件的绝对路径。