2012年11月11日

Blogger 文章置頂+首頁公佈欄實作技巧

A+

(Pic from: psdgraphics.com)
過去在「Blogger 小技巧」曾整理了一些公佈欄的筆記,以備實作時參考之用。一般而言,在 Blogger 要找到一個區塊能長期置頂實現公告的功效,大致有以下這幾個作法:

A. 放在導覽列上方
B. 放在文章區塊上方
C. 放在側邊欄頂端
D. 發一篇未來文章長期置頂

其中 A~C 的作法很簡單,在後台新增 HTML/Javascript 小工具,再拖曳到 A~C 的位置即可。而 D 的作法需要用到一點小技巧,因為如果開一篇新文章後選擇未來的日期發佈,那麼這篇文章會列入排程,等到日期到了才會出現在部落格,自然就無法長期置頂。

正確的作法為開一篇新文章後立即儲存發佈,接著再重新編輯這篇文章 → 文章設定 → 發佈日期 → 設定日期及時間 → 改為未來的日期 → 完成 → 更新。回到首頁之後,如下圖,就可以看到這篇到 2100 年之前都會置頂的文章了:




一、需求

有訂閱本站文章的朋友先說聲不好意思, 你的閱讀器例如「Google Reader」可能會出現以上這篇未來文章,但點了網址又沒內容,因為文章只是測試效果,已經被刪除了。以下為我製作本站公佈欄的需求──

1. 主要需求:我的主要需求為「首頁時展開公告,非首頁時自動隱藏公告,不妨礙文章閱讀,但提供展開的按鈕」,因此本文的實作採前言提到的 B 點。

2. 次要需求:其次的需求為「公告內容的編輯必須十分方便,最好是"所見即所得"(Wysiwyg)。」如果把公告內容儲存在 HTML/Javascript 小工具,除了索引、資料維護不便,編輯時也不易上色、對字體加粗等。因此為了達到這個需求,決定把公告內容放在文章內,在後台編輯時才方便。

因此如何結合以上兩點需求,是本文要分享的內容。


二、製作公告內容

為了讓版面好看,我採用「部落格文章+特殊文字區塊」 的方式來裝飾公告內容,以下為步驟──

1. 開一篇新文章,我用「Blogger 自訂文章網址的要訣」 設定文章網址,完整網址成為 "http://wayne-fu.blogspot.com/2012/09/2012-wfu-blog-index.html",這個網址之後會用到,請記住自己的公告文章網址。

2. 文章內容:填入以下──

<div class="bulletin" id="blog-2012-history">公告內容</div>
藍字「公告內容」的部分請填入自己的公告內容,雖然這一句很像廢話,不過將來若更改、編輯公告內容時,都必須在藍字「公告內容」這個區域範圍內,若在 <div> 區塊之前或之後的話,都會抓不到公告內容。

儲存文章後請繼續下個步驟。



三、製作公告區塊

1. 請到 Blogger 後台 →「版面配置」→「新增小工具」→ 選擇「HTML/Javascript」→ 拖曳到「網誌文章」的上方(如下圖)



2. 編輯這個小工具,標題請隨意(例如:公佈欄),內容填入以下:


3. 存檔之前請先修改幾個重要參數,行號請參考以上程式碼:

T:紅字 100 可改為自訂的高度 px 值,超過高度的部分公告內容會自動產生捲軸。

AA:請檢查一下範本,如果已經安裝過 Jquery 的話,這一行可以刪除。

AE:綠字部分請改為自己的公告文章網址,但必須去掉自己的網域字串,例如我的公告文章網址為 "http://wayne-fu.blogspot.com/2012/09/2012-wfu-blog-index.html",去掉網域字串後成為 "/2012/09/2012-wfu-blog-index.html",字串開頭為斜線"/",這就是綠字部分要填入的字串。原理請見「四、原理及提醒」。

AF:綠字部分請改為自己完整的公告文章網址。

以上三行改完即可存檔,效果可參考本站文章上方的公佈欄。


4. 其他相關說明:

D~Q:這裡是公告區塊的美化 CSS 參數,可參考「部落格文章+特殊文字區塊」看詳細的參數修改解說。

AI~AN:這個判斷句代表首頁的時候執行 AJ~AK,展開公佈欄;而不是首頁的時候執行 AM,不載入公告文章,只顯示展開文字說明。

而想要自訂文字說明,請在程式碼尋找相關的中文敘述並替換即可。


四、原理及提醒

1. 利用程式碼 AE 行稍微解釋一下這個公佈欄小工具的原理,主要是利用 Jquery 的 load() 方法,動態載入我們的 "公告文章" 網址中 id 名稱 "blog-2012-history" 的內容到這個 "公佈欄" 區塊。由於安全性因素,javascript 只允許存取同網域的資料,因此 load() 只能夠載入同網域的資料。但在「Blogger 轉換網址事件」之後,Blogger 網址會隨不同國家而變動,以本站為例,wayne-fu.blogspot.hk 與 wayne-fu.blogspot.tw 會被視為不同網域,如果我們在 load() 裡面的參數使用完整網址例如 "http://wayne-fu.blogspot.tw/2012/09/2012-wfu-blog-index.html",那麼台灣以外的訪客例如香港,就讀不到這篇網址為 tw 網域的公告文章了。

唯一的解決方法就是將文章網址就是去掉網域,當網址不含網域時,例如香港的訪客,系統會自動讀取 hk 網域下 "http://wayne-fu.blogspot.hk/2012/09/2012-wfu-blog-index.html" 這篇文章(其實就是轉址後的同一篇文章),就能正確抓到公告文章了。

附帶一題,很多以前的 Blogger 小工具在轉址事件後會失效,主要就是讀取 json 資料時設定了 blogspot.com 的網域,若使用本文的解決方法,那麼這些小工具就能恢復功能了。

2. 本文的程式碼在 Blogger 新範本測試沒問題,但本站使用舊範本,這個小工具在 IE 下與 Jquery 的 load() 相衝而無法執行,我只好另外用個判斷句讓 IE 無法顯示公佈欄。

由於篇幅的緣故就先不列出我自己用的程式碼,如果你也是使用舊範本又想安裝這個公佈欄的功能,請再留言詢問,或是急的話先看看本站的網頁原始碼也可找到答案。


CSS 技巧相關文章:

21 則留言:

  1. 不採用未來文章, 使用Pages就沒有時間上的問題了.(ㄟ? 中文選項是叫做創建網頁嗎?)

    回覆刪除
  2. <3868378064604770>(以上內容請勿刪除,從括號之後開始留言)
    以下引自G+與mark的討論內容
    [quote]是針對這個部分:
    "二、製作公告內容
    1. 開一篇新文章,我用「Blogger 自訂文章網址的要訣」 設定文章網址,完整網址成為 "http://wayne-fu.blogspot.com/2012/09/2012-wfu-blog-index.html",這個網址之後會用到,請記住自己的公告文章網址。"

    如果是我就不會開一篇新文章, 而是開新網頁, 如圖.
    http://i48.tinypic.com/sopzjd.jpg
    對第一次使用你這個公布欄的人來說, 發一篇新文章勢必他的讀者都會收到RSS通知, 而且在他的部落格首頁上面會有個公布欄, 下面又有同樣一篇的公布欄內容的文章同時顯示. 當然這都可以用修改文章發布時間來控制不要顯示在首頁, 我自己是覺得這是網站私下操作的部分, 改用Pages就不會發布到RSS, 在後台修改也能方便找到.
    只有這小小的差異啦! 只是將load()連結網址改成像這樣 http://wayne-fu.blogspot.com/p/公布欄命名.html[/quote]
    謝謝您的建議,使用「網頁」發佈的確有直接的好處,比較方便,不必另外再修改文章的時間來避免出現在訂閱的 RSS。

    我完全沒有想到使用「網頁」模式,是因為過去有不好的使用經驗及看到一些案例,所以我的網站全部取消「網頁」模式了:
    1. 網頁模式的留言無法使用「以電子郵件訂閱」的功能來追蹤回覆。
    2. 一些案例:「1」、「2」、「3
    如果沒有以上這些狀況的需求的話,那麼是可以使用「網頁」模式的。

    回覆刪除
  3. 您好,想請教,如果點選"按此觀看完整大事紀要"之後,開啟新頁,但是想要隱藏布告欄的標題文字,請問要如何修改?

    我修改您的範例是要做到置頂文,但是置頂文,並不會全部show 出來,模擬類似閱讀更多,點選以後,會在新頁顯示全文,這時的置頂文的標題是會出現,我想在這部分是否可以在顯示該置頂文的時候,可以把該文章的標題隱藏,類似<h2></h2>,但是我不知道要如何把語法加入?謝謝幫忙

    回覆刪除
  4. <8829971357208007311>(以上內容請勿刪除,從括號之後開始留言)好的,瞭解你的意思了,這樣的效果應該類似「當隱藏文章內容時,標題一併隱藏;顯示文章內容時,標題一併顯示」。按以下操作可得到這樣的效果:

    1. 到後台範本找到這個小工具的區塊,原本的文章標題程式碼為:<h2><data:title/></h2>

    請改為:<h2 id="bulletin-title" style="display: none;"><data:title/></h2>

    2. 本文程式碼 AF 與 AG 之間插入以下程式碼:

    $("#bulletin-title").show();

    這樣就能做到「將標題預設為隱藏,文章展開時才讓標題顯示。」

    回覆刪除
  5. 剛開始以為是要開"新網頁",後來弄懂是"新文章"並發佈吧!試著用一下,結果內容沒進去,怎麼分家了呢?問題出在哪??點選"按此觀看完整大事紀要"也沒內容.....詳細情形請看
    http://www.shinean99.com/
    麻煩您看一下...謝謝

    回覆刪除
  6. <1024483089122136188>(以上內容請勿刪除,從括號之後開始留言)我看了你的網頁,「最新消息」這篇文章的網址是 http://www.shinean99.com/2013/04/shinean-blog-index9_9.html

    但你的程式碼
    $("#bulletin").attr("class","bulletin-home").load("/2013/04/shinean-blog-index_9.html .bulletin");

    看到網址參數不一樣了嗎?我猜你文章網址有變動過,修正一下再試試看吧.(有兩個地方要修正, 對照一下原文)

    回覆刪除
  7. <8161529071698755678>(以上內容請勿刪除,從括號之後開始留言
    原來是網址弄錯啦~~~已經更改了....但是...還是不成功....反覆檢查了,還是不知道又漏了哪裡呢?

    回覆刪除
  8. <4254570841329145080>(以上內容請勿刪除,從括號之後開始留言)
    哇哈哈~~~成功了...可惜不能刪掉留言~~~超級謝謝板大啦~~~^O^~~已經變成你的忠實迷啦~~~

    回覆刪除
  9. <9201002267171609578>(以上內容請勿刪除,從括號之後開始留言)
    奇怪?!我有這問題耶....消息是放進去公布欄裡了,但因為是發表新文章,所以同樣的內容會重複1次,可是版大的看起來沒這問題,是我漏了甚麼或又有什麼魔法將新文章藏起來嗎?

    回覆刪除
  10. <1315777014494603612>(以上內容請勿刪除,從括號之後開始留言)
    恭喜你成功了,不想讓那篇文章出現在首頁,你可以到後台編輯文章,把發佈時間改成過去的日期,例如 2012 年的日期就行了。

    回覆刪除
  11. <7872573460057929560>(以上內容請勿刪除,從括號之後開始留言)哈哈~~原來是這樣阿~~了解~~謝謝您的開示啦~~~之後再試試版大發表的其他文章的功能...

    回覆刪除
  12. 試驗成功 謝謝您
    但想請問 如果要去掉"本站大事紀"這幾個字的話 要怎麼改呢?

    回覆刪除
  13. <3280651073380116583>(以上內容請勿刪除,從括號之後開始留言)程式碼P行換成自己的圖片就行了

    回覆刪除
  14. 請問要如何預設抓取內容為開啟(不需要點擊展開公告內容)

    回覆刪除
  15. <4134310699822507231>(以上內容請勿刪除,從括號之後開始留言)將 AI、AL、AM、AN 這幾行程式碼刪除即可。

    回覆刪除
  16. 感謝您! 那一頁可以放兩個或以上的公佈欄嗎?<2721921573995453015>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  17. <5781752625679501849>(以上內容請勿刪除,從括號之後開始留言) 說得有些不清楚 應該說如何用在公佈欄中嵌入2個不同內容的頁面

    回覆刪除
  18. <2134473761251465062>(以上內容請勿刪除,從括號之後開始留言)[quote]如何用在公佈欄中嵌入2個不同內容的頁面[/quote]新增一個區塊,使用不同的 id, 更改相關參數即可。例如複製 A 行的內容,更改 id,並在其他的程式碼新增、修改跟這個 id 相關的字串,原理大致是如此。

    由於這算是客製功能,如果這樣的說明不清楚如何執行的話,必須專案處理您的 case,請參考「諮詢服務」與我聯繫。

    回覆刪除
  19. <9072429678791792339>(以上內容請勿刪除,從括號之後開始留言)好像改了A行就完全失效!!XD

    回覆刪除
  20. <3535066138400611909>(以上內容請勿刪除,從括號之後開始留言)不好意思,如果對程式不熟的話,您可考慮是否提出客製的需求了。

    回覆刪除
  21. <9214410767263883332>(以上內容請勿刪除,從括號之後開始留言)終於知道怎麼運作了 感謝您

    回覆刪除

張貼留言注意事項:

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