2013年5月18日

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

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 小技巧:

13 則留言:

  1. 或者也可以使用該篇的行動版網址當作DEMO, 比較容易.

    (原本想留言在內嵌的新留言板,居然不能輸入? 不知怎麼一回事)

    回覆刪除
  2. <273665597834210826>(以上內容請勿刪除,從括號之後開始留言)喔~ 是阿~

    http://wayne-fu.blogspot.hk/2013/04/gplus-comments-box-install.html?showComment=1368844088614#c2484280561610096601

    回覆刪除
  3. <273665597834210826>(以上內容請勿刪除,從括號之後開始留言)[quote]或者也可以使用該篇的行動版網址當作DEMO, 比較容易.[/quote]這個 idea 不錯,幫補充在原文
    [quote]想留言在內嵌的新留言板,居然不能輸入? [/quote]這兩天G+改版造成的問題, 要再找時間看看怎麼補救。

    回覆刪除
  4. <849079916548466220>(以上內容請勿刪除,從括號之後開始留言)

    驚!Wayne 的可以引言耶!

    回覆刪除
  5. <5543867451776456939>(以上內容請勿刪除,以下引言請自行刪減) [quote]驚!Wayne的可以引言耶![/quote]就像這樣子,可惜你的範本使用串聯式留言,所以無法安裝。有興趣的話,在本站搜尋「留言回覆系统」

    回覆刪除
  6. 對了~ 這個有甚麼辦法能夠置中呢?
    謝謝 ^^

    回覆刪除
  7. <7831605599746842808>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁頁面配置,發現你設定的網頁寬度是 1342px,但顯示的寬度卻只有 960px,左右都各空了很大的區塊。

    我想也許你到後台把這兩種寬度設成一致就行了,例如網頁的寬度設成 1000px 左右,你再調看看吧。

    回覆刪除
  8. <2189454032430963999>(以上內容請勿刪除,從括號之後開始留言)出現這個情況,在小螢幕下,正常,但在大螢幕下,就:http://myprintscreen.com/s/thum_1379515538.92779543.png

    回覆刪除
  9. <2436469199776369599>(以上內容請勿刪除,從括號之後開始留言)我想你已經到後台調整過網頁的寬度了,也許有不知名的原因,你的表頭等等的一些寬度,還是 1342px。

    為了讓本文的程式碼在各種不明原因下能正常執行,我改了 AA 行的程式碼,原本的紅字參數為 "10px 20px",現在我改為 "10px auto",這樣應該就能自動置中了,你試試看吧!

    回覆刪除
  10. <2803310890024898564>(以上內容請勿刪除,從括號之後開始留言)謝謝您!

    回覆刪除
  11. 我的Blogger模版並沒有「<b:if cond=’data:post.hasJumpLink’>」,請問我應該怎麼辦?

    回覆刪除
  12. <8080526976674248930>(以上內容請勿刪除,從括號之後開始留言)如果你使用官方範本的話,一定會有這一段,可以按以下步驟:

    滑鼠點進範本內容 → 按 Ctrl + F → 搜尋 "data:post.hasJumpLink" → 縮小範圍來搜索試試看

    回覆刪除
  13. <2189454032430963999>(以上內容請勿刪除,從括號之後開始留言)
    如果套用了其他範本 無法調整寬度 還有什麼方法可以調整呢

    回覆刪除

張貼留言注意事項:

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