Drupal - 主題與佈局

---

---

在本章中，讓我們學習一下**主題和佈局**。Drupal 在安裝過程中會安裝**Bartik**主題作為預設主題。您可以從 Drupal 官方網站選擇付費或免費主題。一般來說，佈局是指文字和圖形的排列方式。選擇主題時，最好考慮在您的網站上使用不同的佈局。

**步驟 1** - 訪問Drupal 官方網站並點選**開始使用**。

**步驟 2** - 點選**所有主題**，如下圖所示。

**步驟 3** - 您將獲得一個主題列表。選擇您想要的主題（讓我們選擇**Adaptive 主題**，因為它包含**佈局和常規設定**，這將在本章後面介紹）並點選**版本**，如下圖所示。

**步驟 4** - 接下來，右鍵點選**下載檔案**並複製連結地址，如下圖所示。

**步驟 5** - 您也可以透過點選**檔案檔案**直接下載主題，模組將下載到您的計算機本地，如下圖所示。

**步驟 6** - 進入**外觀**並點選**安裝新主題**，如下圖所示。

**步驟 7** - 您可以在**步驟 (4)**中貼上您複製的連結地址，然後點選安裝按鈕，如下圖所示。

**步驟 8** - 如果您已下載主題檔案，則可以上傳主題檔案，而不是複製連結地址，然後點選**安裝**，如下圖所示。

**步驟 9** - 出現以下螢幕，請等待安裝完成。

**步驟 10** - 接下來，點選**啟用新新增的主題**，如下圖所示。

**步驟 11** - 預設情況下，主題是被停用的。要啟用它們，請點選**啟用並設定為預設**，如下圖所示。

**步驟 12** - 點選**設定**，如下圖所示，以設定您網站的外觀。

**步驟 13** - **佈局和常規設定**選項將出現在螢幕上，在這個**Adaptive 主題**中包含**標準佈局、平板電腦佈局、小型觸控佈局**和**面板和 Gpanel**。這些選項控制當前正在使用的 AT Admin 主題的顯示設定。當您的網站顯示主題時，將使用這些設定。現在，讓我們逐一討論這些佈局。

**步驟 14** - 在**標準佈局**中，您可以為桌上型電腦、筆記型電腦和其他大螢幕裝置選擇佈局。

• **選擇側邊欄位置** - 您可以透過點選單選按鈕選擇側邊欄位置。

• **設定每個側邊欄的寬度** - 您可以設定第一個側邊欄和第二個側邊欄的寬度，單位為 % 或 px 或 em。

• **設定頁面寬度** - 您可以設定頁面的寬度。

• **設定最大寬度** - 您可以選中或取消選中以設定最大寬度。

• **此佈局的媒體查詢** - 媒體查詢為不同的媒體裝置定義了不同的樣式規則，並且預設情況下此佈局將為**1025px**。

**步驟 15** - 接下來，點選**平板電腦佈局**，如下圖所示。平板電腦裝置將有兩個方向**橫向**和**縱向**。您可以為每個方向配置不同的佈局。

在**橫向平板電腦**和**縱向平板電腦**下，您可以選擇側邊欄位置、每個側邊欄的寬度和頁面寬度。**橫向平板電腦**的媒體查詢將為 min-width:769px 和 max-width:1024px。對於**縱向平板電腦**，它將為 min-width:581px 和 max-width:768px

**步驟 16** - 現在，點選**小型觸控佈局**，如下圖所示。**小型觸控佈局**也將有兩個方向**橫向**和**縱向**。您可以為每個方向配置不同的佈局。

在**橫向小型觸控**中，您可以選擇側邊欄位置並設定寬度。**縱向小型觸控**始終以一列顯示，側邊欄水平堆疊在主內容下方。**橫向小型觸控**的媒體查詢將為 min-width:321px 和 max-width:580px，而**縱向小型觸控**將為 max-width:320px。

**步驟 17** - 接下來，點選**面板和 Gpanel**，如下圖所示。Adaptive 主題支援響應式面板和 Gpanel 佈局。要使用此功能，您可以使用Panels 模組、Display Suite（帶 Panels）或 Adaptive 主題的原生Gpanel佈局。

您可以為每個裝置範圍選擇選項並佈局其型別。讓我們逐一看看。

• 在**標準佈局**下，您可以選擇在以標準佈局檢視網站時要使用的佈局。透過點選**TWO、THREE、FOUR、FIVE、SIX 或 INSET**，您可以選擇列的排列方式，如下圖所示。

• 對**平板電腦橫向、平板電腦縱向**和**小型觸控橫向**佈局執行相同的步驟。

**步驟 18** - 完成所有配置後，點選**儲存配置**，如下圖所示。