Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式

去年底(2021) Blogger 更改了圖片網址格式，詳情可參考「Blogger 圖片大瘦身！官方提供密技轉換成 WebP 格式」→「二、新舊圖片網址格式差異」。 雖不知官方為何要這麼做，但此舉卻是影響很大，許多需要顯示縮圖的工具都可能異常，也包括以前製作的「Blogger 最新文章 V2」。 此次更新的最新文章 V3 版，除了修正新舊圖片網址格式的相容性，也順便加入了 WebP 圖檔格式轉換功能，讓圖片載入速度更快。

點此前往範例網頁

(圖片出處: pexels.com)

一、版面示意圖

基本上版面沒有變動，直接放前一版的示意圖：

二、安裝程式碼

如果安裝過舊版本的話，先刪除原本的小工具，按以下步驟重新新增一個「HTML/JavaScript」小工具即可。 如果沒有安裝過的話，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼： <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> <div id="rp3_area"></div> <div id="rp3_info"><a href="//www.wfublog.com/2022/02/blogger-recent-post-v3.html">ⓦ Recent Posts</a></div> <script> var rp3 = { startIndex: 1, // 從第幾篇最新文章開始 showPost: 5, // 每頁顯示幾篇文章 width: 108, // 縮圖寬度 height: 72, // 縮圖高度 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0J5v0Kk1EMLFsUujsmMW148jucsdV6gFcR3dT4qJHbUyINVq-IDKHXapo2og02tjjL_mr7mPKEFKC1GuEVrT0ch7FnDq4AgO2PLL8-QZqGOZcZ0hyphenhyphenCsQhswF0ZSGOEGeelwfGQWyPo8s7/s1600-rw/wfublog-post.jpg", // 無縮圖的預設圖片 enableWebp: true, // 圖片不想轉換為 webp 格式請改為 false showSummary: true, // 不需要顯示文章摘要請改為 false previewLength: 60, // 預覽文章摘要的字數 summaryLength: 120, // 顯示文章摘要的字數 showPostTotal: true, // 不需要顯示網站總文章數請改為 false nextLogo: "▸", // 下一頁圖示 prevLogo: "◂", // 上一頁圖示 openLogo: "▾", // 展開摘要圖示 closeLogo: "▴", // 收合摘要圖示 readMore: "繼續閱讀 »", // 繼續閱讀提示字串 serialText: "編號", totalText: "總共:" }; rp3.switchPage=function(r,e,t){var a=rp3.showPost,n=rp3.showSummary,o=r>a,p=$("#rp3_postIndex"),s="",i=n?"25%":"50%";r=o?a:r,n&&(s+="<a href='javascript:' class='rp3_openAll' style='width:"+i+"' title='摘要全部展開'>"+rp3.openLogo+"</a><a href='javascript:' class='rp3_closeAll' style='width:"+i+"' title='摘要全部收起'>"+rp3.closeLogo+"</a>"),e>rp3.startIndex?s+="<a class='rp3_prevPage' style='width:"+i+"' href='javascript:' title='上一頁'>"+rp3.prevLogo+"</a>":s+="<span class='rp3_prevPage' style='width:"+i+"'>"+rp3.prevLogo+"</span>",s+=o?"<a class='rp3_nextPage' style='width:"+i+"' href='javascript:' title='下一頁'>"+rp3.nextLogo+"</a>":"<span class='rp3_nextPage' style='width:"+i+"'>"+rp3.nextLogo+"</a>",$("#rp3_switchPage").html(s),$(".rp3_openAll").click(function(){$(".rp3_summary, .rp3_openLogo").hide(),$(".rp3_content, .rp3_closeLogo, .rp3_readMore").show()}),$(".rp3_closeAll").click(function(){$(".rp3_content, .rp3_closeLogo, .rp3_readMore").hide(),$(".rp3_summary, .rp3_openLogo").show()}),$("a.rp3_prevPage").click(function(){rp3.init(e-a)}),$("a.rp3_nextPage").click(function(){rp3.init(e+a)}),p.length&&p.html(rp3.serialText+" "+e+"-"+(e+r-1)+", "+rp3.totalText+" "+t)},rp3.main=function(json){var feed=json.feed;if(feed.entry){var nFetch=feed.entry.length,nIndex=parseInt(feed.openSearch$startIndex.$t),nTotalPost=parseInt(json.feed.openSearch$totalResults.$t),total=rp3.showPost>nFetch?nFetch:rp3.showPost,width=rp3.width,height=rp3.height,imgPara="w"+width+"-h"+height+"-n",summaryLength=rp3.summaryLength,previewLength=rp3.previewLength,reg1=/<.*?>/g,html="",j,i,entry,title,preview,summary,pic,link,info;rp3.enableWebp&&(imgPara+="-rw");var _0x4302c5=_0x414d;(function(r,e){for(var t=_0x414d,a=r();;)try{var n;if(504391===parseInt(t(183))/1*(-parseInt(t(185))/2)+parseInt(t(184))/3*(-parseInt(t(193))/4)+-parseInt(t(195))/5*(-parseInt(t(190))/6)+parseInt(t(191))/7*(-parseInt(t(187))/8)+-parseInt(t(181))/9+parseInt(t(186))/10+parseInt(t(179))/11)break;a.push(a.shift())}catch(r){a.push(a.shift())}})(_0x3fb9,504391),eval(function(r,e,t,a,n,o){var p=_0x414d;if(n=function(r){var e=_0x414d;return(r<62?"":n(parseInt(r/62)))+((r%=62)>35?String[e(189)](r+29):r[e(180)](36))},!""[p(188)](/^/,String)){for(;t--;)o[n(t)]=a[t]||n(t);a=[function(r){return o[r]}],n=function(){var r;return p(192)},t=1}for(;t--;)a[t]&&(r=r[p(188)](RegExp("\\b"+n(t)+"\\b","g"),a[t]));return r}('p(1+="<q>",i=0;i<F;i++){p(j=0,3=G.3[i],6=3.6.$t,b=3.b.$t.f(H,"").r(0,I),s=b.k>u?b.r(0,u):b,4=3.v$w?3.v$w.J:7.K,4.L("-x")<0?4=4.f(/y-c/,z):4=4.f(/y-c-x/,z),4=4.f("M:","");j<3.8.k&&"N"!=3.8[j].O;)j++;8=3.8[j].9,1+="<A>",1+="<a 5=\'P\' 9=\'"+8+"\' g=\'h:"+h+"l;\'><Q R=\'"+4+"\' g=\'h:"+h+"l; B:"+B+"l;\'/></a>",1+="<2 g=\'C-S: T-C;\'>",1+="<2 5=\'U\'><a 9=\'"+8+"\'>"+6+"</a></2>",7.V&&(1+="<2 5=\'W\'><d 5=\'X\' 6=\'展開摘要\'>"+s+"... </d><d 5=\'Y\' 6=\'收起留言\'>"+b+"... </d><d 5=\'Z\'><a 5=\'10\' 9=\'D:\' 6=\'展開摘要\'>"+7.11+"</a><a 5=\'12\' 9=\'D:\' 6=\'收起留言\'>"+7.13+"</a></d><14/><a 5=\'15\' 9=\'"+8+"\'>"+7.16+"</a></2>"),1+="</2><2 g=\'17: 18;\'/></A>"}1+="</q>",7.19&&(1+="<2 m=\'1a\'></2>"),1+="<2 m=\'1b\'></2>",$("#E").1(1),7.1c(1d,1e,1f),o="<a 9=\'//1g.1h.1i/1j/1k/1l-1m-1n-1o.1\' 1p=\'1q \' 6=\'1r 最新文章 1s\\n程式設計: 1t 1u\'>&#1v; 1w 1x</a>";1y $e=$("#e");$e.k?$e.1(o):$("#E").1z("<2 m=\'e\'>"+o+"</2>");',62,98,_0x4302c5(194)[_0x4302c5(182)]("|"),0,{})),$(".rp3_text").click(function(r){var e;"rp3_readMore"!=r.target.className&&$(this).find(".rp3_summary, .rp3_content, .rp3_openLogo, .rp3_closeLogo, .rp3_readMore").toggle()})}else $("#rp3_area").html("<div style='text-align: center;'>目前尚無文章!</div>");function _0x414d(r,e){var t=_0x3fb9();return(_0x414d=function(r,e){var a;return t[r-=179]})(r,e)}function _0x3fb9(){var r=["11VOCwOy","4818nntIsd","4062NagNmU","5198610eoQXtn","1992kNJmkk","replace","fromCharCode","1431696veZnXV","2863XgnjXl","\\w+","2216seUmhT","|html|div|entry|pic|class|title|rp3|link|href||summary||span|rp3_info|replace|style|width|||length|px|id||info|for|ul|substr|preview||previewLength|media|thumbnail|rw|s72|imgPara|li|height|word|javascript|rp3_area|total|feed|reg1|summaryLength|url|noImage|indexOf|http|alternate|rel|rp3_pic|img|src|wrap|break|rp3_postTitle|showSummary|rp3_text|rp3_summary|rp3_content|rp3_toggleLogo|rp3_openLogo|openLogo|rp3_closeLogo|closeLogo|br|rp3_readMore|readMore|clear|both|showPostTotal|rp3_postIndex|rp3_switchPage|switchPage|nFetch|nIndex|nTotalPost|www|wfublog|com|2022|02|blogger|recent|posts|v3|target|_blank|Blogger|V3|WFU|BLOG|9446|Recent|Posts|var|after","15gTCuwi","7098993zTdCOK","toString","3264975HBngAB","split"];return(_0x3fb9=function(){return r})()}},rp3.init=function(r){var e="/feeds/posts/summary?start-index="+(r=r||rp3.startIndex)+"&max-results="+(rp3.showPost+1)+"&alt=json-in-script&callback=rp3.main";$("#rp3_area").html("<div style='text-align: center; margin: 20px auto;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATuJvkpy3TyBQtXW_JJ59fpiTcu6m9jkBoXtHXpCwpiiOqDdLSLIP2VkH56AQHEg_JubYb6aueZcHrVC-1muR1XwNF3Fxkt_fbNxdMtl6TiakzPHvqPlXefdZMOu2u9IzU6-a-X8So4ok/s512/indicator-light.gif'/></div>"),$.getScript(e)},rp3.init(); </script> <style> #rp3_area ul,#rp3_area li{list-style:none;margin:0} #rp3_area li{padding:5px 0;border-bottom:1px solid #eee;text-indent:0;font-size:14px} #rp3_area a,#rp3_info a{text-decoration:none} #rp3_info{float:right;font-size:11px;font-family:helvetica,arial,sans-serif;text-shadow:1px 1px 1px #e6e6fa} #rp3_info a{color:#ccc} .rp3_pic{float:left;margin:0 15px 0 0} .rp3_pic img{margin:0;padding:4px;background:#FFF;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;-moz-box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;opacity:.9} .rp3_pic img:hover{opacity:1} .rp3_postTitle{font-weight:700} .rp3_text{cursor:pointer;margin:5px 0;opacity:.8} .rp3_text:hover{opacity:1} .rp3_toggleLogo{display:none} #rp3_area li:hover .rp3_toggleLogo{display:inline} .rp3_content,.rp3_closeLogo{display:none} .rp3_readMore{display:none;float:right;margin-top:5px;font-size:80%;font-weight:700} #rp3_postIndex{margin:5px 0;text-align:center} #rp3_switchPage{background-color:#eee;margin:5px 0;padding:3px;font-size:20px;line-height:16px} #rp3_switchPage a,#rp3_switchPage span{box-sizing:border-box;display:inline-block;padding:0;border-left:1px dashed #aaa;text-align:center} #rp3_switchPage a:hover{background-color:rgba(100,100,100,0.1)} #rp3_switchPage a:first-child,#rp3_switchPage span:first-child{border-left:0} </style> 如果都使用預設值的話，直接存檔就可開始使用。 如果要修改參數，請參照綠字註解，及以下說明：

• 第一行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
• startIndex: 從第幾篇最新文章開始顯示
• showPost: 一頁顯示幾篇文章
• width: 文章縮圖的寬度 (px)
• height: 文章縮圖的高度 (px)
• noImage: 藍色圖片網址，請自行置換為文章無縮圖時的預設顯示圖片。
• enableWebp: 圖片是否轉換為 WebP 格式
• showSummary: 是否顯示文章摘要
• previewLength、summaryLength: 設定預覽文章摘要、及所有文章摘要的字元數。
• showPostTotal: 是否顯示網站總文章數
• nextLogo、prevLogo、openLogo、closeLogo: 可修改為自訂的圖示字元，請參考「copypastecharacter.com」或「特殊符號字元一覽表」。
• readMore、serialText、totalText: 自訂顯示的字串

三、使用說明

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

• 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。
• 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」；如果是「自訂」的話，請檢查「網誌文章資訊提供」，不可以設定為「無」，最新文章才能顯示摘要內容。
• 文章標題的連結，在文章編輯器 → 文章設定 → 連結 → 這裡請勿使用「標題連結」

2. 圖示字元改用圖片的方法 請參考「Blogger 最新文章 V2」→「四、常見 FAQ」→「Q1」。

更多 Blogger 工具：