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

Posted 2021-04-29 Drupal每周推荐

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 版本的主题，根据习惯或者情况选择复制其中一个。

三、自定义主题设置

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

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

• 重命名cms_front/THEMENAME.starterkit.yml为cms_front.info.yml

• 重命名cms_front/THEMENAME.libraries.yml为cms_front.libraries.yml

• 重命名cms_front/THEMENAME.theme为cms_front.theme

• 重命名cms_front/config/install/THEMENAME.settings.yml为cms_front.settings.yml

• 重命名cms_front/config/schema/THEMENAME.schema.yml为cms_front.schema.yml，打开文件重命名THEMENAME.settings为cms_front.settings,THEMETITLE改为cms_front

• 打开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框架资源库

打开中文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完成合并。

关于本文

文章来源：www.davyin.com

上期内容:  

Drupal每日推荐群：361323428

要求自己，影响别人。