2013年5月1日 星期三

讓 Blogger 有快速載入的展示(DEMO)頁面

讓 Blogger 有快速載入的展示(DEMO)頁面

Wayne Fu 0 A+

(Pic from: midches.com)
有時我們可能需要一些「展示頁面」,來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「文章列表」),這樣的頁面最好能載入速度快,頁面上只需要出現 DEMO 的主題,不需要出現側邊欄、其他小工具。因此,在 Blogger 開一篇新文章當作 DEMO 頁面不會是個好選擇,因為 Blogger 的每個頁面都會顯示側邊欄、小工具等等,除了主題混亂、速度也慢。

比較恰當的選擇是找個能放置 HTML 檔的網頁空間,來當作 DEMO 頁面,例如「Dropbox」、「Google Drive」等。只不過,這樣的方案有其不便之處:
  • 不是每個人都熟悉 HTML 架構
  • 需要自行設計 HTML 檔的版面樣式
  • HTML 檔沒有設計部落格 logo 的話,可能會被直接盜用

因此,我的構想是,能否在 Blogger 開一篇「新文章」,就能實現簡便的「展示(DEMO)頁面」?以下照例先說明原理,想直接安裝此功能請跳到「二、安裝程式碼」。可點以下網頁看效果:



2013.5.18 補充

+Mark X 於【留言 #01】表示「或者也可以使用該篇的行動版網址當作DEMO, 比較容易」,這也是個好方法,可以在網址後面加上 "?m=1" 即可成為行動版網頁,當成 DEMO 頁面──

優點:方法簡便
缺點:文章後面會有其他訊息、版面顏色配置比較簡單。

可按這兩個連結「本文展示頁面」、「行動版」比較兩種效果。


一、製作原理

1. 概念

要讓一篇「新文章」能變成 DEMO 頁面,必須做到以下幾件事:
  • 只留下文章內容,去除文章上方、下方的所有區塊(導覽列、文章資訊、留言區塊等等)。
  • 去除側邊欄區塊。
  • 去除底部區塊、版權宣告等。

要做到以上幾件事,可利用 CSS 將要刪除的區塊隱藏起來,接著一一刪除區塊,最後將文章區塊的部分用 jquery 把 DOM 搬移、擴張成為全部的版面。


2. 執行

為了讓指定的文章才執行以上步驟,必須設定一個開關。例如設定特定標籤、或在文章網址加上特定字串,用 js 檢查網址含特定文字開頭的字串(例如 "DEMO")時, 才進行展示頁面的流程。

本文為了達到最快的執行速度,採用「文章網址加特定字串」的方案。



二、安裝程式碼

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

接著請見以下的程式碼──


1. 首先到後台 → 範本 → 編輯 HTML → 找到字串 </head>,在其前一行,插入以上 A~Q 行。

2. 接著找到字串 <b:if cond='data:post.hasJumpLink'>,在其前一行,插入以上 S~AG 行。

請先儲存,參照「三、使用方法」來測試效果,如果效果 ok 的話,就可以開始使用;如果覺得版面不太滿意,若要修改參數請參考「四、修改參數」。



三、使用方法

想要當成展示頁面的新文章,只要在文章編輯的頁面,於「文章設定」→「連結」→「自訂永久連結」→ 輸入以 "DEMO-" 開頭的字串即可,如下圖──




由於網址連結 "大小寫有分別",使用 "DEMO-" 這樣的大寫字串,可以避免非展示頁面的文章誤用此字串。而如果不想使用這個字串,可在「四、修改參數」修改參數。

而上圖中的那篇文章,網址使用了 "demo-" 開頭的字串,會自動成為展示頁面,下面連結可看效果:



想看更多的文章列表效果,請參考以下──

1.「文章列表__依標籤排列

2.「文章列表+讚統計__依日期排列

3.「各種文章列表+讚統計__簡易安裝



四、修改參數

請參照「二、安裝程式碼」的行號──

B:如果範本中已經裝過 jquery (可搜尋看看有沒有 "jquery" 的字串),那麼可刪除此行

J:紅字 "DEMO-" 可改為自訂字串,以後想要當作展示頁面的新文章,自訂網址超連結時,需要以這個自訂字串開頭。

L:綠色字串分別代表將「導覽列」、「文章日期」隱藏起來,如果
不想隱藏的話,請刪除對應的字串。

另外,如果文章區塊上方還放了其他的區塊,例如「HTML/Javascript」小工具,假如想把其他小工具也隱藏起來,請先找到這個小工具的 id,方法為「範本」→「編輯HTML」→「跳至小工具」,如果是「HTML/Javascript」小工具的話,id 通常是「HTMLx」,x 為數字。

接著在綠色字串之前,插入以下程式碼──

#HTMLx {display: none;}
以上 "HTMLx" 請換成小工具的 id。

X~Y:如果 L 行提到的「導覽列」、「文章日期」不想隱藏起來,那麼這兩行請刪除。

如果 L 行有新增字串,那麼 X 行之前請插入以下程式碼──

$("#HTMLx").remove;
以上 "HTMLx" 請換成小工具的 id。


以下兩行請先參照「展示頁面範例」──

AA:本行紅字部分的 "10px auto",可調整展示頁面本文區塊「外框部分」的邊界值;10px 代表上、下的邊界值,auto 代表左、右的邊界會自動調整(置中);左右邊界也可改為自訂的 px 值。

AB:本行紅字部分的 "20px 20px",可調整展示頁面本文區塊「內框部分」的邊界值;第一個 20px 代表上、下的邊界值,第二個 20px 代表左、右的邊界值。



五、小結

一開始的設定動作比較麻煩一些,不過以後只要設定文章網址後,就能在 Blogger 自動產生展示頁面,比起另外找空間來製作展示頁面,算是非常簡單美觀、又有效率的方案了!


更多 Blogger 小技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP