GShine V1.0 新佈景、新配色，全新上架！

發表時間： 2009-07-15

久違的新文章終於在昨天偷偷發文了，這半個月來香腸一直瞞著魷魚絲偷偷的在寫佈景、調佈景。經過上次的iNove大翻修，這回我們帶來了新配色以及新的網頁效果，讓各個瀏覽器瀏覽香腸炒魷魚時，效果差異變小，這次也盡可能的減少圖片與外掛用量，讓網站整體速度可以更快、效果可以更炫。

超過半個月沒發文的網站，草都長得跟人一樣高了。其實這半個月來我還是會偷偷來回覆一下大家的留言，只是沒有說很迅速就是了XD。其實會隔這麼久主要是因為暑假到了，可以每天打工，又加上我們加油站對面的那間中油拆掉了，整個生意變好，另外上員工一個個的走了，變成人手不足，幾乎天天要打工…囧！這半個月也不過兩天半的假期，所以每天打工回來只剩下一點力氣可以回留言和做佈景的一些調整，在此就跟大家說聲抱歉了Orz。(迷:繳學費的季節快到了….)

文章目錄

寫佈景的經過
GShine V1.0 架構和iNove一樣？
為什麼叫 GShine V1.0 ？
LavaLamp 滑動式分頁選單效果
Google 自訂搜尋功能
免外掛，在邊欄插入隨機文章、熱門文章
新增文章版權宣告
調用jQuery，將留言與引用分開
留言區加入會動的大數字
調用jQuery，讓留言區欄位自動隱藏
Ctrl + Enter 快速發表留言
利用模板產生交換連結
IE下的瀏覽狀況，方塊特效
底部去底圖，用背景色呈現
IE6的使用者趕快換瀏覽器吧！
佈景整體感覺如何？

寫佈景的經過

很久之前就想要自己試著寫出佈景，曾爬了一些網路資料，不過好像都有看沒有懂，所以我就去官方載了一個看起來很簡單的佈景，又是我想要的架構，然後就看著佈景原始檔，研究那些WordPress的一些PHP函式，然後自己新增空白文字文件，慢慢的將那些程式碼KEY上去。

當然這時候基本的畫面出來了，但是仍舊沒有樣式(CSS)，所以就開始參考我上一個自己大改版的iNove佈景，參考他的CSS，然後再去佈景的PHP檔案內慢慢的將每個區域CSS要用的id或者是class把他們用div設定好，接著再用Firebug測試，將所需的CSS語法加到style.css上，當然最重要的就是要配合IETester來替IE各版本進行CSS的瀏覽器校正，最後才會有現在這個樣子。

當然寫佈景時有遇到一些程式的怪問題，除了自己爬文之外，當然也要感謝一下長期以來每問必答的風痕影，謝謝他幫我解決程式與佈景CSS的問題，當然也要謝謝他提供給我的Firefox圓角CSS語法XDD。

GShine V1.0 架構和iNove一樣？

本站第一個放出消息網站佈景更新的訊息應該是噗浪上，當然噗之下看到很多人回應，大家的第一個想法應該是「只是配色不一樣？」。因為我自己很喜歡這樣排版的架構，所以當初才會看上iNove這個佈景，所以如果是我自己要用的佈景，寫的架構應該就是這樣成型了。我喜歡的模式就是左上角可以擺LOGO，LOGO之下是一橫排的分頁按鈕，再來左邊是文章，右邊是邊欄，而邊欄最好可以是中間欄可以瘦一點，因為我可以塞好站連結與分類，所以我怎麼改都會和原佈景架構一樣XD。

這次的GShine V1.0主要就是參考我上一版的iNove，根據原本的CSS設定重新整理，然後再自己定義一些新的東西。當然這次我也已經去圖化，把所有跑圖的地方全部用CSS的背景顏色控制，不過還是有少部分採用圖，盡可能的減少圖片使用，除了可以減低流量消耗，當然還可以加速網站。

為什麼叫 GShine V1.0 ？

因為我目前和其他朋友在規劃一些東西，那是什麼東西呢？這就有請吳克群唱「什麼東西」，相信他會替您解答的！目前我們還是在低調進行，反正真相只有一個，到時候問柯南或是毛利小五郎你就知道了。

LavaLamp 滑動式分頁選單效果

先前分頁按鈕只是單純滑鼠移過去可以換背景色，這回改成滑動式按鈕，這個滑動按鈕的寫法則是參考mg12的這篇文章，這個功能是採用jQuery的效果。不過他本來是跑圖片，但是跑圖片在IE6瀏覽會有延遲的問題，所以我就將他改成背景色塊解決延遲問題。

因為Firefox有CSS語法可以設定成圓角，但是IE無法讀取那種語法，所以在IE下看就變成一塊塊的，不過還是會滑動就是了XD。

Google 自訂搜尋功能

一直以來我的站內搜尋都是採用Google搜尋，因為他的搜尋精準度比WordPress內建的還要高，這也就是我每一版的佈景都是採用Google當成站內搜尋。不過上一版的佈景不知道什麼原因，採用Google自訂搜尋時，顯示的搜尋結果無法正確呈現在分頁中，所以之前採用「Google Ajax Search 」，但是這個搜尋結果顯示方式雖然很酷，不過缺點就是一開始載入搜尋框時會很卡，因為這次佈景架構自己摸過，所以這次可以正確使用「Goolge 自訂搜尋功能」。

免外掛，在邊欄插入隨機文章、熱門文章

為了落實網站加速的目的，我盡可能的免去外掛的使用，盡量採用內建的PHP函數呼叫一些外掛可以做到的事情，因此就參考了muki這篇「不用插件直接實現五種文章代碼」，將隨機文章、熱門文章直接寫入邊欄，採用內建的函數可以加速網站的運作。

新增文章版權宣告

有鑑於大家都把每篇文章誤認是香腸發文，常常害我哭笑不得，大家不要忘記了，網站上還有另一位寫手，他叫做魷魚絲，請大家跟我念一遍：魷.魚.絲！(迷:這個講法怎麼跟muki的是.意.外很像XD)

之前每篇文章都會在左下角加上小小的作者字樣，不過我發現好像很少人會去注意，所以這次就把它整個加大，並且加入文章授權分享規則，來讓大家更清處的了解本站的分享原則以及文章作者到底是誰Orz。

調用jQuery，將留言與引用分開

留言區最討厭的就是留言和引用混在一起，有時候會分不清楚哪則是引用哪一則是留言，如果回錯了會很囧。所以參照先前iNove的設計，將留言和引用分開，不過先前是採用點擊方式才可以切換到另一邊，這回滑鼠移過去就可以自由在留言和引用間徘徊喔！留言分開是參考mg12的「WordPress 2.7 Trackbacks 的兩種處理方法」，切換功能是參考阿諾的「調用jQuery特效實作(Tab控件篇)」。

留言區加入會動的大數字

雖然這不是什麼特別的東西，因為我之前就有放了，只是字體小了些，這回特地把它改的大大的，讓他感覺很像印在上面的，而且還調成滑鼠移過去會變動，當然加入這些數字主要是參考重灌狂人的「讓你的WordPress留言板顯示第1樓、第2樓…的留言統計數字」。

調用jQuery，讓留言區欄位自動隱藏

只要你有在本站留言過，留言區的欄位將會自動被隱藏，這種功能第一次見到應該是在iNove，不過這次GShine V1.0並沒有移植原本iNove的寫法，而是採用jQuery的特效，參考阿諾的「調用jQuery特效實作(隱藏迴響欄位篇)」，讓留言區欄位可以自動隱藏，展開時可式滑動展開唷！

Ctrl + Enter 快速發表留言

習慣使用論壇的朋友應該很熟悉Ctrl + Enter可以快速發表文章或是留言，其實這只是一串Javascript，加在留言區就可以了，不過前一個iNove佈景我有試著加入，但好像都失敗XD。這個功能是參考about Dogg的「WordPress Hack：快速鍵 Ctrl + Enter 送出留言」

利用模板產生交換連結

一開始就有提到這次的佈景就是要減少外掛的使用，所以交換連結頁面我採用製作模版的方式，免去使用外掛，直接用內建的PHP函數呼叫資料庫內的連結資料並顯示在網頁上。

IE下的瀏覽狀況，方塊特效

因為我使用很多原角的CSS在網站上，不過這種語法在IE下看是完全無效的，所以若您是IE的使用者，看不到我用CSS設定圓角的部分。

底部去底圖，用背景色呈現

之前底部是採用一張寬度900多px的圖，當然採用圖片效果看起來會比較棒，不過圖片真的比較吃流量又會拖速度，所以我改成使用背景色去呈現底部的效果，當然為了和網站正上方的原角做呼應，我一樣使用CSS控制底部的圓角，所以Firefox的使用者可以清楚看到網站最底下是原角。但先前說過，那種CSS在IE下無法解讀，所以IE的使用者看本站最下方footer部分應該是看到方角。

IE6的使用者趕快換瀏覽器吧！

最近傳出好像好幾個大網站未來不再支援咱們XP內建的IE6瀏覽器了(就是你上網前要按的那顆藍藍的球，英文字母小寫e)，在重灌狂人那邊發現了好用的語法可以在IE6的瀏覽器上特別顯示警告標示，於是就參考狂人的「在網站加入警告標語，建議IE 6.0的使用者升級！」，自己新增CSS去顯示提示訊息，告知親愛的IE6使用者，你們該換瀏覽器了！在此我還是比較推薦使用Firefox。

佈景整體感覺如何？

最近看到muki把新佈景上架了，害我也手癢癢趕快將這次的GShine V1.0上架。這次佈景上架後為什麼沒有馬上發文呢？因為我比較龜毛，佈景上架了之後，當然首先就是先看看各個頁面是否顯示正確？語法有沒有錯誤？趕緊進行校正，不過當我校正完後，發現已經晚了，所以就先睡覺了。然後不知不覺過了兩天，趁著難得的放假開始把文章補完，以及把一些該做得事情完成XD。

這次配色主要是灰色系，感覺不會有黑色的壓力也不會有白色的刺眼，在瀏覽器相容性部分應該也處理的差不多，大致上都可以正常瀏覽，目前測試在Firefox、IE6、IE7、IE8、Google Chrome都可以正常瀏覽與操作，如果您有發現Bug或者是覺得哪裡配色很怪，都可以在下方留言給我們，我們會盡可能的調到大家都適應的效果。