Blog 板


LINE

※ 引述《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='&quot;comment-author &quot; + 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='&quot;comment-author &quot; + 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環境板 ξF │ ─┤ │ ├──┬──┬──┬┐┌┬──┬┐ ┌──┬──┐綠色生活,從我開始。 │ ─┤ ┌┤ ││ ─│└┘├┐┌┤│ └┐┌┤ ─ │﹊﹊﹊﹊﹊﹊﹊●﹊﹊ │ │ └┤ ││┌─┤┌┐├┘└┤└─┬┘└┤┌┐│ └────┴──┴──┴┘└┘└┴──┴──┴──┴┘└┘▆▅▅▄▃▂▁ --



※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.175.152.137
1F:推 hguei:認真文~推 09/19 21:46
2F:推 kevin814:大推 :D 09/19 21:47
3F:推 inkydark:推! 09/19 22:33
更正 OpenID 圖示在頭像功能中的顯示描述,應該是跟以前一樣以 16x16 像素顯示。 ※ 編輯: jtmh 來自: 218.175.152.137 (09/20 00:21)
4F:推 strellson:.. 09/20 07:55
5F:推 AsDfJJJ:這篇請板主M一下^^ 09/20 12:25
更正關於無法在頭像功能中顯示匿名人像,甚至把圖示都改成 35x35 像素的描述, Blogger Buster 上已經有讀者留言提出以 CSS 的方式來達成該目標。 ※ 編輯: jtmh 來自: 218.175.148.125 (09/20 20:43)
6F:推 hguei:強制35*35會使得部分頭像變形~所以不是完美解 09/21 21:03
7F:推 kevin814:要保持長寬比好像可以試試看jQuery..又會拖到讀取速度orz 09/21 22:30
8F:推 mchen11:好文,但奇怪不m ? 12/15 16:13







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:Tech_Job站內搜尋

TOP