web-dev-qa-db-ja.com

（外部）JavaScriptをテーマに追加する

私はDrupal 8テーマに外部JavaScriptを追加しようとしています。ここで何が間違っているのか誰かに教えてもらえますか？この関数はMYTHEME.themeファイルにあります：

      function MYTHEME_preprocess_page(&$variables) {
      $vars['ext_js'] = array(
        '#attached' => array(
          'data' => 'http://cdn.somelibrary.com/library/2.3.1/js/jslibrary.min.js', 
          'options' => array(
            'preprocess' => TRUE,
            'every_page' => TRUE, 
            'group' => 'NONE',
            ),
        ),
      );
}

次に、テーマでそれをレンダリングしています：

{{ ext_js }}
themingjavascript8
2
Compustretch

options配列インデックスに'type' => 'external'を追加してみてください。
デフォルトでは、タイプは、Drupalサイトでホストされているファイルへの参照と見なされます。'type' => 'external'を使用することにより、dataは、別のホストでホストされているファイルへの参照です。

3
David Thomas

私が見つける最も簡単な方法は、テーマ.libraries.ymlで次のようにすることです。

name_of_library:
  js:
    base:
      'https://path.com/to/js.js': { external: true }

次に、.infoまたは.themeファイルを使用して呼び出します。

2
Chris Happy

これはありませんDrupal 7、いくつか変更されています。私のローカルでテストされた外部ライブラリを追加する最も簡単な方法は次のとおりです：

mYTHEME.libraries.ymlを見つけます

ここでは、新しいライブラリを宣言しています。自分の値を変更してください。

次の行をファイルに追加します。

bootstrap:
  version: 1.0
  header: true
    js:
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js: {}

間隔は本当に重要です。

次に、あなたからライブラリを呼び出すだけですtwigテンプレートファイル：例：

{{ attach_library('MYTHEME/bootstrap') }}

キャッシュすることを忘れないでください：再構築

1
Israel Morales

スタイルシート（CSS）とJavaScript（JS）を追加する方法については、Drupalコミュニティのドキュメントに記載されている Inline JavaScript を参照してください） Drupal 8テーマにするには、カスタムブロックに配置するか、Twigテンプレート。

現在のtwigファイル名を見つける方法について このドキュメント をご覧ください。twigファイルは次のとおりです。：[DRUPAL8_ROOT_FOLDER] /themes/[THEME_NAME]/templates/html.html.twig
次に、htmlを以下のように変更します。

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="HandheldFriendly" content="true" />
    <meta name="Apple-touch-fullscreen" content="YES" />
    <script scr="PUT-YOUR-EXTERNAL-SCRIPT_URL-HERE"></script>
  </head>
  <body{{ attributes }}>
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

twig=テーマのファイルにボタンを共有するための外部スクリプトを追加しました。次に Install Drush をrebuilddrush cache-rebuildを使用してキャッシュします。動作するようです。 my drupal site 。

0
Chetabahana