Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

2022.02.07 公告：此工具目前已更新到 V3 版，請前往新版安裝頁面：「Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式」。


之前寫的舊版工具「最新文章」已經很久沒有更新，由於前陣子「BLOGGER 支援 HTTPS」之後，很多 Blogger 工具都需要修改才能相容於 HTTPS 模式，因此藉這個機會來改版，除了加強縮圖的呈現方式，也新增不少功能。

以下先介紹更新的功能列表，想直接安裝請跳至「二、安裝程式碼」。

點此前往範例網頁

(圖片出處: pixabay.com)

本文索引

• 一、功能更新及修正
• 二、安裝程式碼
• 三、使用說明
• 四、常見 FAQ

一、功能更新及修正

1. 新增功能



首先看一下上圖為新版本的效果圖，新增的功能有：

• 支援 HTTPS
• 整合上下頁導航及摘要全部開合按鈕：按鈕區域變大，操作更方便。
• 新增摘要功能：含摘要預覽、顯示全部摘要切換。
• 自訂 CSS：可自行調整全部的版面配置。

2. 修正功能

• 縮圖尺寸：舊版本的縮圖只能固定寬度、無法調整寬高比例，新版本可設定縮圖自動裁切為指定尺寸，整體版面較為美觀。
• 調整了版面配置：更為友善的使用者體驗。

二、安裝程式碼

如果安裝過舊版本的話，先刪除原本的小工具，按以下步驟重新新增一個「HTML/JavaScript」小工具即可。

如果沒有安裝過的話，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

1. <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
2. <div id="rp2_area"></div>
3. <div id="rp2_info"><a href="https://www.wfublog.com/2015/10/blogger-recent-post-v2.html">ⓦ Recent Posts</a></div>
4. <script>
5. var brp2 = {
6. startIndex: 1, // 從第幾篇最新文章開始
7. showPost: 5, // 每頁顯示幾篇文章
8. width: 108, // 縮圖寬度
9. height: 72, // 縮圖高度
10. noImage: "//3.bp.blogspot.com/-4JBpCsqL6a4/Vh3ciHoReQI/AAAAAAAAMq8/WMHCDhvnj4M/s1600/wfublog-post.jpg", // 無縮圖的預設圖片
11. showSummary: "Y", // 不需要顯示文章摘要請改為 "N"
12. previewLength: 60, // 預覽文章摘要的字數
13. summaryLength: 120, // 顯示文章摘要的字數
14. showPostTotal: "Y", // 不需要顯示網站總文章數請改為 "N"
15. nextLogo: "▸", // 下一頁圖示
16. prevLogo: "◂", // 上一頁圖示
17. openLogo: "▾", // 展開摘要圖示
18. closeLogo: "▴", // 收合摘要圖示
19. readMore: "繼續閱讀 »", // 繼續閱讀提示字串
20. serialText: "編號",
21. totalText: "總共:"
22. };
23.  
24. brp2.switchPage=function(f,b,a){var h=brp2.showPost,e=brp2.showSummary,g=(f>h),c=$("#rp2_postIndex"),d="",i=(e=="Y")?"25%":"50%";f=g?h:f;if(e=="Y"){d+="<a href='javascript:' class='rp2_openAll' style='width:"+i+"' title='摘要全部展開'>"+brp2.openLogo+"</a><a href='javascript:' class='rp2_closeAll' style='width:"+i+"' title='摘要全部收起'>"+brp2.closeLogo+"</a>"}if(b>brp2.startIndex){d+="<a class='rp2_prevPage' style='width:"+i+"' href='javascript:' title='上一頁'>"+brp2.prevLogo+"</a>"}else{d+="<span class='rp2_prevPage' style='width:"+i+"'>"+brp2.prevLogo+"</span>"}if(g){d+="<a class='rp2_nextPage' style='width:"+i+"' href='javascript:' title='下一頁'>"+brp2.nextLogo+"</a>"}else{d+="<span class='rp2_nextPage' style='width:"+i+"'>"+brp2.nextLogo+"</a>"}$("#rp2_switchPage").html(d);$(".rp2_openAll").click(function(){$(".rp2_summary, .rp2_openLogo").hide();$(".rp2_content, .rp2_closeLogo, .rp2_readMore").show()});$(".rp2_closeAll").click(function(){$(".rp2_content, .rp2_closeLogo, .rp2_readMore").hide();$(".rp2_summary, .rp2_openLogo").show()});$("a.rp2_prevPage").click(function(){brp2.init(b-h)});$("a.rp2_nextPage").click(function(){brp2.init(b+h)});if(c.length){c.html(brp2.serialText+" "+b+"-"+(b+f-1)+", "+brp2.totalText+" "+a)}};brp2.main=function(json){var feed=json.feed;if(!feed.entry){$("#rp2_area").html("<div style='text-align: center;'>目前尚無文章!</div>");return}var nFetch=feed.entry.length,nIndex=parseInt(feed.openSearch$startIndex.$t),nTotalPost=parseInt(json.feed.openSearch$totalResults.$t),total=(brp2.showPost>nFetch)?nFetch:brp2.showPost,width=brp2.width,height=brp2.height,summaryLength=brp2.summaryLength,previewLength=brp2.previewLength,reg1=/<.*?>/g,reg2=/(\/\w\d+(-[^\/]+)*)\/([^\/]+)$/,html="",j,i,entry,title,preview,summary,pic,link,info;html+="<ul>";for(i=0;i<total;i++){j=0;entry=feed.entry[i];title=entry.title.$t;summary=entry.summary.$t.replace(reg1,"").substr(0,summaryLength);preview=(summary.length>previewLength)?summary.substr(0,previewLength):summary;pic=entry.media$thumbnail?entry.media$thumbnail.url:brp2.noImage;pic=pic.replace(reg2,"/w"+(width*2)+"-h"+(height*2)+"-n/$3").replace("http:","");while(j<entry.link.length&&entry.link[j].rel!="alternate"){j++}link=entry.link[j].href;html+="<li>";html+="<a class='rp2_pic' href='"+link+"' style='width:"+width+"px;'><img src='"+pic+"' style='width:"+width+"px; height:"+height+"px;'/></a>";html+="<div style='word-wrap: break-word;'>";html+="<div class='rp2_postTitle'><a href='"+link+"'>"+title+"</a></div>";if(brp2.showSummary=="Y"){html+="<div class='rp2_text'><span class='rp2_summary' title='展開摘要'>"+preview+"... </span><span class='rp2_content' title='收起留言'>"+summary+"... </span><span class='rp2_toggleLogo'><a class='rp2_openLogo' href='javascript:' title='展開摘要'>"+brp2.openLogo+"</a><a class='rp2_closeLogo' href='javascript:' title='收起留言'>"+brp2.closeLogo+"</a></span><br/><a class='rp2_readMore' href='"+link+"'>"+brp2.readMore+"</a></div>"}html+="</div><div style='clear: both;'/></li>"}html+="</ul>";if(brp2.showPostTotal){html+="<div id='rp2_postIndex'></div>"}html+="<div id='rp2_switchPage'></div>";var _0xcb3d=["\x24\x28\x22\x23\x33\x22\x29\x2E\x31\x28\x31\x29\x3B\x35\x2E\x36\x28\x37\x2C\x38\x2C\x39\x29\x3B\x32\x3D\x22\x3C\x61\x20\x62\x3D\x27\x63\x3A\x2F\x2F\x64\x2E\x65\x2E\x66\x2F\x67\x2F\x68\x2F\x69\x2D\x6A\x2D\x6B\x2D\x6C\x2E\x31\x27\x20\x6D\x3D\x27\x6F\x20\x27\x20\x70\x3D\x27\u6700\u65B0\u6587\u7AE0\x2B\u4EFB\u610F\u5C3A\u5BF8\u7E2E\u5716\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x71\x20\x72\x27\x3E\u24E6\x20\x73\x20\x74\x3C\x2F\x61\x3E\x22\x3B\x75\x20\x24\x30\x3D\x24\x28\x22\x23\x30\x22\x29\x3B\x76\x28\x24\x30\x2E\x77\x29\x7B\x24\x30\x2E\x31\x28\x32\x29\x7D\x78\x7B\x24\x28\x22\x23\x33\x22\x29\x2E\x79\x28\x22\x3C\x34\x20\x7A\x3D\x27\x30\x27\x3E\x22\x2B\x32\x2B\x22\x3C\x2F\x34\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x72\x70\x32\x5F\x69\x6E\x66\x6F\x7C\x68\x74\x6D\x6C\x7C\x69\x6E\x66\x6F\x7C\x72\x70\x32\x5F\x61\x72\x65\x61\x7C\x64\x69\x76\x7C\x62\x72\x70\x32\x7C\x73\x77\x69\x74\x63\x68\x50\x61\x67\x65\x7C\x6E\x46\x65\x74\x63\x68\x7C\x6E\x49\x6E\x64\x65\x78\x7C\x6E\x54\x6F\x74\x61\x6C\x50\x6F\x73\x74\x7C\x7C\x68\x72\x65\x66\x7C\x68\x74\x74\x70\x73\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x35\x7C\x31\x30\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x72\x65\x63\x65\x6E\x74\x7C\x70\x6F\x73\x74\x7C\x76\x32\x7C\x74\x61\x72\x67\x65\x74\x7C\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x52\x65\x63\x65\x6E\x74\x7C\x50\x6F\x73\x74\x73\x7C\x76\x61\x72\x7C\x69\x66\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x64","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x16a5x1,_0x16a5x2,_0x16a5x3,_0x16a5x4,_0x16a5x5,_0x16a5x6){_0x16a5x5=function(_0x16a5x3){return _0x16a5x3.toString(_0x16a5x2)};if(!_0xcb3d[5][_0xcb3d[4]](/^/,String)){while(_0x16a5x3--){_0x16a5x6[_0x16a5x5(_0x16a5x3)]=_0x16a5x4[_0x16a5x3]||_0x16a5x5(_0x16a5x3)}_0x16a5x4=[function(_0x16a5x5){return _0x16a5x6[_0x16a5x5]}];_0x16a5x5=function(){return _0xcb3d[6]};_0x16a5x3=1}while(_0x16a5x3--){if(_0x16a5x4[_0x16a5x3]){_0x16a5x1=_0x16a5x1[_0xcb3d[4]](new RegExp(_0xcb3d[7]+_0x16a5x5(_0x16a5x3)+_0xcb3d[7],_0xcb3d[8]),_0x16a5x4[_0x16a5x3])}}return _0x16a5x1}(_0xcb3d[0],36,36,_0xcb3d[3][_0xcb3d[2]](_0xcb3d[1]),0,{}));$(".rp2_text").click(function(e){if(e.target.className=="rp2_readMore"){return}var $this=$(this);$this.find(".rp2_summary, .rp2_content, .rp2_openLogo, .rp2_closeLogo, .rp2_readMore").toggle()})};brp2.init=function(a){a=a||brp2.startIndex;var b="/feeds/posts/summary?start-index="+a+"&max-results="+(brp2.showPost+1)+"&alt=json-in-script&callback=brp2.main";$("#rp2_area").html("<div style='text-align: center; margin: 20px auto;'><img src='//lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif'/></div>");$.getScript(b)};brp2.init();
25. </script>
26.  
27. <style>
28. #rp2_area ul,
29. #rp2_area li {
30. list-style: none; margin: 0; padding: 0;
31. }
33. #rp2_area li {
34. padding: 5px 0;
35. border-bottom: 1px solid #eee;
36. text-indent: 0;
37. font-size: 14px;
38. }
40. #rp2_area a,
41. #rp2_info a {
42. text-decoration: none;
43. }
45. #rp2_info {
46. float: right;
47. font-size: 11px;
48. font-family: helvetica, arial, sans-serif;
49. }
51. #rp2_info a {
52. color: #ccc;
53. }
55. .rp2_pic {
56. float: left;
57. margin: 0 15px 0 0;
58. }
60. .rp2_pic img {
61. margin: 0;
62. padding: 4px;
63. background: #FFF;
64. box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
65. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
66. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
67. opacity: 0.9;
68. }
70. .rp2_pic img:hover {
71. opacity: 1;
72. }
74. .rp2_postTitle {
75. font-weight: bold;
76. }
78. .rp2_text {
79. cursor: pointer;
80. margin: 5px 0px;
81. opacity: 0.8;
82. }
84. .rp2_text:hover {
85. opacity: 1;
86. }
88. .rp2_toggleLogo {
89. display: none;
90. }
92. #rp2_area li:hover .rp2_toggleLogo {
93. display: inline;
94. }
96. .rp2_content,
97. .rp2_closeLogo {
98. display: none;
99. }
101. .rp2_readMore {
102. display: none;
103. float: right;
104. margin-top: 5px;
105. font-size: 80%;
106. font-weight: bold;
107. }
109. #rp2_postIndex {
110. margin: 5px 0;
111. text-align: center;
112. }
114. #rp2_switchPage {
115. background-color: #eee;
116. margin: 5px 0;
117. padding: 3px;
118. font-size: 20px;
119. line-height: 16px;
120. }
122. #rp2_switchPage a,
123. #rp2_switchPage span {
124. box-sizing: border-box;
125. display: inline-block;
126. padding: 0;
127. border-left: 1px dashed #aaa;
128. text-align: center;
129. }
131. #rp2_switchPage a:hover {
132. background-color: rgba(100, 100, 100, 0.1);
133. }
135. #rp2_switchPage a:first-child,
136. #rp2_switchPage span:first-child {
137. border-left: 0;
138. }
139. </style>

如果都使用預設值的話，直接存檔就可開始使用。

如果要修改參數請參照以上程式碼行號：

A：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

F：可設定從第幾篇最新文章開始顯示

G：一頁顯示幾篇文章

H：設定文章縮圖的寬度 (px)

I：設定文章縮圖的高度 (px)

J：藍色圖片網址，請自行置換為文章無縮圖時的預設顯示圖片。為了相容於 HTTPS 模式，網址開頭請勿使用 "http:" 字串。

K：設定是否顯示文章摘要

L~M：分別設定預覽文章摘要、及所有文章摘要的字元數。

N：設定是否顯示網站總文章數

O~R：可修改為自訂的圖示字元，請參考「copypastecharacter.com」或「特殊符號字元一覽表」。但不少字元在行動裝置、或較舊的瀏覽器版本可能無法正常顯示，請用行動裝置自行測試看看。如果想改用圖片顯示的話，請參考「四、常見 FAQ」→ Q1 的詳細說明。

S~U：可自訂顯示的字串

AA~EI：如果熟悉 CSS 的話，可修改這裡的參數。

三、使用說明

如果發現這個最新文章小工具無法顯示，請先檢查以下項目：

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」；如果是「自訂」的話，請檢查「網誌文章資訊提供」，不可以設定為「無」，最新文章才能顯示摘要內容。

3. 文章標題的連結，在文章編輯器 → 文章設定 → 連結 → 這裡請勿使用「標題連結」，否則會發生留言 #5 的狀況。

如果還有其他問題，請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出，會再補充到「四、常見 FAQ」。

四、常見 FAQ

Q1: openLogo 和 closeLogo 參數，能夠改用圖片嗎？

Ans: 如果要使用圖片的話，請將字串改為以下格式：

openLogo: "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-5c3SSZgh91PXNJ1z3sjZYfdhr6lLYJvpjAvH8n5_MmkTS-YuUTrl8W5VWtAUyg7BngtAXesEZ-vMuV2zZHFdEhqm3j98jMlS-A-xgR4l-CuD31312-TkBuWobH1nqfuEg6I2RhZYiZy/s14/right.png'/>",

藍色字串改為自訂圖片網址即可，closeLogo 的改法以此類推。

而使用圖片時，「上一頁/下一頁」按鈕，無論有無作用，顏色都會一樣，那麼可在 CSS 最後一行插入以下語法：

#rp2_switchPage span {
opacity: 0.5;
}
如此可讓無作用的按鈕，圖案的顏色較淡，以示區別。


Q2: 用Flickr嵌入圖片好像就無法顯示縮圖了，不知道要怎麼修改呢？

Ans: 這個工具並不支援 Flickr 圖床，抓取縮圖的原理請參考「舊版最新文章」→「一、從 Json 資料找縮圖」，從 Blogger 後台上傳的圖片，才能被儲存為 feed 之中的縮圖網址格式，讓這個小工具讀取。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，每篇文章的第一張圖，從 Blogger 後台上傳，即可讓此工具顯示文章縮圖。

目前這個工具的設計是讀取 feed 的摘要內容，執行速度會比較快，若要支援 Flickr，那麼必須改為讀取 feed 的完整內容，會拖累讀取時間，因此暫時沒考慮這麼做。如果需求很多的話，那麼改版時再納入此點。

更多 Blogger 工具：