为drupal 8创建子主题subtheme

Submitted by Dot on Sat, 06/04/2016 - 20:45

虽然已经习惯了drupal的默认主题bartik,但还是有些看着不爽的地方,比如宽度占满屏幕,比如标签p的margin-bottom太大。

怎么办?直接修改core/themes/bartik/css/layout.css和core/themes/bartik/css/base/elements.css么?当然不,你肯定不想每次被更新覆盖后再重新修改。

两个办法:

  1. 把原主题复制一份放在themes下并重命名,自己维护代码。不推荐,因为容易乱,而且用这种方法你会错过原主题的更新;
  2. 创建子主题subtheme。这是本文要说的。

什么是子主题:

就是能继承原主题(base theme)所有属性的主题。同时,在子主题中的设置又优先于原主题。比如说,子主题css中只有一条p{color:red;},那么子主题会继承原主题所有的属性,然后把所有p标签设为红色。

那么,怎样创建一个drupal 8的子主题呢?

官网讲的很详细,这里只做个演示:


[[email protected] drupal8]$ mkdir themes/dotcra
[[email protected] drupal8]$ cp core/themes/bartik/bartik.* themes/dotcra
[[email protected] drupal8]$ cd themes/dotcra
[[email protected] dotcra]$ rm bartik.breakpoints.yml bartik.theme
[[email protected] dotcra]$ rename bartik dotcra bartik.*
[[email protected] dotcra]$ mkdir css
[[email protected] dotcra]$ ls
css  dotcra.info.yml  dotcra.libraries.yml

接下来看看两个文件内容,其中只包含最基本的要素:


[[email protected] dotcra]$ cat dotcra.info.yml
name: dotcra
type: theme
base theme: bartik
description: 'nothing to say.'
core: '8.x'
libraries:
  - dotcra/global-styling
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

[[email protected] dotcra]$ cat dotcra.libraries.yml
global-styling:
  css:
    theme:
      css/style.css: {}

现在在css/下新建文件style.css并加入自己的样式。然后启用子主题dotcra,最后clear cache(关于clear cache,这里有详细的讲解),刷新页面即可看到效果。

最后说一下,自建的主题目录除了可以放在themes/下,也可以像drupal 7的作风那样放在sites/all/themes/下。

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.