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

Drupal8的主题制作准备工作已经完成了,那么我们接下来就开始正式制作主题了!


一、生成主题的Compass框架

首先我们先进入到Druapl8的主题目录:

cd /var/www/druapl8/themes

然后利用Compass生成主题框架:

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框架。

输入上述命令,将会出现以下的信息:

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文件,其内容如下所示:

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文件内容如下:

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主题,也是在两个文件中进行重复定义的,所以就先让它这么重复着,等以后看到官方正式说明后再做修改好了,这一段先存疑待考吧!


综上所述,主题的基本框架就已经搭建起来了,接下来就是对主题进行细化了。

你可能感兴趣的:(框架搭建,主题制作)