Bagaimana cara menambahkan CSS & JavaScript ke <head>?


8

Saya ingin menambahkan kode berikut di bagian depan halaman saya menggunakan sub tema Drupal 8 dari Bartik.

Adakah yang bisa membantu bagaimana melakukannya? Apa cara terbaik untuk melakukannya di versi ranting tema yang baru ini? Di mana page.tpl?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>

Jawaban:


7

THEME.libraries.yml Anda:

global-styling:
  version: VERSION
  header: true // <--- To the header!!!
  css:
    theme:
      css/mystyle.css: {} // if you want add custom css
  js:
    js/stepcarousel.js: {}
  dependencies:
    - core/drupal // for use drupal.js
    - core/jquery

THEME.info.yml Anda:

name: THEME
base theme: Bartik
...
libraries:
  - THEME/global-styling
...

dan Bersihkan Cache

Di mana page.tpl?

Di sini: inti / modul / sistem / templat / halaman.html.twig

Jika Anda ingin menggunakannya, salin ke folder tema di dalam template, seperti ini:

 THEME
   templates
     page.html.twig

Ubah semua yang Anda inginkan dan Hapus Cache


6

Di Drupal 8, stylesheet dan file JavaScript dilampirkan sebagai pustaka :

Anda menambahkan folder tema.info ke folder tema (atau modul khusus) Anda:

power-slider:
  version: 1.x
  js:
    js/power-slider.js: {}
  css:
    theme:
      css/power-slider.css: {}
  dependencies:
    - core/jquery

Dan kemudian lampirkan perpustakaan ke array render. Misalnya, ini melampirkan perpustakaan ke semua halaman:

function yourtheme_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'yourtheme/power-slider';
}

Pendekatan ini memiliki keuntungan karena dapat digunakan kembali. Anda menentukan jalur yang diperlukan sekali dan Anda dapat menggunakannya kembali di tempat yang berbeda dalam kode Anda.

Lihat:

Jawaban ini sangat terinspirasi oleh jawaban berliner .


Tautan rusak
Yzmir Ramirez

Memperbarui tautannya.
Neograph734

1

Dalam Drupal 8 sumber daya klien seperti file CSS dan JavaScript dilampirkan ke render array :

$element['#attached'] = array('js' => array(PATH_TO_JS));

Di mana $elementbisa berupa array render output atau elemen bentuk.

Atau, Anda dapat mendaftarkan perpustakaan dengan mendefinisikannya dalam file * .libraries.info

power-slider:
  version: 1.x
  js:
    js/power-slider.js: {}
  dependencies:
    - core/jquery

dan kemudian lampirkan perpustakaan ke array render seperti ini:

$element['#attached']['library'][] = 'NAMEOFTHEMODULE/power-slider';

Pendekatan terakhir memiliki keuntungan menjadi dapat digunakan kembali. Anda menentukan jalur yang diperlukan sekali dan Anda dapat menggunakannya kembali di tempat yang berbeda dalam kode Anda.


1
Setelah Anda menulis hook_library_info () ini diganti dengan file * .libraries.yml. Lihat drupal.stackexchange.com/a/109029/12010 dan drupal.org/node/2216195
batigolix

Saya tidak berpikir itu benar-benar ketinggalan jaman. perlu diedit, itu saja. saya akan mencobanya
batigolix

Saya memperbarui jawabannya
batigolix

@batigolix, hasil edit yang bagus. Namun, mungkin lebih baik Anda mengirim jawaban yang diperbarui sebagai jawaban Anda , alih-alih mengubah kode berliner (pengeditan kode cenderung ditolak karena terlalu mengganggu).
Free Radical

Oke, saya menambahkan versi yang diperbarui sebagai jawaban baru. Anda benar: Saya harus berubah lebih dari yang saya pikir perlu pada awalnya.
batigolix
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.