喜歡裝潢門面的站長可能三不五時會有一點小困擾，在站內維護的期間，例如調整版面 CSS 配置、測試安裝某些外掛時，網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題，因為多半只影響不到一天的時間。如果是網站大改版、或是更換新範本(模版)等，那問題可就大了，受影響的期間少至數天、多至一兩個星期都有可能。建設中的工地會用圍籬、帷幕遮蓋起來，我們也該替自己的門面維持一下形象，對吧？
最近 +Orsino Sung 提出了很好的問題，「部落格能否設定短暫關閉，讀者連過來會顯示"網站升級改版中或是維修中"等資訊」，且剛好有案主希望網站能建構完畢後再設定為公開，因此設計了本文的工具。以下先介紹功能及出處，想直接安裝請跳至「二、準備動作」。
<< 請注意！本篇文章含會員限定內容 >>
一、功能及「倒數計時」出處
1. 功能
網路上有一些付費工具，能讓網站在施工期間顯示「維修中」的頁面。不過這類程式的原理只適合有主機的自架站，在部落格平台並不適用，
WFU 設計的版本，在部落格平台只會向訪客顯示「維修中」的頁面，而站長的身份則可安心地進入施工現場。
2. 倒數計時功能
向讀者提示「維修期間」的資訊是必要的，才能知道何時該回頭拜訪網站，因此需要一個倒數計時的功能。本文工具採用了免費的「CountDown jQuery plugin」，在這部分可省去造輪子的麻煩。
3. 寄 email 通知
雖然「CountDown jQuery plugin」提供了 email 通知的功能，讓站長可以在維修結束後，通知留下 email 的讀者重新拜訪網站。但該程式只適合自架站的環境(需要 php)，因此部落格平台的站長，若需要 email 通知的功能，WFU 可進行客製化處理(需要製作資料庫)，請用文末的表單聯繫。
二、準備動作
1. jQuery
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」，搜尋
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 網站維修中 及倒數計時*/
#coverPage {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(47,99,135, 1);
}
#underConstruction {
text-align: center;
width: 75%;
padding: 20px;
background: #fff;
margin: 50px auto;
}
.construction_img img {
max-width: 100%;
}
.construction_title {
color: #666;
margin-top: 20px;
font-size: 40px;
font-weight: bold
letter-spacing: 12px;
}
.construction_title span {
border-bottom: 2px solid #666;
padding-bottom: 2px;
}
.construction_desc {
color: #333;
font-size: 30px;
margin: 20px auto 40px;
}
#countdown_dashboard {
height: 110px;
margin: 20px;
}
.dash {
width: 110px;
height: 114px;
background: transparent url('http://2.bp.blogspot.com/-dEcieQnffks/VGcQZr8k6nI/AAAAAAAAKis/MqqFhuQyWWA/s1600/dash.png') 0 0 no-repeat;
display: inline-block;
margin-left: 20px;
position: relative;
}
.dash .digit {
font-size: 55pt;
font-weight: bold;
float: left;
width: 55px;
text-align: center;
font-family: Times;
color: #555;
position: relative;
}
.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 6px;
font-size: 9pt;
color: #555;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>第一行可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。
2. CSS 樣式
如果對 CSS 熟悉的讀者，可自行修改 CSS 樣式、打造自己「維修中」頁面的特色。
只有一點需要特別提一下，在
三、安裝程式碼
接著請搜尋範本中
<< 請注意！以下為會員限定內容，請先加入會員>>
請先加入會員
以下參數修改請參照以上程式碼行號：
C：藍色圖片網址請改為自訂圖片網址，此為標頭圖案。
E：藍色字串請改為自訂標題
F：藍色字串請改為自訂敘述
C~G：這個區間全部的 HTML 碼也可自行設計，改造為自訂的頁面風格。
L~Q：這六個紅色參數代表倒數計時的期限，本文的參數代表截止日期及時間為 2014/11/29 00:00:00。
R~V：這五個藍色字串可改為自訂的字串，例如 "週"、"天"、"小時"、"分鐘"、"秒"。
Y：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流。
存檔後即可，只有訪客會看到這個「維修中」頁面，站長不會看到。想先看效果請前往範例網站：
四、注意事項
1. 範本中盡量不要安裝不必要的程式碼，以加快網頁速度，因此請維修期間才安裝本文的所有程式碼。
2. 本文程式碼只適用 Blogger 平台，如有其他部落格平台需要此功能，需要另外寫判斷站長身份的程式碼。需要客製服務請用下面表單聯繫：
更多實用工具：