全自動顯示摘要/圖片

全自動顯示摘要/圖片

次

突然發覺寫這類文章很好玩，決定再寫幾篇。
在blogger這個地方要安穩有趣的生活，除了多年吐槽的需要，還有就是DIY了。對於一個主動派來說，我很樂意去改變世界，但是世界并不給我源代碼。在網絡上就便捷多了，就算別人不給你，也有辦法觀看。（壞人

進入正題。


我要介紹的一種便捷的顯示摘要辦法。合適新版的blogger（貌似使用傳統版本的人都消失了。因為blogger沒有主動提供這種功能，所以就得靠自己HACK了。在網上也流傳很多這類的文章，不過我看到大多數中文博客都是半自動。故此有了以下:

第一步。

打開編輯HTML。
找到 </head>
把下面這段代碼放入 </head> 前<script src='summary-posts.js' type='text/javascript'/><script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 250;summary_img = 250;img_thumb_height = 120;img_thumb_width = 120;</script>

其中的summary-posts.js。這裡可以下載。


下邊的js說明。

var thumbnail_mode = "float" ; — 這裡是控制左側的圖片浮動(float)或者是不浮動(no-float)。
summary_noimg = 250; — 當文章沒有圖片時顯示的字符多少。
summary_img = 250; — 有縮圖時字符多少。（這話真廢。
img_thumb_height = 120; — 顯示的縮圖像素高
img_thumb_width = 120; — 縮圖寬

第二步

找到<data:post.body/>
替換成
<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary-" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary-");</script> <a class='readmore' expr:href='data:post.url'>歡迎你到天涯海角來»</a> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
"歡迎你到天涯海角來» "這幾個字可以隨便改。比如改成 "點擊偷窺更多"。之類的。

最後一步

添加樣式CSS
找個可以放CSS的地方放進去。（可以不放的。這段是用來調整"歡迎你到天涯海角來“的樣子的，比如在前方放個小圖標什麽的。
a.readmore {/* CSS properties go here */}

最後一步plus

SAVE.
--------參考於Read More hack--------