Theming Drupal 8美化Drupal8

Last updated February 16, 2016. Created on February 2, 2013.

Edited bychris_hall_hu_cheng,guitarbound2015,HongPong,sqndr.Log in to edit this page.

翻譯By我

This guide is about creating themes for Drupal 8.

這篇翻譯是關(guān)于Drupal8滴。

Quite significantchanges were introduced in the theme system between Drupal 8 and 7. This guide contains information that applies to Drupal 8 and refers sometimes to Drupal 7 in order to explain new concepts and approaches.

Drupal7到8的升級(jí)是非常重大的升級(jí)，特別是theme系統(tǒng)的升級(jí)。這篇文字主要是說明Drupal8的不過有時(shí)也會(huì)講些D7以示區(qū)分。

Outside drupal.org other theming guides can be found, such assqndr's excellent Drupal 8 theming guide.

有很多第三方的非常好的文章， 比如sqndr's excellent Drupal 8 theming guide這個(gè)咯， 有時(shí)間也會(huì)翻譯下。

PHPTemplate has been discontinued for theming in Drupal 8; theTwig markup language is used instead. This will make Drupal 8 themes much more secure because PHP calls will no longer exist in theme files. This will also make theming easier to understand for non-programmers, front end developers and programmers coming from other languages and frameworks.

PHP模塊在D8中不再使用了， 取而代之的是Twig模版， 當(dāng)然了， 因?yàn)镈8是drupal內(nèi)核+syphomny啦。拿twig取代了PHP模版肯定是增強(qiáng)了安全性的，當(dāng)然了也使得這個(gè)theming變的更容易被非碼農(nóng)，前端開發(fā)人員和碼農(nóng)們接受。

以下這些是關(guān)于theme的文章合集， 有空慢慢研究收貨將是蠻大的。

又來那句話了， 想看打賞啊。 O(∩_∩)O~

For a collection of useful materials for themers, seeTheming and Front End Development with Drupal.

Defining a theme with an .info.yml file

Theme folder structure

Twig in Drupal 8

Adding Regions to a Theme

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

Classy themes css selectors

Creating a Drupal 8 sub-theme

Including Default Image Styles With Your Theme

Including Part Template

Using attributes in templates

Working with breakpoints in Drupal 8

Theming differences between Drupal 6, 7 & 8

Advanced Theming

好吧， 你不打賞， 我也繼續(xù)翻了。沒事翻著玩。呵呵

從第一篇開始吧

Defining a theme with an .info.yml file

用一個(gè).info.yml文件定義一個(gè)主題

Last updated February 20, 2016. Created on October 3, 2014.

Edited byjp.stacey,hansfn,kay_v,lucasr.Log in to edit this page.

To create a Drupal 8 theme you need to first create a THEMENAME.info.yml file that provides meta-data about your theme to Drupal. This is similar to how modules and installation profiles are being defined, and as such it is important to set the 'type' key in the .info.yml file to 'theme' in order to differentiate it.

想做一個(gè)D8的主題， 首先要定義一個(gè)THEMENAME.info.yml的文件，它為Drupal系統(tǒng)提供了主題的元數(shù)據(jù)。

This page provides an example THEMENAME.info.yml file, and an overview of the information that the file can contain.

這篇文章將介紹給你這個(gè)文件的整體信息和這個(gè)文件所包含的內(nèi)容。

Create an .info.yml file

You create the .info.yml file in the root of yourtheme folder. The folder should have the same name as the .info.yml file. So if your theme is named "Fluffiness" then the folder is named "fluffiness/" and the .info.yml file is named "fluffiness/fluffiness.info.yml". If the file is present your theme will be visible in your website at Manage > Appearance (http://example.com/admin/appearance).

在你主題的根目錄， 創(chuàng)建一個(gè)文件， 目錄的名字必須和主題名字一致。如果你的主題叫做Fluffiness，那文件夾的名字也是fluffiness，而且.info.yml的名字也要寫成 fluffiness/fluffiness.info.yml。這個(gè)時(shí)候就可以在你的管理界面的外觀管理的界面就可以看到你新建主題的名字了。

Replace spaces in the theme name with underscores in the folder name (and .info.yml file name).

Tabs areNOTallowed, use spacesONLY.

YouMUSTindent your properties and lists with 1 or more spaces.

Example舉例：

name:Fluffiness

type:theme

description:A cuddly theme that offers extra fluffiness.

core:8.x

libraries:

? - fluffiness/global-styling

stylesheets-remove:

? - '@classy/css/components/tabs.css'

? - core/assets/vendor/normalize-css/normalize.css

regions:

? header:Header??

? content:Content ? ?# the content region is required

? sidebar_first:'Sidebar first'

? footer:Footer

In your Drupal website you can find more examples of .info.yml files by looking at the themes provided by core. Open for example the folder core/themes/stark and look for the file stark.info.yml.

D8的站點(diǎn)里 有很多的info。yml的文件， 打開一個(gè)看看把

Keys

The following keys provide meta-data about your theme, and define some of the basic functionality.

name:Fluffiness

Required. The human readable name will appear on the Appearance page, where you can activate your theme.

description:An extra cuddly Drupal theme available in greyandblue.

Required. The description is also displayed on the Appearance page.

type:theme

Required. The type key indicates the type of extension, e.g. module, theme or profile. For themes this should always be set to "theme".

base theme:...

Recommended. The theme can inherit the resources from another theme bydefining it as a base theme. It isrecommendedto inherit from classy or stable, to ensure your own theme is more stable to any potential future changes in core theming.

core:8.x

Required. The core key specifies the version of Drupal core that your theme is compatible with.

version:8.x-1.0

For modules hosted on drupal.org, the version number will be filled in by the packaging script. You should not specify it manually, but leave out the version line entirely.

screenshot:fluffiness.png

With the screenshot key you define a screenshot that is shown on the Appearance page. If you do not define this key then Drupal will look for a file named 'screenshot.png' in the theme folder to display.

libraries:-fluffiness/global-styling

Thelibrarieskey can be used to add asset libraries — which can contain both CSS and JS assets — to all pages where the theme is active. You canread more about themes and asset libraries.

If that library was defined as follows:

global-styling:version:1.x? css:theme:css/style.css:{}css/print.css:{media:print}

Then together, that would result in this addition to the HTML:

stylesheets-remove:-core/assets/vendor/normalize-css/normalize.css# 1-'@classy/css/components/tabs.css'# 2

Note:

-#1: In most caseslibraries-overrideshould be used with a key offalseinstead of stylesheets-remove which is deprecated and will be removed in Drupal 9.

-#2: Thestylesheets-removekey removes a link to a stylesheet added by another theme or module. The full path to CSS file should be provided (instead of just the filename), to accommodate cases where more than one file with the same name exists.

-#3: In cases where a Drupal core asset is being removed (for example, a CSS file in jQuery UI) the full file path is needed. In cases where the file is part of a library that belongs to a module or theme, a token can be used. Note that when using the token it needs to be quoted because @ is a reserved indicator in YAML.

regions:header:Header? content:Content# required!sidebar_first:'Sidebar first'footer:Footer

Regions are declared as children of the regions key. Note that region keys are not preceded by a dash. You canread more about adding regions to a theme.

You arerequiredto have acontentregion.

More information

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

A full description of all the keys that are available in a *.info.yml files can be found in:Let Drupal 8 know about your module with an .info.yml file

Change record:.info files are now .info.yml files