Como adiciono CSS e JavaScript ao <head>?

8

Quero adicionar o seguinte código na minha seção da primeira página usando um subtema Drupal 8 do Bartik.

Alguém pode ajudar como fazê-lo? Qual é a melhor maneira de fazê-lo nesta nova versão ramificada do tema? Onde fica 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
fonte

Respostas:

7

Em você THEME.libraries.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

Em você THEME.info.yml:

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

e limpar cache

Onde fica page.tpl?

Aqui: core / modules / system / templates / page.html.twig

Se você quiser usá-lo, copie para a pasta do tema dentro dos modelos, como este:

 THEME
   templates
     page.html.twig

Altere tudo o que quiser e Limpar cache

rpayanm
fonte
6

No Drupal 8, folhas de estilo e arquivos JavaScript são anexados como bibliotecas :

Você adiciona um yourtheme.libraries.info à pasta do seu tema (ou módulo personalizado):

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

E, em seguida, anexe a biblioteca a uma matriz de renderização. Por exemplo, isso anexa a biblioteca a todas as páginas:

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

Essa abordagem tem a vantagem de ser reutilizável. Você define os caminhos necessários uma vez e pode reutilizá-los em diferentes locais do seu código.

Vejo:

Essa resposta foi muito inspirada na resposta de Berlim .

batigolix
fonte
Links estão quebrados
Ýzmir Ramirez
Atualizado os links.
Neograph734
1

No Drupal 8, recursos do cliente, como arquivos CSS e JavaScript, são anexados para renderizar matrizes :

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

Onde $elementpode ser uma matriz de renderização de saída ou um elemento de formulário.

Como alternativa, você pode registrar uma biblioteca, definindo-a em um arquivo * .libraries.info

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

e, em seguida, anexe a biblioteca a uma matriz de renderização como esta:

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

A última abordagem tem a vantagem de ser reutilizável. Você define os caminhos necessários uma vez e pode reutilizá-los em diferentes locais do seu código.

berliner
fonte
11
Depois que você escreveu, este hook_library_info () foi substituído por um arquivo * .libraries.yml. Veja drupal.stackexchange.com/a/109029/12010 e drupal.org/node/2216195
batigolix
Eu não acho que é realmente desatualizado. precisa de alguma edição, só isso. mal dar-lhe uma tentativa
batigolix
Atualizei a resposta
batigolix 15/10
@batigolix, boa edição. No entanto, provavelmente é melhor que você publique a resposta atualizada como sua resposta, em vez de alterar o código do berliner (a edição do código tende a ser rejeitada por ser muito intrusiva).
Free Radical
OK, adicionei a versão atualizada como uma nova resposta. você está certo: tive que mudar mais do que achava necessário inicialmente.
batigolix