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

(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 小技巧：