前端框架安裝 - Drupal bootstrap barrio

Submitted by admin on Sun, 12/29/2019 - 12:37

這篇文章會帶著大家走過自製主題的第一步,安裝一個Bootstrap前端框架。

 

1.Bootstrap是什麼

Bootstrap是Twitter出來的一款開源前端套件,可以讓我們更容易的做出網頁的各種特效。

用文字可能很難描述這之中的差異,我們用網頁上的按鈕來當作例子。

下面是一排渲染過的按鈕的例子,來自Bootstrap網站的範例。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

 

這些按鈕在沒有經過bootstrap渲染之前,最原始的html標籤所呈現出來的模樣是下面這樣的,

<button type="button">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Danger</button>
<button type="button">Warning</button>
<button type="button">Info</button>
<button type="button">Light</button>
<button type="button">Dark</button>

外觀上看起來差很多吧,但兩者的html標籤裡面只差了一個class戳記,這些戳記所套用到的渲染方式就是bootstrap提供的。

 

2.如何安裝Bootstrap到Drupal上

我們在這邊介紹一個叫做barrio bootstrap的Drupal主題(theme),

安裝方式非常的簡單,在網頁資料夾目錄下執行

$ composer require drupal/bootstrap_barrio

 

barrio主題與平常隨裝隨套的主題不太一樣,這個主題的功用是提供一個模板給這個主題衍生出的子主題(subtheme)。

我們可以在衍生出來的subtheme主題當中任意的編輯我們的排版與CSS。這麼做的好處是當我們在subtheme所撰寫的樣式的時候,撰寫的範圍不需要涵蓋到整個網站。當需要使用到我們沒有在subtheme中定義的排版或是CSS時,Drupal會沿用原本barrio主題的配置。

正因為barrio主題有作為子主題模板的功能,因此無論何時,我們都不應該直接編輯barrio主題內的樣式。

 

3.如何建立一個subtheme

安裝完barrio主題後,進到/themes/contrib/barrio底下,執行下面這段命令

這份腳本的大意是把所有需要的文件從barrio主題本體裡面複製出來並用輸入的subtheme的名稱重新命名。

# Make script executable.
chmod +x scripts/create_subtheme.sh

# Run script with interactive prompts.
# Run from theme root, e.g. "themes/contrib/bootstrap/barrio".
./scripts/create_subtheme.sh

script運行過程中會要求我們輸入子主題名稱以及對應的machine name,結束後我們就可以到/admin/appearance內去啟用我們的subtheme了。

我們可以在管理員列表中Appearance裡面,捲動到最下方的Uninstalled themes裡面找到我們剛剛由script產生的subtheme,點選install後這個subtheme會出現在Installed themes欄位底下,點選Set as default或是透過Switch page theme 模組啟用即可。

這邊要注意一下,安裝barrio時裡面會帶有一個預設的subtheme,這個subtheme的功能是作為script複製的模板。我們在這個步驟要選擇的是script產生的輸出而非原稿,注意選擇的時候不要選錯了。命名的時候給予一個特別一點的名稱可以有效避免這個問題。

barrio的好處就是內建了使用者介面為主題設定提供了相當便捷的操作性,我們甚至可以直接透過網頁操作更改主題的顏色!

在/admin/appearance點擊所啟用子主題的Setting標籤進入管理頁面,這裡有非常多的選項可以讓我們初步客製化我們的主題。第一步示範操作可以把Bootstrap Settings > Layout > Container > Fluid container的選項打勾,回到主頁面應該能看到畫面邊界有了相當不一樣的改變。

在之後的文章中我們會基於目前的subtheme架構去一步步的編輯模板與CSS來客製化我們的網站頁面。在這個過程中清除快取clear cache是相當重要的一步,我們可以在/admin/config/development/performance頁面中按下按鈕或是下drush cr命令達成這一點,有前端的任何改動卻沒有出現在頁面上的話請不要忘了這一點。