國人對于網站的要求同國外還是有很大的區別的，國外對網站的內容十分看重，而對外觀則并不太看重，國人則相反，相對來說對網站的外觀更為看重，所以有個好的主題對于國內網站來講就必不可少了。由于我比較喜歡BootStrap，所以就以Bootstrap Barrio主題來例，展示一下該主題的安裝和設置

一、簡介

Bootstrap Barrio主題是Bootstrap主題的子主題，添加了三欄設計，并利用Skinr模塊來實現柵格布局，還對首頁布局做了優化，可以說是一個不錯的Bootstrap主題。

二、安裝

安裝Bootstrap Barrio主題需要Bootstrap前端框架，到Twitter Bootstrap網站上下載最新的Bootstrap前端框架包，然后將其解壓到Drupal7根目錄下的sites/all/libraries/目錄下，然后將解壓目錄名改為bootstrap，如下所示：

1 2	$?unzip?bootstrap-3.1.1-dist.zip?-d?/var/www/drupal7/sites/all/libraries $?mv?/var/www/drupal7/sites/all/libraries/bootstrap-3.1.1-dist/?/var/www/drupal7/sites/all/libraries/bootstrap

Bootstrap直接在Drupal上使用并不方便，需要安裝?Bootstrap Library 模塊：

1 2	$?drush?dl?bootstrap_libraryProject?bootstrap_library?(7.x-1.4)?downloaded?to????????????????????[success] sites/all/modules/bootstrap_library.

然后啟用該模塊：

1 2 3 4 5 6 7 8 9 10

$?drush?en?bootstrap_library The?following?projects?have?unmet?dependencies:??????????????????????[ok] bootstrap_library?requires?libraries Would?you?like?to?download?them??(y/n):?y Project?libraries?(7.x-2.2)?downloaded?to????????????????????????????[success] sites/all/modules/libraries. The?following?extensions?will?be?enabled:?bootstrap_library,?libraries Do?you?really?want?to?continue??(y/n):?y bootstrap_library?was?enabled?successfully.??????????????????????????[ok] libraries?was?enabled?successfully.??????????????????????????????????[ok]

發現了沒有？由于Bootstrap Library模塊依賴 Libraries API模塊，所以在啟用Bootstrap Library模塊時，Drush自動下載并啟用了Libraries API模塊，不得不點個贊！

在安裝了Bootstrap框架之后，我們還需要安裝jQuery Update模塊、Bootstrap主題和Skinr模塊，這是因為Bootstrap Barrio主題依賴這幾個模塊，安裝方式如下：

1 2 3 4 5 6

$?drush?dl?jquery_update?bootstrap?skinr Project?jquery_update?(7.x-2.4)?downloaded?to????????????????????????[success] sites/all/modules/jquery_update. Project?bootstrap?(7.x-3.0)?downloaded?to?sites/all/themes/bootstrap.[success] Project?skinr?(7.x-2.0-beta1)?downloaded?to?sites/all/modules/skinr.?[success] Project?skinr?contains?5?modules:?skinr_panels,?skinr_context,?skinr_context_ui,?skinr_ui,?skinr

啟用jQuery Update模塊和Skinr模塊，其它的模塊等到以后使用時再行開啟:

1 2 3 4 5 6 7

$?drush?en?jquery_update?skinr_ui The?following?extensions?will?be?enabled:?jquery_update,?skinr_ui,?skinr Do?you?really?want?to?continue??(y/n):?y skinr_ui?was?enabled?successfully.???????????????????????????????????[ok] skinr_ui?defines?the?following?permissions:?administer?skinr,?edit?skin?settings,?edit?advanced?skin?settings jquery_update?was?enabled?successfully.??????????????????????????????[ok] skinr?was?enabled?successfully.??????????????????????????????????????[ok]

然后安裝Bootstrap Barrio主題：

1 2 3

$?drush?dl?bootstrap_barrio Project?bootstrap_barrio?(7.x-3.7)?downloaded?to?????????????????????[success] sites/all/themes/bootstrap_barrio.

最后啟用Bootstrap Barrio主題：

1 2 3 4

$?drush?en?bootstrap_barrio The?following?extensions?will?be?enabled:?bootstrap_barrio Do?you?really?want?to?continue??(y/n):?y bootstrap_barrio?was?enabled?successfully.???????????????????????????[ok]

當然兄弟可能要問為什么不象安裝Bootstrap Library模塊那樣，直接安裝和啟用Bootstrap主題，讓Drush自行下載和安裝相關模塊和主題呢？筆者在實踐中發現那種關聯，主要是在模塊與模塊之間產生，而一般在安裝的主題同時依賴主題和模塊的時候，筆者還沒發現Drush有自動關聯主題與模塊的功能。

三、設置

1、設置Bootstrap Library模塊：

點擊頂部的管理菜單的模塊，在篩選列表中輸入lib，不必輸入完整的單詞，Module Filter模塊會自動進行匹配，點擊Bootstrap Library模塊的配置按鈕，在THEMES VISIBILITY（主題可見）中點選Bootstrap Barrio主題，點擊保存配置。

2、設置jQuery Update模塊：

點擊頂部的管理菜單的模塊，在篩選列表中輸入jQuery，在Module Filter模塊的自動匹配的模塊列表，點擊jQuery Update模塊的配置按鈕，在VERSION OPTIONS（版本選項）中確保Default jQuery Version（默認jQuery版本）大于1.7（筆者發現使用Drupal默認的1.10.x，會在管理?》報告?》狀態報告中報錯，不必理會否則Panels模塊將會工作不正常），然后點擊保存配置。

3、支持響應式主題：

由于IE8并不支持響應式主題，所以要想讓Bootstrap在IE8上面有很好的表現就需要安裝相關模塊，在這里我們需要的是respond.js模塊，同樣的在這之前需要下載respond.js文件：

1	$?wget?-P?/var/www/drupal7/sites/all/libraries/respondjs?https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js

然后安裝和啟用該模塊：

1 2 3 4 5 6 7 8 9 10 11 12

$?drush?dl?respondjs Project?respondjs?(7.x-1.3)?downloaded?to????????????????????????????[success] sites/all/modules/respondjs. $?drush?en?respondjs The?following?extensions?will?be?enabled:?respondjs Do?you?really?want?to?continue??(y/n):?y respondjs?was?enabled?successfully.??????????????????????????????????[ok] respondjs?defines?the?following?permissions:?administer?respondjs Respond.js?already?present.?No?download?required.????????????????????[ok] Respond.js?module?is?functioning?properly,?but?CSS?aggregation?is?not[warning] yet?enabled.?You?MUST?enable?CSS?aggregation?for?respond.js?to?work properly.

我們看到這里有個警告，要求啟用CSS合并功能，為了方便操作，我們到Drupal7的頂部管理菜單中點擊“報告 ?》狀態報告”，如下圖所示：

點擊鏈接CSS agregation is enabled，進入“管理??》?配置??》?開發?》?性能”頁，勾選“帶寬優化”中的”合并和壓縮CSS“前的復選框，如下圖所示：

然后點擊保存配置按鈕。回到頂部管理菜單中點擊“報告? 狀態報告”，發現Respond.js script條目已經變成綠色。

最后，點擊頂部管理菜單中的外觀，將Bootstrap Barrio主題設為默認。然后點擊編輯按鈕，在Bootstrap Settings 》高級 》BOOTSTRAPCDN中，將BootstrapCDN版本設為停用，如下圖所示：

然后保存配置

四、總結

這樣Bootstrap Barrio主題的初步設置工作就基本完成了！之所以說是初步，是因為當設置好之后打開站點，會發現沒什么內容在上面，如圖所示：

所以接下一來我打算講講如何對首頁進行布局。enjoy, :)

本文轉自 firehare 51CTO博客，原文鏈接：http://blog.51cto.com/firehare/1421046，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的Drupal7主题初步设置篇-Ubuntu 14.04 LTS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。