Drupal8系列(五):主题制作之搭建框架-Ubuntu 14.04 LTS

  1. 云栖社区>
  2. 博客>
  3. 正文

Drupal8系列(五):主题制作之搭建框架-Ubuntu 14.04 LTS

技术小阿哥 2017-11-15 23:07:00 浏览1093
展开阅读全文

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,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术小阿哥
+ 关注