Làm cách nào để thêm CSS & JavaScript vào <head>?

Tôi muốn thêm mã sau vào phần trên trang nhất của mình bằng chủ đề phụ Drupal 8 của Bartik.

Ai có thể giúp làm thế nào để làm điều đó? Cách tốt nhất để làm điều đó trong phiên bản twig mới của chủ đề này là gì? Trang.tpl ở đâu?

<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
nguồn

Câu trả lời:

Trên bạn THEME.lologists.yml:

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

Về bạn THEME.info.yml:

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

và xóa bộ nhớ cache

Trang.tpl ở đâu?

Tại đây: lõi / mô-đun / hệ thống / mẫu / page.html.twig

Nếu bạn muốn sử dụng nó, sao chép vào thư mục chủ đề bên trong các mẫu, như thế này:

 THEME
   templates
     page.html.twig

Thay đổi tất cả những gì bạn muốn và Xóa bộ nhớ cache

— rpayam
nguồn

Trong Drupal 8, các bảng định kiểu và tệp JavaScript được đính kèm dưới dạng thư viện :

Bạn thêm thư mục yourtheme.lologists.info vào thư mục chủ đề (hoặc mô-đun tùy chỉnh):

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

Và sau đó đính kèm thư viện vào một mảng render. Ví dụ: cái này gắn thư viện vào tất cả các trang:

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

Cách tiếp cận này có lợi thế là có thể tái sử dụng. Bạn xác định các đường dẫn cần thiết một lần và bạn có thể sử dụng lại chúng ở những nơi khác nhau trong mã của bạn.

Xem:

Thêm biểu định kiểu (CSS) và JavaScript (JS) vào chủ đề Drupal 8

Câu trả lời này được lấy cảm hứng rất nhiều từ câu trả lời của berlin .

— batigolix
nguồn

Liên kết bị hỏng

— Yzmir Ramirez

Cập nhật các liên kết.

— Neograph734

Trong tài nguyên máy khách Drupal 8 như tệp CSS và JavaScript được đính kèm để kết xuất mảng :

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

Trường hợp $elementcó thể là một mảng kết xuất đầu ra hoặc một phần tử biểu mẫu.

Ngoài ra, bạn có thể đăng ký thư viện bằng cách xác định nó trong tệp * .lologists.info

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

và sau đó đính kèm thư viện vào một mảng render như thế này:

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

Cách tiếp cận thứ hai có lợi thế là có thể tái sử dụng. Bạn xác định các đường dẫn cần thiết một lần và bạn có thể sử dụng lại chúng ở những nơi khác nhau trong mã của bạn.

— người lái
nguồn

Sau khi bạn viết, hook_l Library_info () này đã được thay thế bằng tệp * .lologists.yml. Xem drupal.stackexchange.com/a/109029/12010 và drupal.org/node/2216195

— batigolix

Tôi không nghĩ rằng nó thực sự lỗi thời. nó cần một số chỉnh sửa, đó là tất cả. tôi hãy thử xem

— batigolix

Tôi đã cập nhật câu trả lời

— batigolix

@batigolix, chỉnh sửa đẹp. Tuy nhiên, có lẽ tốt hơn là bạn đăng câu trả lời được cập nhật làm câu trả lời của mình , thay vì thay đổi mã của berliner (chỉnh sửa mã có xu hướng bị từ chối vì quá xâm phạm).

— Cấp tiến miễn phí

OK, tôi đã thêm phiên bản cập nhật như một câu trả lời mới. bạn nói đúng: ban đầu tôi phải thay đổi nhiều hơn tôi nghĩ là cần thiết.

— batigolix