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>
8 javascript Manu Adam
sumber

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

rpayanm
sumber
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 .

batigolix
sumber
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.

berliner
sumber
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