Re: [Blogger] 官方版本留言頭像功能發布
※ 引述《kevin814 (某Ken)》之銘言：
前文恕刪
: --題外話
: 改完之後發現favIcon功能跟頭像功能似乎是互斥的，不曉得有沒有方法兩個同時顯示O_O
分享一下我目前觀察到的一點心得，
有錯的話請不吝指教，也歡迎大家一起尋找解法。
以前的 favicon 圖示總共有三種，
即 Blogger, OpenID, 以及 匿名人像 三種圖示，
它們都是以 16x16 像素的大小顯示。
而現在剛推出的頭像功能則以 Blogger 帳號的頭像為主，
有設頭像的話會以 35x35 像素的大小顯示，
沒設的話就跟以前一樣以 16x16 像素大小顯示 Blogger 的圖示。
但不同的是現在 OpenID 圖示 和 匿名人像 都不見了，
取而代之的是 16x16 像素大小的 空白。
更正：OpenID 圖示還是跟以前一樣以 16x16 像素的大小顯示。
照這樣來看，理論上 favicon 圖示應該是有可能整合進頭像功能中的，
比方說在頭像功能下可以讓 OpenID 圖示 和 匿名人像 都再度顯示回來，
甚至也可以把 Blogger, OpenID 圖示 和 匿名人像 都改以 35x35 像素顯示，
不過這樣的話也許還要再把那三張圖示換成解析度較大的版本。
以上是就概念上的層面來講的，但實際要去修改時，
就會牽涉到，或者是說，受限於 Blogger 範本中的寫法。
以我目前所用的官方範本為例：
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " +
data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px'
style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
...
</dt>
...
</b:loop>
</dl>
紅色部分是這次頭像功能新增的，
第一行在要顯示時會動態展開為 class="avatar-comment-indent"，
它是用來指定頭像排版時要往內縮排多少空間的。
其真正的樣式是在一個 Blogger 共用的外部 CSS 檔中，
名為 1918764323-widget_css_bundle.css，內容則為：
#comments-block .avatar-comment-indent {
margin-left: 45px;
position: relative
}
#comments-block .avatar-comment-indent dd {
margin-left: 0
}
如果有需要，只要在自己的範本中重複定義該樣式，
就可以覆寫掉原本的縮排方式。
紅色的後三行則是顯示頭像的關鍵，
只要有在後台「意見設定」處把「在評論上顯示簡介圖片？」設為「是」，
此處的 if 條件判斷式就會成立，
於是中間的 <data:comment.authorAvatarImage/> 就展開成 <div>...</div>。
不過這個展開過程似乎不是我們可以自行更改的 (除非自己完全重新寫過)，
所以也就無法如前面一開始說要
但我們仍可透過 CSS 把 OpenID 圖示 和 匿名人像 都再度顯示回來，
甚至把 Blogger, OpenID 圖示 和 匿名人像 都改以 35x35 像素顯示了。
更正：事實證明我錯了，Blogger Buster 上已經有讀者留言提出方法：
.avatar-image-container img {
background: url(
http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/LeBlogger.jpg);
width: 35px;
height: 35px;
}
原文網址請參閱 http://tinyurl.com/mqhm53 。
上述的想法遇到問題了，
那麼有可能如原 po 所說的 favicon 圖示和頭像功能兩者同時顯示嗎？
先再看一次前面官方範本中綠色的部分：
<dt expr:class='"comment-author " +
data:comment.authorClass' expr:id='data:comment.anchorName'>
此部分在要顯示時會動態展開為下列三者之一：
1. blogger-comment-icon
2. openid-comment-icon
3. anno-comment-icon
這三者剛好分別對應 favicon 的三種圖示，可用來指定如何顯示這三種圖示。
跟前面紅色第一行的情形相同，
其真正的樣式也是在 1918764323-widget_css_bundle.css 中，內容為：
#comments .blogger-comment-icon, .blogger-comment-icon {
line-height: 16px;
background: url(/img/b16-rounded.gif) left no-repeat;
padding-left: 20px
}
#comments .openid-comment-icon, .openid-comment-icon {
line-height: 16px;
background: url(/img/openid16-rounded.gif) left no-repeat;
padding-left: 20px
}
#comments .anon-comment-icon, .anon-comment-icon {
line-height: 16px;
background: url(/img/anon16-rounded.gif) left no-repeat;
padding-left: 20px
}
同樣的，如果有需要，只要在自己的範本中重複定義該樣式，
就可以覆寫掉原本的圖示與排版。
但是事情並非這麼順利，就如原 po 所注意到的，
favicon 圖示和頭像功能似乎是互斥的，問題何在？
我發現在頭像功能打開時，上述的綠色部分就無法再展開成那三種 ...-icon，
而是直接就被「吃掉」(不做任何展開) 了。
那麼，我們能自己手動把本來要展開出來的 ...-icon 加進範本中嗎？
因為我們沒有其他方式可判斷留言者的身分種類，
也就無法知道每一則留言各要加入哪一種 ...-icon，
所以我們最多只能全部都加入同一種 ...-icon，但這樣無法達到辨視的效果。
這也是我在原 po 文章中推文提到的問題所在：
我的留言 hack 正是版友 a892245 在 #19KH6-sh 文章的作者回應上色功能，
網頁版在 http://lingshu1005.blogspot.com/2008/12/blogger.html ，
該 hack 的特色便是用 blogger-comment-icon 來辨別網誌作者。
因為 data:comment.authorClass 不再做任何展開，
結果頭像功能一打開該 hack 就破功了，目前也只能先取消頭像功能來避開。
最後，要順帶一提的是，前面官方範本中藍色的部分：
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px'
style='margin-bottom:-2px;' width='16px'/>
</b:if>
此段目前好像還沒有作用，因為我找不出方法能讓 if 條件判斷式成立。
我猜其中的 data:comment.favicon 有可能是要讓我們自訂 favicon 圖示的，
但在後台設定中似乎又找不到可以設定的地方。
也許幾天後這又會是 Blogger 十週年的另一個禮物吧 XD
後記：呼，本來並沒有想到會寫這麼多，結果寫著寫著就越寫越多了，
後來又覺得都已經寫這麼多了，不繼續寫完前面就白寫了，
結果這篇就變成現在這麼冗長的文章了 冏rz
總之，感謝大家看到這裡，希望大家多多指教 :)
--
┌────┐國家研究院◆ Academy◆ EarthEnviron◆ Ecophilia環境板 ξＦ
│ ─┤
│ ├──┬──┬──┬┐┌┬──┬┐ ┌──┬──┐綠色生活，從我開始。
│ ─┤ ┌┤ ││ ─│└┘├┐┌┤│ └┐┌┤ ─ │﹊﹊﹊﹊﹊﹊﹊●﹊﹊
│ │ └┤ ││┌─┤┌┐├┘└┤└─┬┘└┤┌┐│ ●◣◢
└────┴──┴──┴┘█└┘└┴──┴──┴──┴┘└┘▆▅▅▄▃▂▁ ◢
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.175.152.137
推
09/19 21:46, , 1F
09/19 21:46, 1F
推
09/19 21:47, , 2F
09/19 21:47, 2F
推
09/19 22:33, , 3F
09/19 22:33, 3F
更正 OpenID 圖示在頭像功能中的顯示描述，應該是跟以前一樣以 16x16 像素顯示。
※ 編輯: jtmh 來自: 218.175.152.137 (09/20 00:21)
推
09/20 07:55, , 4F
09/20 07:55, 4F
推
09/20 12:25, , 5F
09/20 12:25, 5F
更正關於無法在頭像功能中顯示匿名人像，甚至把圖示都改成 35x35 像素的描述，
Blogger Buster 上已經有讀者留言提出以 CSS 的方式來達成該目標。
※ 編輯: jtmh 來自: 218.175.148.125 (09/20 20:43)
推
09/21 21:03, , 6F
09/21 21:03, 6F
推
09/21 22:30, , 7F
09/21 22:30, 7F
推
12/15 16:13, , 8F
12/15 16:13, 8F
討論串 (同標題文章)