Drupal 7: 用 Zen 打造你專屬的佈景主題(範本;模版)

簡單記錄一下如何使用 Zen Theme 來打造一個自己的 Drupal 7 Theme。以下筆記的完整來源請參考 Zen Theme 整理的詳細文件內容。

//概念, 觀念
Drupal site 的 Theming Guide 是個好的開始。特別是最近 (August 26, 2011) 更新了一些文件，都整理得很棒！有助於初學者一步一步上手，例如這一頁「Overview of theme files」搭配顏色解說就相當容易抓到架構大方向。

//下載安裝 Zen 並建立 Sub-theme

• 下載：

  $ wget http://ftp.drupal.org/files/projects/zen-7.x-3.1.tar.gz
  

  
  （怎麼安裝？請參考這裡）
• （如何打造自己的 sub-theme？(7.x-3.x)）
  將 zen 目錄中的 STARTERKIT 目錄，複製到跟 zen 同一層目錄。（應該都在某一個 ./themes 底下，看你規劃的系統目錄架構。我是習慣放在 ./site/mysiteurl.com/themes/ 底下。）
  

  $ cp -R ./zen/STARTERKIT ./
  $ mv STARTERKIT your_theme_name

• 將自己 sub-theme 目錄中的檔案 STARTERKIT.info.txt 改名成和你剛才的目錄名稱一樣的檔案名稱開頭，並以「.info」結尾：
  

  $ cd your_theme_name
  $ mv STARTERKIT.info.txt your_theme_name.info

• 編輯 your_theme_name.info，將 "name = Zen Sub-theme Starter Kit" 改成你的 theme 名稱，例如 "name = Foo"。也將 "description = Read..." 改成你想要的 theme description。
• 編輯 function name：編輯這兩個檔案「template.php」「theme-settings.php」，將 "STARTERKIT" 用你的 sub-theme 名稱 "your_theme_name" 取代掉。
  

  $ sed -i 's/STARTERKIT/your_theme_name/g' template.php
  $ sed -i 's/STARTERKIT/your_theme_name/g' theme-settings.php

• ./your_theme_name/template 目錄下有一個 README.txt 可以讀一下。當中列舉了有哪些範本檔案可以做 overrides，將你需要的檔案從 zen/templates 或相對應的 modules/ 目錄抓過來放一份在你的 sub-theme 目錄下改一份你自己要用的，Drupal 7 會自動幫你做 overrides。

//其他

• 外部檔案，怎麼加入到 .info 呢？
  對於一些放在 CDN 上的外部資源檔案（stylesheets, javascripts, etc...）這些檔案沒辦法接寫在 your_theme_name.info 當中，得寫在 template.php 裡頭：
  參考 <Adding style sheets>、<How to add CSS files in Drupal 7>、<API: drupal_add_css>
  

        function mytheme_preprocess_html(&$variables) {
          drupal_add_css('http://fonts.googleapis.com/css?family=News+Cycle', array('type' => 'external'));
        }
  

Brought to you by