之前在摸索 jQuery 時，發現可以透過它來動態切換版面的 CSS 樣式，達到類似佈景主題的效果。其中，有位網友寫了一篇文章教人們怎麼去使用，並建立一個 demo 的站台。這個玩意兒看起來滿有趣的，當時在天空部落摸索了一陣子後，做出類似下面的效果。
選擇佈景主題
切換不同版面


看起來似乎還滿有趣的，其實做法很簡單，只要幾個小步驟。

• 準備好你所要的 CSS 樣版檔 (*.css )，上傳至網路空間中 (如：google page 或文章附檔...等等)
• 將下面這段 javascript 加入你的網站中。

<-- 引入 jquery 核心，若您的網誌中已有使用 jquery，請忽略這行 --> <script type="text/script" src="http://jquery.com/src/jquery-latest.pack.js" --> </script> <-- 主要的 JavaScript 程式碼 --> <script type="text/javascript"> var isRememberStyle = false; // 是否要用 Cookie 記憶使用者所選擇的版面 if( isRememberStyle) { var c = readCookie('style'); if (c) switchStylestyle(c); } function switchStylestyle(styleName) { $('link[@rel*=style][@title]').each(function(i) { if( this.getAttribute('href') != "http://pics.blog.yam.com/css/standard.css") { this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; } }); if(isRememberStyle) createCookie('style', styleName, 365); } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < c =" ca[i];" c =" c.substring(1,c.length);" style="color:darkgreen;"> <-- 指定 CSS 的網路位置 --> <link rel="alternate stylesheet" type="text/css" href="http://ressol.googlepages.com/Autum2.css" title="css1" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="http://ressol.googlepages.com/Crane.css" title="css2" media="screen" /> <link rel="alternate stylesheet" type="text/css" href="http://ressol.googlepages.com/CSS3.css" title="css3" media="screen" /> <-- 佈景切換器 --> <select onchange="switchStylestyle(this.options[this.selectedIndex].value);"> <option value="css1">原野夕陽</option> <option value="css2">中國風情</option> <option value="css3">悠閒海灘</option> </select>

說明：

• 使用天空部落格的朋友，要先跳過天空的標準 CSS，別讓程式去處理他
• 各個 CSS 樣版請換成您自己的檔案位置

小技巧： 如果你與小弟一樣，對網頁版面樣式設計並不在行，那你可以考慮到天空的的後端管理介面的樣版管理，挑選、套用美觀的樣版後： 檢視瀏覽器的原始碼 把對應的 CSS 下載回來 ( 如：<link id="css" href="CSS 檔案位置" rel="stylesheet" type="text/css" />) 把下載回來的 CSS 檔案上傳至網路空間。 這樣子，你就有多個不同的樣版，讓訪客可以依心情挑選自己喜歡的佈景了

其他： 這個小工具的原理應該可適用於其他國內的部落格系統，如：無名、Pixnet、樂多 ... 等等，做法與修改的地方差不多，但你的部落格必須要允許 javascript 功能才可以。(無名免費會員、Yahoo 就不行了 v_v )