Drupal8的主题制作准备工作已经完成了，那么我们接下来就开始正式制作主题了！
一、生成主题的Compass框架
首先我们先进入到Druapl8的主题目录：
|
1
|
cd
/var/www/druapl8/themes
|
然后利用Compass生成主题框架：
|
1
|
compass create firehare --css-
dir
=css --images-
dir
=img --javascripts-
dir
=js -r bootstrap-sass --using bootstrap
|
在上述命令中firehare是要生成的主题目录，--*-dir表示指定的目录名，如--css-dir=css就表示编译生成的css目录叫css，--images-dir=img则表示图像目录是img等，-r bootstrap-sass表示该主题框架要求bootstrap-sass项目，并使用bootstrap框架。
输入上述命令，将会出现以下的信息：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
directory firehare/
directory firehare
/css/
directory firehare
/fonts/bootstrap/
directory firehare
/js/
directory firehare
/js/bootstrap/
directory firehare
/sass/
create firehare
/config
.rb
create firehare
/sass/styles
.scss
create firehare
/sass/_bootstrap-variables
.scss
... ...
To
import
your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<
head
>
<link href=
"/css/styles.css"
rel=
"stylesheet"
type
=
"text/css"
/>
<
/head
>
|
上述信息的出现，表示主题框架基本生成。
二、让Drupal知道主题
与Drupal7不同的是，在Drupal8中使用.info.yml来代替.info文件，在这里，需要创建firehare.info.yml文件，其内容如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
name: firehare
type: theme
description: An extremely flexible, responsive theme with a wealth of regions based on bootstrap.
version:
1
.
0
-alpha
core:
8
.x
engine: twig
stylesheets:
all:
- css/style.css
regions:
pre_header_first:
'Pre Header First'
pre_header_second:
'Pre Header Second'
pre_header_third:
'Pre Header Third'
pre_header:
'Pre Header'
header_top_left:
'Header Top Left'
header_top_right:
'Header Top Right'
header: Header
navigation:
'Navigation'
banner:
'Banner'
highlighted: Highlighted
promoted:
'Promoted'
content: Content
sidebar_first:
'Sidebar First'
sidebar_second:
'Sidebar Second'
bottom_content:
'Bottom Content'
footer_first:
'Footer First'
footer_second:
'Footer Second'
footer_third:
'Footer Third'
footer_fourth:
'Footer Fourth'
footer: Footer
help: Help
page_top:
'Page top'
page_bottom:
'Page bottom'
|
在生成该文件之后，进入Druapl8的管理》外观界面，你将会找到一个名为firehare且没有screenshot的主题，表示Drupal8已经知道有这么一个主题存在了。
三、添加所需的CSS和JS
这是Drupal8与Drupal7差异比较大的地方，Drupal8是依赖.libraries.yml文件来启用相关的Javascript的，所创建的firehare.libraries.yml文件内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
base:
version:
1
.
0
-alpha
css:
theme:
css/style.css: {}
bootstrap_javascript:
version:
3
.
2
.
0
.
1
js:
js/bootstrap.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupal
|
大家不难看到在libraries文件和info文件中都有对css文件的定义，而且是重复的，关于这一点我查了一下Drupal8自带的bartik主题，也是在两个文件中进行重复定义的，所以就先让它这么重复着，等以后看到官方正式说明后再做修改好了，这一段先存疑待考吧！
综上所述，主题的基本框架就已经搭建起来了，接下来就是对主题进行细化了。
本文转自 firehare 51CTO博客，原文链接：http://blog.51cto.com/firehare/1540858，如需转载请自行联系原作者
