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.
这篇翻译是关于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的升级是非常重大的升级，特别是theme系统的升级。这篇文字主要是说明Drupal8的不过有时也会讲些D7以示区分。
Outside drupal.org other theming guides can be found, such assqndr's excellent Drupal 8 theming guide.
有很多第三方的非常好的文章， 比如sqndr's excellent Drupal 8 theming guide这个咯， 有时间也会翻译下。
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模版， 当然了， 因为D8是drupal内核+syphomny啦。拿twig取代了PHP模版肯定是增强了安全性的，当然了也使得这个theming变的更容易被非码农，前端开发人员和码农们接受。
以下这些是关于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
好吧， 你不打赏， 我也继续翻了。没事翻着玩。呵呵
从第一篇开始吧
Defining a theme with an .info.yml file
用一个.info.yml文件定义一个主题
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.
想做一个D8的主题， 首先要定义一个THEMENAME.info.yml的文件，它为Drupal系统提供了主题的元数据。
This page provides an example THEMENAME.info.yml file, and an overview of the information that the file can contain.
这篇文章将介绍给你这个文件的整体信息和这个文件所包含的内容。
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).
在你主题的根目录， 创建一个文件， 目录的名字必须和主题名字一致。如果你的主题叫做Fluffiness，那文件夹的名字也是fluffiness，而且.info.yml的名字也要写成 fluffiness/fluffiness.info.yml。这个时候就可以在你的管理界面的外观管理的界面就可以看到你新建主题的名字了。
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的站点里 有很多的info。yml的文件， 打开一个看看把
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