2006-12-15

調整 Post footer 的回應連結

在首頁每篇文章的文末都會顯示目前回應(迴響、意見...就是 Comment)的數量,這些文字一併附連結讓讀者可以發表意見。不過習慣一些中文 Blog 系統的讀者常常一時找不到:「哪裡可以發表意見啊」,殊不知要去點那個有數字的「連結」,或是跳轉完整文章再看文末才會有「張貼意見」的字樣。我做的「小手術」只是把「張貼意見」的字樣特別拉出來,並加上圖示,讓讀者能比較容易找到發表回應的地方。

Blogger 裡面因應多國語文有很多顯示的字串都是定義成變數,不同語系字串之間比較容易轉換顯示,可惜並不是所有的字串變數都能讓使用者去更改和定義。舉例來說,就 comment 這個 term,變數名稱是:<data:top.commentLabel/>,西方語系裡還有複數型:< data:top.commentLabelPlural/>(應該就是加 's' 吧),在中文裡這兩個變數顯示的字串應該一樣,也讓使用者能自行定義(看是要叫它"回應"還是"意見"隨便你)。但是上面說的「張貼意見」字串也是變數: <data:postCommentMsg/>,但是使用者就沒有地方可以改它的對應中文字串囉!而在調整回應連結的時候,我也希望儘量少 hard code 中文進去,最好使用這類的既有變數才有彈性。因此改完範本以後會發現,在區塊裡面多了類似「張貼意見」的中文,但是更改的程式裡面卻沒有用到 hard code 的中文字喔!

原來的程式碼應該只有下面短短幾行:

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
  </b:if>
</span>

意思是:如果停留在首頁的時候,而且允許讀者能自由回應的狀態下,顯示發表回應的介面連結。如果回應數量是 1 則顯示回應的單數量詞,否則顯示複數的量詞(真怪,把程式翻譯成一段話)。我的調整是把以上這段 <span> 標籤內的內容,取代成下面的程式:

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
     <span class='comment-link'>|</span>
     <span class='comment-link'><data:top.commentLabelPlural/>:</span>
      <b:if cond='data:post.numComments == 0'>
        <span class='comment-link'>0</span>
      <b:else/>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.numComments/></a>
      </b:if>
    </b:if>
  </b:if>
</span>
<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <span class='comment-link'>|</span>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src='http://abinlee.link.googlepages.com/Icon-Comment.gif' border='0'/> <data:postCommentMsg/></a>
    </b:if>
  </b:if>
</span>

解釋一下,首先我加了 '|' 當作每項資訊的分隔符號(套用 class='comment-link' 是為了版面整齊),接著我把原來回應的格式:「1 回應」改成「回應: 1」,用的是複數型變數,即使是英文版型應該也不會很奇怪,最後多加了「張貼意見」的字串變數,並且在前面貼了一個小圖示,這樣讀者想發表回應的時候,是不是更直覺清楚,也很容易找到呢?

回應: 35

Peter Cheng 提到...

你好~感謝你詳盡的說明,讓大家受惠不少。想請教我照著上面做了一遍後,會出現意見跟數字距離很遠的狀況,另外原本的“回應“便成了“意見“,似乎跟你的說明不大一樣,不知道是哪裡出了狀況,還煩請給我指導,感謝你。

附上我的網址
http://ddddden.blogspot.com/
再次感謝~

Abin 提到...

1. 意見和數字距離很遠,我看你的網頁原始碼,這兩個東西中間有很多個 "&#160;",請檢查你的範本的原始碼,這兩個東西中間是不是有未知的空白或換行符號。
2. 基本上 "意見" 一詞是 Blogger 中文化以後對 comment 的標準翻譯,我不喜歡所以去改過。更改的地方在 範本->網頁元素->Blog 文章區塊的"編輯",你可以改變「部分」這類標準翻譯的中文。不能改的地方,只好修改範本來達成。

Peter Cheng 提到...

感謝你的指導,我想可能是我在文字編輯軟體中貼入你的原始碼,然後在貼進blogger裡面產生的多餘奇怪東西,再次感謝你的指導,謝謝^^

禾本族 提到...

站長您好
我也是發生一樣狀況
就是回應與數字間的距離很長,還有我想請教一下,旁邊那個EMAIL功能
我要如何改變ICON

真的很棒的網站

Abin 提到...

我看了你的網站,看起來很不錯,而且回應與數字間的距離過長的問題似乎已經解決了。
另外,你提到更改 Email Icon 的問題,很不幸的,那個定義的 CSS 放在 Blogger.com 的預設檔案裡(檔案在這裡),你沒辦法修改那個 Class (email-post-icon),不過,還是有解套的方法。簡單說來,你可以定義一個 email-post-icon2,來設定你的 email 圖案,然後尋找樣版原始碼(全部展開)裡有 email-post-icon 的地方(只有一個地方),替換成你自己的 email-post-icon2 就可以了。
想看更詳細的說明這邊有篇文章可以參考,有機會我蒐集幾個這類的圖示和 CSS 定義,再寫篇文章告訴大家怎麼 Hack 這類「預設」的圖示以及 CSS。

嘎抓 提到...

http://tinyurl.com/2k86tb
http://tinyurl.com/2kxu5j


您好,非常感謝您的分享,但是我載我的blog出現了點小問題,就是「作者」、「時間」、「快速編輯」、「意見」...等等,這些按鈕的位置沒辦法依照我想要的來排列!如上面兩張圖所示... 請問我該怎麼辦呢?感激不盡!

Abin 提到...

To 嘎抓: 我看了你貼的兩張圖片,基本上,在系統提供的版面設定(第二張圖),是沒辦法讓你更改這些項目的顯示順序和格式的,你一定要透過直接範本的HTML 原始碼(記得展開小裝置範本),才能自訂調整。
舉例說明,在原始碼裡,作者 = <data:post.authorLabel/>,時間 = <data:post.timestampLabel/>,快速編輯是一段(搜尋 postQuickEdit),意見的部分也有一段程式碼 (id='comments' var='post'),所以如果你想更改順序,就要手動更改以上幾段程式碼的位置,如果要改格式,就要改 span 標籤裡得定義的 CSS 樣式,一定要動程式碼,不能透過拖拉或設定就能調整的。

嘎抓 提到...

原來如此,受教了!!謝謝您詳細的回應,我是個blog新手,很多地方都不甚了解...您的blog真的很豐富,很多文章真的很受用...感恩!

Max 提到...

感謝,不介意我用你分享的方法改造我的Blog吧!! 謝謝囉~

Abin 提到...

To Max: 很高興我整理的一點心得對改造你 Blog 有幫助 :)

雙羊 提到...

Abin 你好,

跟你打聲招呼,我想用你的「回應:」及「張貼意見」前的兩個小對話框框圖,因為畫的很可愛,不知道你介不介意給我使用呢?謝謝。

另外我有一個小問題,就是在我部落格上「全文閱讀網址」前有一個小圖示,要去哪微調高度,因為在我部落格上,那個小圖比文字高了一些呢,還請你多多開示,謝謝 ^^

Abin 提到...

To 雙羊: 兩個小圖歡迎取用,我也是從網路上抓下來修改的。

另外,關於小圖位置調整的問題,我的作法是用 CSS 來做。我並不是直接把圖片連結放在文字的前面,而是定義一個 CSS 標籤(定義法可以看這一篇),然後把該段文字用我定義的 span 標籤括起來,你可以看我文章的原始碼。
舉例說明。像是我「回應:」前的小圖,我定義了一個 CSS 標籤叫做 exist-comments,那個小圖是用 CSS 設定為「背景圖」,然後調整它的位置。
而我在樣版裡面要用它的時候,只要修改樣版原始碼,在回應的前後加上這個標籤定義,像是這樣:
<span class='exist-comments'>回應: </span>
該文字就會被我套用成我自己定義的樣式,前面有預留空間放小圖,而且小圖的位置也可以乖乖地出現在我要的位置。

雙羊 提到...

Abin 兄,

你的一席話,害我腦細胞死了好多,哈哈,其實我沒什麼 CSS 功力,全部靠你們高人幫忙 orz。
大概看了你的解釋不下十次,每讀一次有一種新的領悟,然後和你的原始碼交叉看後,我終於會了 \(^__^)/,現在圖都調整好了,不過明天你再問我今天是怎麼做的,我大概也是答不出來 (跪),實在是太花腦力了...

另外我又有新問題了 (淚),我今天大幅改版,我裝了文章下的迴響旁有「id小圖」,我不知道是不是這個原因造成我的 related-posts 失效了,不知道是為何呢,不知道 Abin 有沒有相關經驗啊?

乾溫

雙羊叩上

雙羊 提到...

我又來了 ^^;

related post 的問題我解決了 orz,可是我又有新的麻煩了 (暈),我用 span 夾的圖在 IE 下有的沒辦法看 @____@,超級詭異,沒辦法看的是文章訂閱的那六個書籤網站的小圖,所以我又用 img 的方式換回來了,畢竟歪了總比都沒有好,唉,不過我有用 IE 開 Abin 的網站一點問題都沒有,我是找不出原因,因為「留下你的迴響」及「個迴響」前面的小圖都沒問題,程式寫法也都一樣,只能對 IE 嘆口氣,又怨為什麼那麼多人都用 IE 呢?
以上是今晚的心路歷程...

再次感謝 Abin 的幫忙 :-)

Abin 提到...

To 雙羊: 改用 span 來顯示圖片,由於圖片是被當作背景底圖顯示,因此在 IE 下面,span 標籤裡面如果沒有內文,背景圖就不會顯示。以你的例子,其實要解決很簡單,只要在啟始<>和結束標籤</>之間夾個空白就好了,像是這樣:

<span class='hemi'> </span>

我幫你試過了,標籤中加個空白在 IE 和 Firefox 都可以正確顯示~ ^_^

雙羊 提到...

嗨嗨 Abin,

謝謝你詳細又熱心的測試跟回應 ^o^
不過 IE 大概很討厭我,我用半形的空格是不行的,一定要用全形的空格 orz,但全形的空格又太大了,結果我現在用 "," 勉強過關 T_____T。

我真的試了不下十次...連用   帶入當半形空白都沒用 ﹨(╯▽╰)∕

再次說聲謝謝你 ^_______^

fumiko 提到...

作者已經移除這則留言。

Paulina 提到...

你好,我已經根據你的教學改好了,而且我把"張貼意見"改成"我有話要說"只是我還是覺得字太小了,我可以改大一點嗎?
還有,當我點入單篇文章的時候,為什麼"我有話要說"前面的小圖示就不見了,而且"我有話要說"又改回成"張貼意見"了?我該怎麼更改呢?

Abin 提到...

To paulina:
我一開始有提到,「Blogger 裡面有很多顯示的字串都是定義成變數」,你提到的「張貼意見」就是其中一個,變數名稱是:<data:postCommentMsg/>,因此當你將該變數都 hard-code 硬改成你要的字串時,記得要將完整樣板程式碼裡「所有」用到該變數的地方都改到,才不會改漏。這也是我在一開始說到,我不想在原始碼裡改用中文、儘量套用預設變數的原因之一。
另外,像是圖示、字的大小和樣式,記得也都要一併都改到,才不會顧此失彼。你可以參考我的原始碼,我對這個連結定義了一個新的 CSS 樣式,class 名稱是 post-comments,裡面有圖示和字的樣式,你也可以參考修改成你要的樣子。

Paulina 提到...

非常謝謝你,我找到地方更改了,因為我之前是找不到在單獨頁面的時候要去哪裡改,我是參考了『檢視原始檔』之後才找到問題的所在,所以現在我的首頁和單獨頁面的張貼意見我都改成我想要的字眼,只是我還正在尋找如何更改字體大小!這是的部落格網址:http://paulinaenglishblog.blogspot.com/ 非常歡迎來看看,裡面的大部分功能都是從你的部落格學來的喔!(感恩)

Abin 提到...

To paulina:
很高興我的筆記對你有一點幫助。英文老師您的網頁相當豐富喔,可惜我沒有要考四技二專英文,不然一定收穫斐淺~:)

Aki 提到...

您好,我想請問一下,要怎麼把post footer("Posted by ____ at 00:00"和"tags:_____")整個移到post title下面呢? 謝謝。

Abin 提到...

To Aki:
我聽不懂您的問題,footer 本來就在 title 的下面,何來「整個移到下面」?

新手 提到...

若我只需要把張貼意見改成別的字

該怎麼做呢

還是沒辦法?

Abin 提到...

To 新手:
請仔細看我所說的:「"張貼意見"字串也是變數: <data:postCommentMsg/>,使用者沒有地方可以改它的對應中文字串」,如果你硬要把它改掉,請把你樣板裡面、所有出現 <data:postCommentMsg/> 這句的地方取代成你要的字串,這樣就算硬改了。以後變更樣板或更換語系的時候,這些個你硬去取代的字串,可能會有問題,所以我不建議這種作法。

新手 提到...

謝謝 所以沒有比較好一點的改法

那我只好硬改了XD

Davin 提到...

TO Abin :
請教您一個問題....
我目前的版型,並不會在post footer中顯現"作者名稱"及文章"發表時間".....
我去原版型的網站有看到網友寫出顯現"作者名稱"的語法,也將該語法放在文章標題的位置下,幸好讓我矇對,有正常顯現....
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<data:post.author/>
</b:if>
若我要在"Posted by Davin"的旁邊顯現文章"發表時間",要如何下手....
還請賜教....

Abin 提到...

To Davin:
加下面兩個標籤在 <data:post.author/> 的後面,就會顯示發表的時間了:
<data:top.timestampLabel/> <data:post.timestamp/>

Davin 提到...

TO Abin :
我改好了....
感恩咧!

伊特 提到...

站長您好,那請問一下「提到...」這個語法(變數)是什麼?
因為我的blog只要有留言,後面都會跟著兩個「提到...」,
我想刪除其中一個...


底下文章的意見就是這樣
http://anmaztic.blogspot.com/2009/04/blog-post_7012.html

Abin 提到...

To 伊特:
「提到...」一詞是樣板預設變數: <data:commentPostedByMsg/>,自己找找樣板裡面是不是貼了兩次。

伊特 提到...

謝謝,問題解決了。
大感謝阿~~ :)

小青蛙。 提到...

站長您好,您的文章真的很有幫助,
我想請問一下跟Post footer比較無關的問題,還煩請多見諒~
就是我希望我的footer可以緊貼著瀏覽器底部,我有看了
使用css去控制底部置底不會有bug的方法
http://www.wowbox.com.tw/blog/article.asp?id=3231
http://www.cssstickyfooter.com/using-sticky-footer-code.html
想請教一下他裡面的wrap與main分別是指blogger的什麼呢?
是Outer-wrapper或content-wrapper跟main-wrapper呢?
我測試了一整天在blogger無論如何下定義都無法成功,
可以麻煩您幫我看看嗎?謝謝喔~

Abin 提到...

To 小青蛙:
我有一篇文章是在講 Blogger 的內容和結構:「Template 的基本內容和結構」 ,我感覺他們講的是 wrapper 應該是 outer-wrapper,因為是在「總的容器外再加一個 foot-wrapper」,和原來 Blogger 預設的 foot-wrapper 位置不大一樣(預設的是在 outer-wrapper 裡面)。
不過改動這些 wrapper 的位置不大好,因為 Blogger 的樣板有個視覺化的「網頁元素」設定頁面,如果動到那些預設 wrapper 的位置,可能會導致那個設定頁面錯亂掉。如果硬要達成「緊貼著瀏覽器底部」的目的,其實只要塞一個浮動的 DIV 層,固定它的位置,這樣比較不會和 Blogger 預設的那些 wrapper DIV 混在一起。

小青蛙。 提到...

嗯!!我有去看過您那篇文章說明整個blogger結構,
不過我不斷測試後發現用「總的容器外再加一個 foot-wrapper」,
雖然有成功抽出footer且網頁元素會隨著footer位置而改變;

但...會變成就像你說的整個blogger版型錯亂,
他的height: 100%既無法把它撐到最底部,
而且footer高度的負值互相使用後,其高度也會顯示一半的背景而已;

我在想他們說的那個方式可能適用於其他自己撰寫css的web使用者吧~
blogger似乎有他自己的規則性,好像不用那麼麻煩~加個div就可以;

不過有個缺點是假如main的position是使用絕對定位的話就會覆蓋到文章~
我後來才發現我的文章會被覆蓋是position的關係,已經有解決囉!!

非常謝謝您的指點喔^^

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!