web-dev-qa-db-ja.com

<head>内に<link>または<style>を含めるにはどうすればよいですか？

以下の手順に従って、<link>内に<style>または<head>セクションを追加する必要があるGoogleフォントを使用しようとしています。私はサブテーマを使用しており、html.html.twigでセクションを直接変更できます（それが正しい方法であれば）。

ただし、<head-placeholder>, <css-placeholder>内の<jss-placeholder>と<head>に気づき、これらが他の場所からコードを挿入するために使用されることを意図しているかどうか疑問に思っています。

<head>に追加するためのベストプラクティスは何ですか？

r

8theming
3
glenviewjeff

最初に、フォントにリンクするライブラリをテーマに定義します。

[THEME].libraries.yml：

fonts:
  css:
    theme:
      # Do not include http: or https.
      # Should start with a double slash.
      //fonts.googleapis.com/css?family=Source+Sans+Pro: { type: external }

このライブラリは、テーマの[THEME].info.ymlファイルに追加することでロードされます。

libraries:
  - [THEME]/fonts
6
Jaypan

  1. [THEME].libraries.ymlで宣言され、[THEME].info.ymlによってロードされたすべてのCSSライブラリは、<css-placeholder>に挿入されます。

  2. [THEME].libraries.ymlで宣言され、[THEME].info.ymlによってロードされたすべてのJSライブラリは、<jss-placeholder>に挿入されます。

  3. [THEME].libraries.ymlでheader : trueで宣言され、[THEME].info.ymlによってロードされたすべてのJSライブラリは、<head-placeholder>に挿入されます。

    js-header:
      header: true
      js:
        header.js: {}
3
Marwen Amri