您會不會覺得山頭圖擺太久會膩，隔一陣子就會想換另一張？如果我們可以讓山頭圖在每次進入網頁的時候，不管是在首頁，或者是看文章、看相片，山頭圖都會自動隨機更換，相信這樣的山頭圖呈現效果肯定百看不膩。

這篇算是這幾天研究下來的筆記，我想對於大多數udn的格友恐怕會視為畏途。但如果有興趣，底下的程式碼就請自行取用(雖然有些也是網路找來的，並非我的原創)。

比較熟的格友知道我有另一個經營得更久的部落格「需仁的旅遊與心情點滴」，當年在參考各家BSP的優劣之後，決定自己申請虛擬主機以及domain，以f2blog為平台建置這個部落格。好處是f2blog操作相當容易上手，非常可惜的是後續經營無力，現在好像孤兒一般。現在自架的平台比較大宗的就是WordPress，現在當然是已經沒有精力繼續玩。

原本我沒有成立第二個部落格的打算，加入udn純粹只是為了回應阿喵的部落格文章。後來發覺自己原有的部落格文章太雜，加上之後跟朋友們玩每日一拍，有經營第二個部落格的必要，才開始經營udn的部落格。

言歸正傳，css是樣式語法，也就是把圖片、文章區塊、背景、欄位區塊等等放在應有的地方。所以不屬於css樣式的語法是不可以放在裡面的。比方說javascript(js)的語法或者是php、asp等等程式語法，直接放在css裡面都是不被允許的。

我不是很喜歡用js，因為可能會在不同的BSP平台，或是用不同的瀏覽器瀏覽網頁的狀況之下，會有完全不同的呈現結果。這些問題雖然不是不能解決，但不是我的程度可以處理的，因此我選擇使用php程式。

首先請先準備好若干張的山頭圖，這些山頭圖的規格務必一致。然後將這些山頭圖上傳到某個屬於自己的網頁空間(以我來說，就是上傳到自己的虛擬主機)。網頁空間可以申請，google一下「網頁空間 申請」之類的關鍵字可以找到很多資訊，國內的話hinet、智邦等等都可申請，國外則也有一些免費網頁空間可申請。

為什麼不建議udn的相本與相片，底下會有說明。

接著開啟任何能夠編輯網頁的編輯器，不管是dream-weaver、frontpage、或者是記事本(Notepad)，然後複製以下的程式碼，完成後請存檔。檔案名稱自由使用英文與數字，也可使用底線等等，但是副檔名一定是php，比方說我存的檔案名稱是「udn_headerimages.php」。

如果是用Notepad編寫，存檔的時候記得不要存文字檔，而是要存成unicode，切記。

$url='./udnheaderimages';

$files=array();
if ($handle=opendir("$url")) {
    while(false !== ($file = readdir($handle))) {
          if ($file != "." && $file != "..") {
          if(substr($file,-3)=='gif' || substr($file,-3)=='jpg') $files[count($files)] = $file;
          }
    }
}
closedir($handle);

$random=rand(0,count($files)-1);
if(substr($files[$random],-3)=='gif') header("Content-type: image/gif");
elseif(substr($files[$random],-3)=='jpg') header("Content-type: image/jpeg");
readfile("$url/$files[$random]");

?>

剛剛說到為什麼不建議udn的相本，主要是因為udn的相本網址點開之後，相片的網址不會跟著相本網址走，上述語法當中，「$url='./udnheaderimages';」指的是相本網址，「$files=array();」指的是相本網址「目錄」底下的所有相片。底下舉個例子來說：

我建立一個山頭圖的相本：http://album.udn.com/jac3158/408008

但是其中一張相片的網址：https://g.udn.com.tw/upfiles/B_JA/jac3158/PSN_PHOTO/798/f_9409798_1.jpg

這代表「*.jpg」的影像檔並不在「./jac3158/408008」這個資料夾底下，所以把語法改為$url='http://album.udn.com/jac3158/408008';，相片資料夾的指向一定會是錯的，所以我比較建議將這些山頭圖放在另外的網頁空間。

這裡我把「

$url='./udnheaderimages';」語法設定成相對路徑，而非http開頭的絕對路徑主要是來自於個人習慣。萬一網頁空間要搬家，如果寫成絕對路徑，那每搬一次家就要改一次語法也很麻煩，用相對路徑就不會有這個問題。畢竟這些山頭圖是跟著網頁空間走，不會因為開啟任何一個平台的部落格，就會找不到連結路徑。

最後一個步驟，請到新版部落格的管理中心，在管理選單當中選擇「模版與欄位套件」，再選擇「模版設定-完全設定」，就會出現css樣式，找到#header_body之後，將background改成以下語法(改紅色部分就好，其他部分就照自己原有部落格的設定)。

#header_body {
 background: url(網頁空間絕對路徑/udn_headerimages.php) no-repeat;
 height: 190px;
 width: 910px;
 margin: auto;
 padding: 40px 45px 20px;
}

原先我們的background指向的是相本中的某個相片連結，在這裡我們指向剛剛php程式所在的位置。這是udn的樣式庫，指向的是存放在網頁空間，所以請務必使用絕對路徑，也就是完整的網址。

寫了這麼多，其實只有幾個步驟：

1.申請網頁空間(不是部落格或者是主機，只要是網頁空間就可以了)。
2.在網頁空間開一個資料夾(比方我的是「udnheaderimages」)上傳山頭圖到網頁空間。
3.撰寫php，存檔後上傳到網頁空間。
4.回到udn管理中心，在css的#header_body，把山頭圖網址改成php網址。
5.山頭圖上傳數量沒有限制，但長寬規格務必一致。

這個工程看起來很浩大，但真正的關鍵其實只有申請網頁空間以建立相對與絕對路徑，其他比方php語法或者是css樣式都放在這邊供大家自行取用，應該不會有太大的問題。有任何建議，也請留言告知改進。