首页 > 代码库 > Drupal8系列（四）：主题制作之搭建框架-Ubuntu 14.04 LTS

Drupal8系列（四）：主题制作之搭建框架-Ubuntu 14.04 LTS

2024-07-17 21:03:33   214人阅读

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="http://www.mamicode.com/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/bootstrap/bootstrap.css
    - 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/bootstrap/bootstrap.css: {}
      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主题，也是在两个文件中进行重复定义的，所以就先让它这么重复着，等以后看到官方正式说明后再做修改好了，这一段先存疑待考吧！


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

本文出自 “野火兔的窝” 博客，请务必保留此出处http://firehare.blog.51cto.com/809276/1540858


联系
我们