2014年11月16日

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

A+
喜歡裝潢門面的站長可能三不五時會有一點小困擾,在站內維護的期間,例如調整版面 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('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 樣式、打造自己「維修中」頁面的特色。

只有一點需要特別提一下,在 #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 平台,如有其他部落格平台需要此功能,需要另外寫判斷站長身份的程式碼。需要客製服務請用下面聯絡表單:



更多實用工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。