(Pic from: midches.com)有時我們可能需要一些「展示頁面」，來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「文章列表」)，這樣的頁面最好能載入速度快，頁面上只需要出現 DEMO 的主題，不需要出現側邊欄、其他小工具。因此，在 Blogger 開一篇新文章當作 DEMO 頁面不會是個好選擇，因為 Blogger 的每個頁面都會顯示側邊欄、小工具等等，除了主題混亂、速度也慢。
比較恰當的選擇是找個能放置 HTML 檔的網頁空間，來當作 DEMO 頁面，例如「Dropbox」、「Google Drive」等。只不過，這樣的方案有其不便之處：
- 不是每個人都熟悉 HTML 架構
- 需要自行設計 HTML 檔的版面樣式
- HTML 檔沒有設計部落格 logo 的話，可能會被直接盜用。
因此，我的構想是，能否在 Blogger 開一篇「新文章」，就能實現簡便的「展示(DEMO)頁面」？以下照例先說明原理，想直接安裝此功能請跳到「二、安裝程式碼」。
+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-" 開頭的字串，會自動成為展示頁面，請按下面連結觀看效果：
http://wayne-fu.blogspot.com/2012/04/DEMO-toc-date.html
想看更多的文章列表效果，請參考以下──
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 20px"，可調整展示頁面本文區塊「外框部分」的邊界值；10px 代表上、下的邊界值，20px 代表左、右的邊界值。
AB：本行紅字部分的 "20px 20px"，可調整展示頁面本文區塊「內框部分」的邊界值；第一個 20px 代表上、下的邊界值，第二個 20px 代表左、右的邊界值。
五、小結
一開始的設定動作比較麻煩一些，不過以後只要設定文章網址後，就能在 Blogger 自動產生展示頁面，比起另外找空間來製作展示頁面，算是非常簡單、美觀、又有效率的方案了！