博客列表 >drupal8 自定义主题开发——导入自定义css和js

drupal8 自定义主题开发——导入自定义css和js

LIWEN的博客
LIWEN的博客原创
2018年03月03日 13:22:571338浏览

第一步:创建主题文件夹,如example,并在文件夹下创建两个yml文件,命名为:example.info.yml 和example.libraries.yml。此处需特别注意:themes文件夹下不要创建html.html.twig模板文件,否则,将无法导入。我在这个地方,卡了一下午,才弄清楚,themes文件夹下,只能覆写区块模板。

第二步:info文件中写入主题定义的键值对,libraries文件中写入导入css和js 的键值对

example.info.yml文件内容如下:

name: Coll2018
description: collquium的2018主题
type: theme
core: 8.x
base theme: false

regions:
header: Header
sidebar_first: 'Sidebar first'
content: Content
footer_first: Footer

libraries:
  - Coll2018/global-styling

stylesheets-remove:
  - core/themes/stable/css/views/views.module.css
  - core/themes/stable/css/system/components/tree-child.module.css
  - core/themes/stable/css/system/components/tablesort.module.css
  - core/themes/stable/css/system/components/tabledrag.module.css
  - core/themes/stable/css/system/components/sticky-header.module.css
  - core/themes/stable/css/system/components/resize.module.css
  - core/themes/stable/css/system/components/reset-appearance.module.css
  - core/themes/stable/css/system/components/progress.module.css
  - core/themes/stable/css/system/components/position-container.module.css
  - core/themes/stable/css/system/components/nowrap.module.css
  - core/themes/stable/css/system/components/js.module.css
  - core/themes/stable/css/system/components/item-list.module.css
  - core/themes/stable/css/system/components/hidden.module.css
  - core/themes/stable/css/system/components/details.module.css
  - core/themes/stable/css/system/components/clearfix.module.css
  - core/themes/stable/css/system/components/container-inline.module.css
  - core/themes/stable/css/system/components/fieldgroup.module.css
  - core/themes/stable/css/system/components/autocomplete-loading.module.css
  - core/themes/stable/css/system/components/align.module.css
  - core/themes/stable/css/system/components/ajax-progress.module.css
  - core/modules/views/css/views.module.css
  - core/modules/system/css/components/tree-child.module.css
  - core/modules/system/css/components/ajax-progress.module.css
  - core/modules/system/css/components/align.module.css
  - core/modules/system/css/components/autocomplete-loading.module.css
  - core/modules/system/css/components/fieldgroup.module.css
  - core/modules/system/css/components/container-inline.module.css
  - core/modules/system/css/components/clearfix.module.css
  - core/modules/system/css/components/details.module.css
  - core/modules/system/css/components/hidden.module.css
  - core/modules/system/css/components/item-list.module.css
  - core/modules/system/css/components/js.module.css
  - core/modules/system/css/components/nowrap.module.css
  - core/modules/system/css/components/position-container.module.css
  - core/modules/system/css/components/progress.module.css
  - core/modules/system/css/components/reset-appearance.module.css
  - core/modules/system/css/components/resize.module.css
  - core/modules/system/css/components/sticky-header.module.css
  - core/modules/system/css/components/system-status-counter.css
  - core/modules/system/css/components/system-status-report-counters.css
  - core/modules/system/css/components/system-status-report-general-info.css
  - core/modules/system/css/components/tabledrag.module.css
  - core/modules/system/css/components/tablesort.module.css

regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar bar'
  footer_first: Footer


example.libraries.yml 的内容如下:

global-styling:
  css:
    theme:
      css/bootstrap.css: {}
      css/colloquium.css: {}
  header: true
  js:
    js/jquery-3.2.1.js: {}
    js/bootstrap.js: {}

其中,header: true的作用是将js文件放置到页面的head中,drupal默认放入底部。

stylesheets-remove:  设置的是移除自带的样式。

另外,注意每行缩进使用空格,冒号和小横线后面都有一个空格。



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议