跳转到主要内容
laoxue 提交于 17 February 2016

本文介绍如何在drupal 8 中安装bootstrap主题,创建子主题,调用本地库文件。

一、安装bootstrap基主题

1、在drupal.org官网下载bootstrap 8.x主题。

image001.png

 

2、在首页管理菜单“外观”页面,点击安装新的主题。

image003.png

 

3、选择安装刚刚下载的主题压缩文件。

image005.png

 

4、启用bootstrap主题。

image007.png

image009.png

 

 

二、创建子主题

1、在theme>bootstrap>starterkits目录下拷贝cdn文件夹及其包含的所有内容。

image011.png

 

 

2、粘贴cdn文件夹到theme目录下。

image013.png

 

3、修改扯cdn文件夹名称为子主题的名称如:subtheme。

image015.png

4、在子主题文件夹下找到THEMENAME.*相关的3个文件。

image017.png

 

 

5、将THEMENAME.*改名为subtheme.*。

image019.png

 

 

6、编辑subtheme.info.yml文件找到THEMENAME 。

image021.png

 

 

7、用subtheme替换。保存。

image023.png

 

 

8、回到网站首页,导航到管理菜单“外观”页面,设置该子主题为默认主题。

image025.png

 

 

9、在主题设置高级选项中设置CDN Provider为jsDelivr。选择相应的bootstrap版本。保存设置。清空缓存。

image027.png

image029.png

 

 

三、调用本地bootstrap库文件。

1、在主题设置高级选项中设置CDN Provider为“无”。

image031.png

 

 

2、保存修改结果,回到首页清空内存。

image033.png

 

 

3、下载安装bootstrap_library模块。

image035.png

 

4、启用该模块。

image037.png

 

 

5、在bootstrap官网下载库压缩文件。

image039.png

 

 

6、将解压后的bootstrap-*-dist文件夹及其包含的文件放在网站根目录的libraries文件夹下面。如果没有该文件夹就新建一个libraries文件夹。

image041.png

 

 

7、将bootstrap-*-dist文件夹改名为bootstrap。确认该文件夹下包含css、fonts和js子文件夹。

image043.png

 

 

8、在网站首页导航到配置>开发>Bootstrap Library管理页面。

image045.png

 

 

9、选择相应的bootstrap版本为本地库文件。

image047.png

 

 

10、选择相应的主题为bootstrap子主题。保存。

image049.png

 

 

11、将bootstrap基主题中css最新版本覆写文件overrides.min.css拷贝到bootstrap子主题的css文件夹下面。

image051.pngimage053.png

 

 

12、在子主题文件夹中,找到subtheme.libraries.yml文件,修改。在theme:下面添加css导入css/overrides.min.css。保存。

image055.png

 

 

13、回到网站首页,清空缓存。查看源代码可以看到引入的本地bootstrap的css和js库文件。

image057.png

 

Drupal 版本