使用Bootstrap主题的template组件和css做自定义主题

使用Bootstrap主题的template组件和css做自定义主题


Bootstrap是最受欢迎的html、css和js框架,用户开发响应式布局、移动设备优先的WEB项目。

Bootstrap主题中的大部分组件、Css和JavaScript集成了Drupal的templatet和预处理。增强了:

  • Breadcrumbs

  • Navbar

  • Popovers

  • Tooltips

  • Wells 
    虽然bootstrap融合到Drupal很多,但是有时候我们并不需要某些组件或者预处理,比如默认的navbar菜单在绝大部分的定制设计中不适用,所以不需要bootstrap为基础主题,复制一份bootstrap的子主题之后只按需的选择加载bootstrap的template组件和css样式

使用到:编辑器Atom和Atom插件Remote-FTP,阿里云开发环境

一、下载bootstrap主题

drush dl bootstrap

二、选择主题

配置好remote-ftp之后,同步已经下载好的主题到本地,此时你会看到bootstrap主题下面有个starterkits文件夹,里面包含cdn less sass版本的主题,根据习惯或者情况选择复制其中一个。


三、自定义主题设置

  1. themes文件夹下面新建目录custom,把复制好的子主题这里我选择sass版本的子主题,粘贴到custon目录里面,当然你也可以直接复制到themes文件夹下面,一样生效,只是为了更好的分类和区别。

  2. 重命名sass文件夹为主题的唯一机器名cms_front

  3. 重命名cms_front/THEMENAME.starterkit.ymlcms_front.info.yml

  4. 重命名cms_front/THEMENAME.libraries.ymlcms_front.libraries.yml

  5. 重命名cms_front/THEMENAME.themecms_front.theme

  6. 重命名cms_front/config/install/THEMENAME.settings.ymlcms_front.settings.yml

  7. 重命名cms_front/config/schema/THEMENAME.schema.ymlcms_front.schema.yml,打开文件重命名THEMENAME.settingscms_front.settings,THEMETITLE改为cms_front

  8. 打开cms_front.info.yml 
    原内容

core: 8.x
type: theme
base theme: bootstrap
name: 'THEMETITLE'
description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries:
- 'THEMENAME/global-styling'
- 'THEMENAME/bootstrap-scripts'

修改成:

core: 8.x
type: theme
#base theme: bootstrap //不再依赖bootstrap为基础主题
name: 'cms frontend theme'
description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
#package: 'Bootstrap'
regions:
  navigation: 'Navigation'
#navigation_collapsible: 'Navigation (Collapsible)' //在page.html.twig中也要处理菜单部分
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
libraries:
  - 'cms_front/global-styling'
  - 'cms_front/bootstrap-scripts'

这就做完了初始化的工作,右键文件夹cms_front选择upload上传到服务器,drush cr更新缓存后,登录到后台主题管理,查看是否可以正常显示自定义主题。

四、下载bootstrap框架资源库

  1. 打开中文bootstrap或者英文官网,下载对应的sass源码版本,解压并重命名成bootstrap复制放入到cms_front主题文件夹下面。

五、复制bootstrap主题的templates模板

bootstrap主题中复制templates里面的所有文件,或者你可以按自己的需要复制,放入到自定义主题cms_front/templates模板文件中。

六、按需加载bootstrap的js组件

cms_front.libraries.yml文件中,可以看到:

global-styling:
  css:
    theme:
css/style.css: {}
bootstrap-scripts:
  js:
bootstrap/assets/javascripts/bootstrap/affix.js: {}
bootstrap/assets/javascripts/bootstrap/alert.js: {}
bootstrap/assets/javascripts/bootstrap/button.js: {}
bootstrap/assets/javascripts/bootstrap/carousel.js: {}
bootstrap/assets/javascripts/bootstrap/collapse.js: {}
bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
bootstrap/assets/javascripts/bootstrap/modal.js: {}
bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
bootstrap/assets/javascripts/bootstrap/popover.js: {}
bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
bootstrap/assets/javascripts/bootstrap/tab.js: {}
bootstrap/assets/javascripts/bootstrap/transition.js: {}

加载了全部的bootstrap组件,有些组件我们在做完项目的时候可以重新的检查一次,不需要的就注释掉,依赖的时候再加载回来,节省服务器带宽。

六、bootstrap css组件

查看自定义主题下面是sass/scss/style.scss

// Default variables.
@import "default-variables";
// Bootstrap Framework.
@import '../bootstrap/assets/stylesheets/bootstrap';
// Base-theme overrides.
@import 'overrides';

bootrap已经为我们做好了规范,如果你要更改bootstrap css的组件变量不要直接修改bootstrap原有框架的变量,而是通过覆写的方式,当你升级的时候就不会受到影响,只需要把覆盖的变量写在_overrides.scss里面的变量会覆盖bootstrap已经定义好的变量。

在看这个文件./bootstrap/assets/stylesheets/bootstrap

/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

导入了很多bootstrap的组件,在项目后期的时候就要把不需要的组件注释掉。

结语

我们建议组件化开发,但输出的样式表尽量少,或者合并成一个就够了。样式写在scss/style.scss里面,如果你把组件独立成一个sass文件,可以使用@import的方式导入到总的style.scss里面,使用编译器或者命令行监听这个文件,当保存时,输出到自定义主题的文件夹css/style.css完成合并。