Dreamweaver轉檔Drupal6.14

Dreamweaver轉檔Drupal6.14：2010年01月08日星期五
適用於：Drupal初學者，想更改Drupal theme外觀 的人，對CSS有興趣的人，對PHP有興趣的人，以前用Dreamweaver的人，以前用其他Blog CMS的人。本文用Drupal6.14，詳見本文的環境。
問題是：

在dreamweaver上原有的檔案該如何轉到Drupal 6.14上呢？這個問題的重點是：

1. 用dreamweaver，有個方便處，所有的連結是用相對路徑(relative path )，見下圖，4664-2009-08-20.htm是篇文章，文中有個iPhone的照片，該照片是用html的img tag放到文中(見上方24行反黑處)，仔細看24行，其中src="../sites/default/files/images/iphone/2009-08-20-hellopworld.jpg"，也就是照片2009-08-20-hellopworld.jpg存放在../sites/default/files/images/iphone/2009-08-20-hellopworld.jpg，這是個相對於文章4664-2009-08-20.htm的資料夾../sites/default/files/images/iphone/內。
2. 同理，如果連結到自己的其他文章，用"a tag"時，其中的href也是相對路徑(relative path )。例如：href="4664-2009-08-30.htm"。
3. 不用Drupal這種"動態架站"，用Dreamweaver架"靜態"的站就是如此這般的，在靜態架站時，用相對路徑(relative path )很方便，設一個資料夾，將一篇篇文章及照片、影音..全放進去，就可以直接從dreamweaver上傳一篇篇文章及照片、影音..到自己的"靜態網站"了(也可以用filezila或其他的ftp上傳軟體)。上傳後，所有的相對路徑(relative path )自動生效。
4. 因為dreamweaver很好用，因而，寫部落格都用dreamweaver來當編譯器(也就是當作WORD使用)，並且將所有文章及照片、影音...全集中於一個資料夾，維護著"靜態網站"的結構，也就是說，不需要xuite、無名..等等CMS，阿羯的部落格在電腦內是自成一體的"靜態網站"。使用xuite、無名..等等CMS，則將dreamweaver做好的文章貼到部落格上，照片、影音另外上傳。但是這種方法十分麻煩，因為部落格是一篇篇的文字，，所以將dreamweaver做好的章貼到部落格後，還需將照片、影片重新再到部落格後台去上傳一次、並重新連結新的URL。

用Drupal，能否維持dreamweaver原來的相對路徑(relative path )？因而，不需重新再到後台去上傳一次、並重新連結新的URL？
答案是可以！轉檔作法在此。

 

轉檔方法如下：
(一)先看Drupal檔案結構，見下圖，Drupal使用者的檔案分為"文件檔"和"其他檔案"，所謂的其他檔案指的是照片、影音、flash...等等，"文件檔"在Mysql資料庫內，"其他檔案"在htdocs/drupal/sites/default/files資料夾內，目前files資料夾內有color、ctools、flash、images等子資料夾，color、ctools應是Drupal模組加入的，flash、images兩資料夾是我加入的。

(二)知道了drupal檔案結構，將dreamweaver檔改成類似的結構，見下圖，將文字檔放在iPhone-SDK資料夾內(不一定要用iPhone-SDK這個名稱，可以用任何名稱)，與iPhone-SDK資料夾同一層，建立同Drupal檔案結構的sites/default/files資料夾，建立flash、images兩資料夾，將flash放入flash資料夾，照片放入images資料夾，注意一點：上述移轉檔案至iPhone-SDK資料夾、flash資料夾、images資料夾一定要在dreamweaver內執行，千萬別在windows用copy/paste或移動檔案，因為dreamweaver有自動調整相對路徑(relative path )的功能，如此，我們才不需到所有的檔案內去找連結("a tag"、"img tag"、....)、及一個個修改，而能輕鬆地由Dreamweaver轉檔至Drupal6.14，靠的就是這個自動調整相對路徑(relative path )功能。

(三)將dreamweaver結構內sites/default/files資料夾的flash、images資料夾copy至Drupal檔案結構內的sites/default/files資料夾。
(四)將dreamweaver結構內iPhone-SDK資料夾"文件檔"用<建立內容>逐個加入Drupal內，我是做一本手冊，所以用<建立內容><手冊>，以dreamweaver結構內4664-2009-08-20.htm這一篇文章為例，見下圖，重要的是，將<網址路徑設定>設為node/4664-2009-08-20.htm，看來有些奇怪，為何要加個node/？原理在這裡。

(五)Dreamweaver轉檔Drupal6.14的原理解說：

1. 如上(一)~(四)所述，可以很快將Dreamweaver轉檔至Drupal6.14，主要是要保證相對路徑(relative path )問題可以解決，所以用了<網址路徑設定>設定網址別名，但是為什麼網址別名設為node/4664-2009-08-20.htm、而非4664-2009-08-20.htm？加了個node/是因為Drupal在顯示內容文章時是以node/node-id形式，一定會有個node/，例如，http://localhost/drupal/node/1，注意看Drupal檔案結構的圖，Drupal資料夾之下並沒有node這個子資料夾，但是只要在Drupal顯示內容文章，一定是node/node-id方式，有node/這個假資料夾。
2. 在4664-2009-08-20.htm文章中用到照片2009-08-20-hellopworld.jpg時，不能直接用"sites/default/files/images/iphone/2009-08-20-hellopworld.jpg"必需有../，必需是src="../sites/default/files/images/iphone/2009-08-20-hellopworld.jpg"(見相對路徑)，因為文章4664-2009-08-20.htm是在http://localhost/drupal/node/內的某個id，而node/是個假資料夾，根本不存在，也就是說根本不可能有http://localhost/drupal/node/sites/這個資料夾，因而不可能有"sites/default/files/images/iphone/2009-08-20-hellopworld.jpg"，為了解決這個問題，在安排dreamweaver結構時，需做出一個相當於node/的資料夾，以我們所做dreamweaver結構的例子，就dreamweaver結構圖內的iPhoneSDK資料夾，所有的文章檔案(例如：4664-2009-08-20.htm)都放在此，同時dreamweaver結構圖內有sites資料夾，因為iPhoneSDK資料夾、sites資料夾在同一階層，，因而iPhoneSDK資料夾中的4664-2009-08-20.htm文章裡想連結"sites/default/files/images/iphone/"中的照片2009-08-20-hellopworld.jpg時，自然得先往上一層(../)，才能到達sites資料夾，形成了src="../sites/default/files/images/iphone/2009-08-20-hellopworld.jpg"，轉檔入Drupal時，正好是我們所需要的。

(六)會出現的一些錯誤：

1. 試試看依上法做一個文章並用相對路徑(relative path)連到sites資料夾內的圖片，接著Click<預覽>，會發現看不見sites資料夾內的圖片，看一下URL，發現是http://localhost/drupal/node/55/edit(以4664-2009-08-20.htm文章為例)，多了個/edit，因此可知相對路徑(relative path )問題就發生了，所以，文章內有相對路徑(relative path)時，<編輯><預覽>時不正確。
2. 另有一個情形也會使文章內的相對路徑(relative path)無法正確，用<內容管理><內容類型><手冊><回應設定><回應填寫表單的位置>下勾選<在獨立的頁面顯示>，當使用者Click<增加新的回應>後，會發現看不見sites資料夾內的圖片，看一下URL，發現是http://localhost/drupal/comment/reply/55#comment-form，並非http://localhost/drupal/node/node-id，相對路徑(relative path )問題就發生了。解決之道是<回應填寫表單的位置>下勾選<在文章或回應下方顯示>。
3. 其實，用了相對路徑(relative path)，<回應>是最大的敵人，任何地方有<回應>紐，一按，文章內的相對路徑(relative path)就無法正常了(這是因為<回應>頁面仍會顯示原來的文章內容，但是並非是用http://localhost/drupal/node/node-id型式，這個問題不知如何解決？
4. <回應>的<預覽>也會讓相對路徑(relative path)不work，這個這個問題也不知如何解決？
5. ......

希望知道解決方法的人不吝在此留言。
(七)本問題的其他答案：

wu024365在drupaltaiwan.org上曾問：大量html靜態網頁如何與Drupal結合？，charles提供了答案 --> Import HTML，看來是可以，讀了內容及case study，但是我不太敢用，原因是其中有不少東西是dos command、unix command...，不是忘了就是看不太懂的，可以慢慢查，但是可能更費力。不過，charles的答案 --> Import HTML，對於非常多的html轉檔至Drupal，應是一條好的指引。

 
本文的環境是：

1. Drupal 6.14。
2. apache server設在Windows XP上，以http://localhost/drupal為例。
3. 所有的檔案在c:/xampp/內，以下的路徑均相對於c:/xampp/。
4. 各檔案均用vim editor打開，行數以vim內的行數為準。