專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面

喜歡裝潢門面的站長可能三不五時會有一點小困擾，在站內維護的期間，例如調整版面 CSS 配置、測試安裝某些外掛時，網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題，因為多半只影響不到一天的時間。

如果是網站大改版、或是更換新範本(模版)等，那問題可就大了，受影響的期間少至數天、多至一兩個星期都有可能。建設中的工地會用圍籬、帷幕遮蓋起來，我們也該替自己的門面維持一下形象，對吧？

最近 +Orsino Sung 提出了很好的問題，「部落格能否設定短暫關閉，讀者連過來會顯示"網站升級改版中或是維修中"等資訊」，且剛好有案主希望網站能建構完畢後再設定為公開，因此設計了本文的工具。以下先介紹功能及出處，想直接安裝請跳至「二、準備動作」。

點此看範例網頁

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

一、功能及「倒數計時」出處

1. 功能

網路上有一些付費工具，能讓網站在施工期間顯示「維修中」的頁面。不過這類程式的原理只適合有主機的自架站，在部落格平台並不適用，

WFU 設計的版本，在部落格平台只會向訪客顯示「維修中」的頁面，而站長的身份則可安心地進入施工現場。


2. 倒數計時功能



向讀者提示「維修期間」的資訊是必要的，才能知道何時該回頭拜訪網站，因此需要一個倒數計時的功能。本文工具採用了免費的「CountDown jQuery plugin」(連結已失效)，在這部分可省去造輪子的麻煩。


3. 寄 email 通知

雖然「CountDown jQuery plugin」提供了 email 通知的功能，讓站長可以在維修結束後，通知留下 email 的讀者重新拜訪網站。但該程式只適合自架站的環境(需要 php)，因此部落格平台的站長，若需要 email 通知的功能，WFU 可進行客製化處理(需要製作資料庫)，請用文末的表單聯繫。

二、準備動作

1. jQuery

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPDtLhYNep0PiJ60B1VZInRWSa2kFoRjI4VHTFGiCd7q-qmG6najMzTNUfaN3chnXecUDeco_yYhpYEpUnW0flrbaTnp5tLVOHKS6NPANdQ7LFuhAmLyo7aeJauM064zirmt_6XveMeVw/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 樣式、打造自己「維修中」頁面的特色。

只有一點需要特別提一下，在 #coverPage 的區間，有個紅色參數 1，這代表背景的透明度。1 為不透明，若改為 0 ~ 1 之間的數字例如 0.5，會可看到背景，也就是能些微看到網站的內容。

三、安裝程式碼

接著請搜尋範本中 <body...> 這行字串，找到後在此字串的下一行，插入以下程式碼：

以下參數修改請參照以上程式碼行號：

C：藍色圖片網址請改為自訂圖片網址，此為標頭圖案。

E：藍色字串請改為自訂標題

F：藍色字串請改為自訂敘述

C~G：這個區間全部的 HTML 碼也可自行設計，改造為自訂的頁面風格。

L~Q：這六個紅色參數代表倒數計時的期限，本文的參數代表截止日期及時間為 2014/11/29 00:00:00。

R~V：這五個藍色字串可改為自訂的字串，例如 "週"、"天"、"小時"、"分鐘"、"秒"。

Y：由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後，置換本行的綠色網址字串。


存檔後即可，只有訪客會看到這個「維修中」頁面，站長不會看到。想先看效果請前往範例網站：

點此看範例網頁

四、注意事項

1. 範本中盡量不要安裝不必要的程式碼，以加快網頁速度，因此請維修期間才安裝本文的所有程式碼。

2. 本文程式碼只適用 Blogger 平台，如有其他部落格平台需要此功能，需要另外寫判斷站長身份的程式碼。需要客製服務請用下面聯絡表單：

稱呼：(必填)

電子郵件：(必填)

本文標題或網址：(必填)

會員編號：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

更多實用工具：

• 本站使用的 Blogger hack 及工具整理