在自己的 Blog 裡會有一些路人針對文章來做回應或留言討論,身為作者,也可以針對這些一般的回應做出回答或解釋,如果不把作者的回應和一般人的做一點區分,當回應很多的時候都混在一起,也會搞不清楚自己是否回答過。因此,可以在樣版裡做一點手腳,如果判斷到發表回應的人是作者,就做一點樣式上的改變,用來區別作者和一般人的回應。我想過很多作法,不過有些複雜,改動的程式也要很多,算了,還是用最簡單、變動最少的方式,只更改作者回應的字型顏色就好。
打開範本 (Template) 直接修改 HTML,記得要展開 Widget,在 CSS 的區段先加入以下定義(指定作者回應的字型顏色):
/* Author Comment Styles */
#comments-block .author-comment {
color: #f00;
}
接著,在範本的程式碼裡尋找下面這一行:
<dl id='comments-block'>
這一行下面開始的迴圈跑的就是在顯示文章一篇篇的回應留言。我把整段顯示回應的程式碼貼出來,新增和修改的部分用紅色標註,如果要用也可以直接直接複製下面整段,貼入蓋掉原來的部分。
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<!-- Author Comment highlighting -->
<b:if cond='data:comment.author == data:post.author'>
<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<b><data:comment.author/></b> :
<b:else/>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/></a> <data:commentPostedByMsg/>
</b:if>
<b:else/>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/></a> <data:commentPostedByMsg/>
</b:if>
<b:else/>
<data:comment.author/> <data:commentPostedByMsg/>
</b:if>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><p><data:comment.body/></p></span>
<b:else/>
<!-- Author Comment highlighting -->
<b:if cond='data:comment.author == data:post.author'>
<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
<p class='author-comment'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
主要的改變有:更改顯示作者的樣式,作者名稱字型粗體沒有連結,並且以冒號結尾。另外指定作者回應的內文套用 CSS 樣式: "author-comment",也就是一開始另外定義的 Class,這些變動都可以依照個人配色和喜好去更改。
不過,這段程式碼用來判斷作者還是有瑕疵,如果回應的人自訂名稱,而自訂的名字「剛好」和 Blog 作者名字字串一模一樣,而且他也是 Blogger 的使用者,那他的回應也可以「假裝」是作者的,以上的程式碼並沒辦法作更嚴謹的檢查。這也是最後決定不要在上面玩太多手腳,只改一點樣式顏色作些區別就好了。
更新:因為 Blogger 曾新增部份樣板功能,像支援非 Blogger 帳號留言(因此留言者前面多了一個識別用小圖示),所以以上程式碼也做了一點修正,並且參照留言者(白花花)的建議,對作者回應的識別度稍稍加強。
再更新:因為 Blogger 新增的「回應頭像」功能,導致原來判斷作者的第二項檢查:cond='data:comment.authorClass == "blogger-comment-icon"' 會失效,如果要這個 Hack 正常無誤有兩種解決方法:請到「設定」、「意見」裡「在評論上顯示簡介圖片」功能勾選到「否」,這個 Hack 就會正常(而且禁用回應圖像,用 Blogger 小圖示),第二種則是拿掉上面提到「第二項檢查」的 if else 判斷句,這樣也可以搭配新的回應圖像功能使用。
參考文章:
Comment Notification and Author Comment Highlighting
Blogger beta:高亮作者评论
(新增)[分享] 終於研究成功的提高Blogger作者回應的識別度
回應: 70
謝謝你~~
我本來是從你引用的那篇文章知道這個功能
可是看不太懂 ~"~
謝謝你的仔細講解 ^o^
請問能夠讓每個留言人後都是以冒號結尾,而不是「提到...」嗎?
還有如何才能改為不要粗體呢?
麻煩您了,謝謝。
「提到...」這個字串是 Blogger 提供的字串變數,在中文環境是你看到的這樣,但在別的語系會顯示成其他字,因此我沒有更動。
如果你不想看到這個字串,搜尋你樣版裡的一個字串變數:<data:commentLabelPlural/>,把它取代成冒號就行了。
另外,粗體的問題,應該是 CSS 的定義,如果樣版裡沒有類似 <b> </b> 之類的標籤,請找 bold 的關鍵字,看你是那個部分樣式的粗體不要,再修改就行了。
謝謝您。
hi 你好
請問兩個問題@@
1:位於時間前的"發表於"或是其他字眼,是怎麼修改來的呢><
2.http://maggieblack.blogspot.com/index.html, 這是我的網頁.對於每篇文章後的時間,留言等連結, 為什麼沒辦法像你們一樣可以分層呢.
謝謝~
黑色的瑪姬,關於你的第一個問題,「發表於」字樣是可以自訂的,在設定->網頁元素(page element),Blog 文章這個區塊右下角可以編輯,進去之後你會發現有幾個固定字串可以修改。如果你發現想改的字樣這邊沒有,就要手動修改樣版文件的原始碼囉!
第二個問題我有一點點看不懂,你說的「分層」是指什麼呢?是指留言能夠點一下展開,還是..單純地「換行」排整齊?
如果是動態展開留言,可以看我的另一篇文章(不過要修改得有點複雜,大工程),如果是單純左右對齊換行,我看起來是你樣版有問題喔..我看原始碼,發現有兩個怪怪的 CSS 定義:
.uncustomized-post-template .post-footer {
text-align: right;
}
.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
display: block;
float: left;
margin-right: 4px;
text-align: left;
}
你把他們拿掉,再看看是不是你要的「分層」效果?(這應該是套用現成的樣版造成的副作用)
謝謝你~
其實應該是換行效果@////@
不好意思喔,再請問一個問題
為什麼我張貼意見前方的圖片特別突出呢><
圖片會特別突出,也還是 CSS 搞的鬼喔!
你看你的樣版裡,下面這一段:
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #99bb99;
}
就是在幫你的 image 加邊框、設定邊框大小,因此不只是回應前面的圖片,所有在 post 文章裡的圖片都會有一個框框,框框裡也有被 padding 空白和設定邊寬..
所以,只要把上面這段 CSS 定義拿掉,你的小圖示就不會突出來囉!
TO 站長ABIN
我懂了,謝謝你
那關於輪播功能變成隨機方面~我需要怎麼設定~~
謝謝你~修改ccs原本我都不會~現在有尼的教學我有幾個都成功了~真的很感謝你耶~我是剛使用blogger的新手~喜歡blogger乾淨的頁面~而其他功能雖然沒有先幫我們做好~但手動自己設定其實也有不同的樂趣~再次感謝尼的無私分享~我有將您的網址加入我部落推薦網站^^
To 魔法小束兒:
你的 Blog 很有趣,很高興這邊的文章能對你有幫助。
這次我終於改成功了...
整個心情大好.....XD
今天花了一點時間修改了這個功能,真的是很好用,感謝...不過對於使用者名稱重複的部份...好像真的是無解
Abin大大
我想改每個回應者後面的"提到"改成冒號
只搜尋到1個data:commentLabelPlural/
給了之後那裡反而沒變
反而動到 13個意見變成13:
請問是哪裡有問題?
To 新手:
"提到" 這個字串的變數是:<data:commentPostedByMsg/>,並不是 commentLabelPlural,你改錯了。
抱歉抱歉
我以為你在3樓的回答是改成冒號的...
謝謝你!!我成功了
您好,偶爾逛到您的網站,小弟也想使用這個功能,但小弟不是用您的,而是用http://klcintw4.blogspot.com/2006/11/blog-post.html 這個前輩的(因為您的有說:如果使用者的名稱自訂跟板主相同則無法辨識),但是小弟照著該篇方法使用後卻無法正常顯示,(參考連結:http://0rz.tw/414sY)我有刻意用一般使用者和板主身份回應,但似乎無名顯區分。
原本是想在國良前輩的文章回應意見,但按了
張貼意見之後沒有反應,剛好看見您似乎有在
該篇詢問,所以就來此打擾了,造成困擾很抱歉。
(小弟改完之後的模版:http://www.badongo.com/file/10637004 ,不好意思可能要麻煩您下載一下)
您好
一直很想用這個功能
但我的blogger範本是用傳統的HTML模式
這樣是不是就無法使用這個了?
To monal:
我看了你的 Blog,基本上這邊提到的 Hack,只要是你 host 在 Blogger 的空間和使用其樣板,基本上都可以套用。
進入點都是在「版面配置」->「修改 HTML」,然後依照文章手動去修改樣板的程式碼來達成。
不過,如果毫無基礎和程式概念,這樣的樣板調整對 Blog 都可能有破壞性的(顧名思義,Hack 不是每個人都能做的),所以修改前請先確定知道自己在做什麼在動手。
感謝您如此迅速的回覆!!^o^
但問題是出在我已經將"版面配置"
回復成傳統範本...><
(blogger在改成beta前的樣子)
因此在"範本"那頁找不到第二部分要修改的那些語法>"<
To monal:
您是說後台管理介面並不允許你去更改模版的原始碼嗎? (抱歉,我不知道那是什麼狀況)
如果管理介面沒有提供修改原始碼的功能,或像您所說,回到beta前的樣子,我建議你只好另外開一個新的,非傳統模式的 Blog,再把資料搬過去囉.. (反正Blogger允許你開很多個新的Blog空間,你可以用新開的Blog做實驗)
謝謝您!
這個功能我非常需要!
太感激了!
殘念,我沒有改成功…
可以請Abin-san幫我看一下嗎?
我的部落格:http://chihdantagebuch.blogspot.com/
不勝感激!!
不好意思,又是我,其實是有成功的,我以為會顯示在張貼意見的頁面下。
謝謝!!
你好:)您的文章幾乎對我來說都很受用,感激。
在此篇文章中,關於判斷身分的用法,不知可否在留言者的判斷中,增加if去判斷留言者的帳號暱稱是否與板主相同之判斷法,用以來區別板主留言的功能...
只是不太曉得在判斷 張貼意見者的身分 這部分在code中的哪部分
再次感激:)
To JhaoHeng:
以下這一行就是我判斷「留言者」是否為「文章作者」的判斷方式:
<b:if cond='data:comment.author == data:post.author'>
其中「張貼意見者」就是 data:comment.author,「文章作者」(版主)就是 data:post.author,我是用變數判斷、不是單純的字串比對。
當然,如果留言者的名字「字串」和版主的一模一樣,那也沒辦法解決囉~
本來利用您的方式,已經ok了.
但是,今天就發現到一個問題,就是發表意見的身分那一欄托拉格裡面是空白的.
導致完全不能留言.
有人和解決方案嗎?
謝謝!
请问:打開範本 (Template) 直接修改 HTML,記得要展開 Widget,在 CSS 的區段先加入以下定義(指定作者回應的字型顏色):
你是否可以清楚的说在 CSS 的區段是在那一段文字?
谢谢
我想让网主的回复成为红色。。。谢谢
另外有什么方法可以让blogger的评论有颜色?
To thepplway:
從您的問題看來,大概連基本 CSS 是什麼都不大清楚?希望您先學習相關知識,再發問或動手去修改樣板(這也才看得懂我的回答怎麼改)。所謂 CSS 區段,就是 <head> 標籤後面、<style> </style> 兩個標籤內的區段。
回覆成為紅色,請改 .author-comment 的樣式顏色 (color= xx,xx 請自行指定自己要的色碼代號)。
如果想讓整個評論都有顏色,只要去指定 comment-body 這個 class 的文字顏色樣式就行了。
進行修改原始碼之前,如果沒有基本 HTML 和 CSS 的知識,很難依照自己的樣式需求,調整成自己要的樣子,我這不是「教學網」,最多只能提點幾個修改的關鍵。
在<b:if cond='data:comment.author == data:post.author'>的後面
多加一句<b:if cond='data:comment.authorClass == "blogger-comment-icon"'>
也就是除了判別回應者等於po文者之外也同時等於從Blogger登入的話
應該就不怕別人冒用了~
To 日向(白花花):
你的建議很好,這的確可以減少留言名稱被冒用的問題。
樓樓上的語法好像不能用...
奇怪~
請問一下
在版主名稱後的冒號要怎麼改啊
我想把冒號換成said
但都找不到
阿~我找到了,不用麻煩了
很感謝提供這個功能,不過我有個問題像非作者留言時,旁邊有"提到"二字卻跟作者回應顏色相同,不知道該怎麼修改呢?謝謝
To 麻糬:
請參考我的第三則留言。查看原始碼裡面的字串變數:<data:commentLabelPlural/>,這句就是 "提到",將你的顏色定義移到這句後面,顏色就不會相同了。
我想请问如何在blogger里显示《读者阅读》的方法?目前只有中国博客如搜狐,新浪及WordPress有。
To thepplway:
我不懂你所謂的《读者阅读》是什麼?有演示的網址範例嗎?
http://www.createbloggers.com/susuteh/ 最右边有100views 我要的就是想知道在我的blogger里面每一篇文章有多少人阅读。
不是一天的显示而是开始写文章一直到现在,每一篇文章有多少人浏览了。
谢谢
To thepplway:
OK, 我知道了,這玩意應該算是「每篇文章用的訪客計數器」,我也想過使用這東西,很可惜目前的 Blogger 也不支持這項資訊。
不過坊間有很多「外掛」的服務和工具可以達成,可以搜尋提供「文章計數器」的服務來使用,不過我還沒碰到夠規模或夠效率的,有相關經驗的話我會在另文分享。
您好,關於上面那個問題我還是試驗不出來耶!CSS顏色部份不是應該放在head間嗎?不知道是否能夠再說清楚點呢?謝謝
To 麻糬:
抱歉說錯了,"提到" 這個字串的變數是:data:commentPostedByMsg,並不是 commentLabelPlural。
顏色的問題,CSS 定義是放在 head 間沒錯,但你要「用」的時候,不是也要用標籤類似 class='comment-body'才能套用該定義在版面的特定位置?以我的範例,作者的名字和「提到」二字是套用 comment-author 定義,在回應的「內容」套用 comment-body 的 CSS 定義,所以「提到」二字本來就是和「作者名字」顏色一樣、和「回應內容」顏色不一樣。如果你「提到」二字會和「回應內容」一樣,可能是位置的關係、或是 CSS 定義一樣,沒看到你錯誤的範例和原始碼,我也只能這樣猜測。
非常感謝你的回答,我找到問題囉!因為先前誤解文前定義的css,誤與原先混為一談。:D
Abin兄:
我已套用這個HACK,作者留言的顏色有改變,但是留言者左邊的圖標卻消失了,煩請解惑。
To Bryan:
因為這篇文章的發表日期是兩年半前,當時,Blogger 還沒有支援「留言者左邊的圖標」,因此程式碼裡當然沒有圖標的部份,如果你不是只修改標記成「紅色」部份的程式,而是一整段複製貼上沒檢查,那原本有的圖標就會消失。
為此我修正了本篇文章的內容和程式碼(圖標顯示是上面數來第三行程式),補進了圖標的部份,並參照之前的留言又做了點修改,請重新參考一下。
Abin兄:
感謝您的解惑,搭配留言編號的HACK,留言區增色不少。^^
唔.... 一直顯示
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The element type "b:if" must be terminated by the matching end-tag "
怎麼辦囧
To 真望子:
如果您沒有程式概念,請不要輕易 Hack,不然連最簡單的狀況發生都沒辦法處理。
錯誤訊息裡已經告訴你問題癥結和解決辦法,你貼進去的程式碼裡,有 <b:if 的標籤,卻遺失了 </b:if> 的結束標籤,請檢查你貼入的程式碼中有沒有遺漏。
Abin:
從你這學了很多,也應用了很多你的東西在我的部落格裡,先在這謝謝啦!
我改了作者回應,不過,前面的小圖示不會顯示,或者不管是作者或訪客,都會出現,可以幫我看看嗎?
freejumper-jim.blogspot.com
To Jim:
文末更新我有提到,因為 Blogger 曾新增部份樣板功能,使得留言者前面多了一個識別用圖示,如果你在更新前就用 Blogger 而且改過樣板,那個圖示那不會出現。
我這篇文章針對這個問題也修正過了,主要更動的部份是下面這一行:
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
可以檢查你樣板程式碼裡面的這一行,是不是和我上面這行有些微差異(應該是少了 data:comment.authorClass 這一句吧),補進你的程式碼,小圖示就會出來了。
這個問題我在回應#45也有回答過,請參考。
哈!成功了,小圖示出現了。感恩ㄋ!
不過,我能不能更改自己的小圖示ㄋ?怎麼辦才能讓它去抓我放在某個網址的圖示ㄋ?謝謝!
To Jim:
這個小圖示是 Blogger 官方語法,其實就是套用了一個 CSS class (blogger-comment-icon) 產生的,你如果不想用,就不要套用這一個 class。要使用自己的圖示,那就是在回應的作者標籤前面 (<data:comment.author/>),自己貼入圖片網址 (<img src="圖示網址"/>)。
Hi Abin:
我加了,不過變成一個blogger官方的小圖示,再加一個我自己的,如何把官方的關掉ㄋ?謝謝!
To Jim:
我想你沒看懂我的意思,如果不想出現 blogger 的官方圖示,那 <dt> 那一行一定要回復之前沒有套用 class 的狀況才行(就是你發問前、跑不出小圖是的狀況)。不然你塞你的還是會被蓋掉。
如果你要「作者用自訂圖示」,但留言的人要套用 Blogger 圖示的話,那麼以上程式碼要搬動大改一下,<dt> 那一行分別複製到 if 判斷句區段內,當是原作者時,你就用沒有套用 class 的樣式、帶上自己的圖示檔連結,如果不是原作者,則套用有 class 的樣式。
Hi Abin,
最近在修改我的版型,從你這學到了不少東西,非常謝謝!
另外想請教這個判斷作者的方法能不能改成利用每個人的"profile id"來判斷呢?
因為profile id都是unique,就不用擔心有人名字一樣判斷錯誤
或是如果author曾經改過名字,也不會因為改名就判斷不出來
這方法可行嗎?
To Simone:
能這樣做的話我也希望啊!請看 Blogger 的 Layout Data Tags 裡面,限制了所有可以使用的標籤變數,對某篇文章的特定留言來說,我們能得到的資料只有 author name 和 url,並沒有什麼 profile id 可以存取,不得已才用名稱做判斷。
不過如果你有看懂我的程式碼,我所謂的「用名稱判斷」,也是即時取出文章作者和留言作者名稱來比較,這並不是寫死字串來判斷,所以即便你改名字,這個功能本來就不會有影響,也不會有判斷不出來的問題。
Great! I totally got it!!!
謝謝解說!
abin大,我發現這個hack顏色區別,功能是不是被鎖定了呢?
我也發現這個功能好像不能用了耶!
To jijiong,螢火蟲:
因為Blogger增加了回應區顯示個人圖像功能,所以這個Hack的語法,可能要做過調整,才能做回應顏色區分。
關於Hack語法調整的部份,這部份可能要麻煩Abin有空時再研究囉...
謝謝Davin,這功能非常實用,希望能有機會再找回來。
to:螢火蟲
如果單純只想讓這hack功能顯現的話,請至「設定」/「意見」內下方有個顯示簡介圖片中選「否」,Abin大的這個功能就能恢復哦@@
哈!感謝jijiong!已經恢復了,真是感謝!
To jijiong, Davin, 螢火蟲:
沒錯,因為 Blogger 新增的回應頭像功能,讓這個 Hack 有點失效。不過就像 jijiong 說的,如果有用這個 Hack,請到「設定」、「意見」裡「在評論上顯示簡介圖片」功能勾選到「否」,這個 Hack 就正常了。
本來「在評論上顯示簡介圖片」,只有拿來顯示小圖示(像 Blogger 的 "B" 圖示),我的 Hack 根據網友建議,在判斷作者時除了用名稱,多加一個 Type,只要名稱相同,「而且」 Type 是 Blogger 帳號,這樣就能確保是本文作者。問題在新增的回應頭像功能一旦開啟,「在評論上顯示簡介圖片」就是真的頭像(而不是原來那個小圖示),而且圖像和小圖示「互斥」,顯示簡介圖片後小圖示的作用就消失,連帶影響我判斷作者的 Hack,所以 Hack 才會失效。
結論就是,如果要用這個 Hack (而且不用回應頭像),把「在評論上顯示簡介圖片」關閉即可。如果要用這個 Hack,又想用回應頭像,只要把
<b:if cond='data:comment.authorClass == "blogger-comment-icon"'> 這段 if else 的檢查也拿掉,其實也可以避掉這個問題,要不就等我寫好和回應頭像有關的文章和 Hack 後再一併修改也可以(不過不知道什麼時候有空寫)。
ABIN 哥你好^^ 我是马来亚的朋友… 我想请教ABIN哥,分别作者与一般回应可不可以不只是用文字,而可以相WP那样,让作者的头相现形出来?
抱歉打扰,谢谢!
To Eldy:
回應裡要顯示「頭像」的問題我還沒深入研究,感覺起來有點複雜。如果你是用官方樣板,其實在「設定」->「意見」裡可以打開「在評論上顯示簡介圖片」,順利的話「所有回應」的人都會顯示頭像(當然,你可以拿掉其他人顯示頭像的代碼,那麼就只會有發文作者才有頭像出來)。不過小圖示和頭像你只能選擇一個顯示,這是系統的限制。
如果有興趣的話可以先看這篇文章,我還沒有時間去仔細看看。
Dear Abin 您好:
不好意思,我這幾天試了老半天,
試過一堆人的「作者回應高亮度顯示」,都還是失敗,
(因為最近重新改版,都使用官方的「繼續閱讀」,之前作者高亮度回應是用您的方式,沒頭像是成功的…)
我改版後,是使用「有頭像」的回應,
按您的文章內容設定後,還是不行(也試過取消頭像,但還是不行)
目前就剩這個還不行,可以麻煩請您協助看看是哪裡出了問題嗎?
感激不盡…Orz(跪)
ps.您的Blog真的太棒啦!小弟的Blog一堆功能都是來您這裡挖寶的!
待我新增推薦網頁連結後,一定把您的Blog加入我的推薦^^
Dear Abin 您好:
我又再試了一下,
後來用這篇文章中的方法,是有成功的~
http://01mistery.blogspot.com/2009/03/auther-comments.html
(就是在有人頭標記的狀況下,作者回覆有變色,還可以指定回應區塊顏色…)
不過後來仔細一看,
好像只有在IE(我是用IE7)下可以work,
在我平常用的Chrome(4.0),還是都沒變耶…
有什麼方法可以讓Chrome也顯示變色嗎?
其實我只要像以前一樣,作者回覆文字變色就可以了~這樣才好區分…
對了,忘了留下我的Blog,http://hans543.com
再麻煩您如果有空的話,幫忙看一下喔^^
請問一下哦~
我的訪客留言方式找不到名稱/網址還有匿名的選項也,怎麼辦呢?
哈~拍謝,我找到了,我還以為要修改原始程式才行...= =
原來在留言設定裡面就有嚕~謝謝~
張貼留言
歡迎留言或發表意見,不過要理性、不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除或無視喔!