[blogger] 安裝blogger相關文章(releated post)功能





因為blogger一直都沒有相關文章的功能，所以之前有找過幾種服務來幫部落格加入相關文章的連結。不過蠻多服務目前好像都已經GG了，現在還剩下linkwithin還活著。不過我新建的blog卻一直顯示Invalid blog URL，所以只好找其他方法。

試著安裝WFU的v2版本，結果裝不起來。最新的v4版本內容好像被隱藏了。所以最後只好找國外看看有沒有人有方法的，先是找到了這篇，但是完全試不出來。
https://rpw.moretechtips.net/setup/index.html

然後在github找到另一個方法，可以成功安裝，但是覺得看起來不夠漂亮，所以只好繼續找。
https://github.com/salmanarshad2000/blogger-related-posts-widget

最後找到了這篇：
https://www.freshtechtips.com/2019/05/related-posts-widget-for-blogger-blogspot.html

試了一下有成功裝起來，效果也還不錯，以下介紹安裝步驟。

安裝步驟

[Step1] 加入CSS

在</head>的前方加入以下的css
<style>
#related-posts{
    float:center;
    text-transform:none;
    height:100%;
    padding-top:20px;
    padding-left:5px;
    font-size:15px;
    border-top:1px solid #ddd;
    margin-top:25px
}
#related-posts h2{
    font-size:25px;
    text-transform:none;
    letter-spacing:0em;
    color:#555;
    font-family:Georgia,sans-serif;
    margin-bottom:.7em;
    margin-top:0em;
    padding-top:0em
}
#related-posts a{
    font-family:Georgia,serif;
    text-align:center;
    border-right:1px dotted #DDD;
    color:#2361A1;
    padding:10px 10px 0 10px!important;
    min-height:250px
}
#related-posts a:hover{
    background-color:#E5E5E5
}
</style>

[Step2] 加入程式碼

在步驟1的下方加入以下程式碼，可依自己需求調整post_thumbnail_width(縮圖寬度)，post_thumbnail_height(縮圖高度)，max_related_entries(文章數量)三個參數。
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var post_thumbnail_width = 144;
var post_thumbnail_height = 96;
var max_related_entries = 6;

function escapeRegExp(string){return string.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function replaceAll(str,term,replacement){return str.replace(new RegExp(escapeRegExp(term),"g"),replacement)}function display_related_posts(json_feed){for(var defaultnoimage="https://i.ibb.co/yS6JvBh/no-image.jpg",post_titles=new Array,title_num=0,post_urls=new Array,post_thumbnail_url=new Array,relatedpoststitle=(window.location.href,"You might also like:"),border_color="#DDDDDD",i=0;i<json_feed.feed.entry.length;i++){var feed_entry=json_feed.feed.entry[i];post_titles[title_num]=feed_entry.title.$t;try{post_thumbnail_url[title_num]=feed_entry.media$thumbnail.url}catch(error){s=feed_entry.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d?post_thumbnail_url[title_num]=d:"undefined"!=typeof defaultnoimage?post_thumbnail_url[title_num]=defaultnoimage:post_thumbnail_url[title_num]="https://i.ibb.co/yS6JvBh/no-image.jpg"}for(var k=0;k<feed_entry.link.length;k++)"alternate"==feed_entry.link[k].rel&&(post_urls[title_num]=feed_entry.link[k].href,title_num++)}var random_entry=Math.floor((post_titles.length-1)*Math.random()),iteration=0;if(post_titles.length>0){var rp_heading=document.createElement("h2"),textnode=document.createTextNode(relatedpoststitle);rp_heading.appendChild(textnode),document.getElementById("related-posts").appendChild(rp_heading);var rp_container=document.createElement("div");rp_container.setAttribute("style","clear: both;"),rp_container.setAttribute("id","rp-container"),document.getElementById("related-posts").appendChild(rp_container)}for(;iteration<post_titles.length&&20>iteration&&max_related_entries>iteration;)if(post_urls[random_entry]!=currentURL){var rp_anchor=document.createElement("a");0!=iteration?rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;border-left: none "+border_color+";"):rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;"),rp_anchor.setAttribute("id","rp-anchor-"+iteration),rp_anchor.setAttribute("href",post_urls[random_entry]),document.getElementById("rp-container").appendChild(rp_anchor);var rp_img=document.createElement("img");rp_img.setAttribute("style","width:"+post_thumbnail_width+"px;height:"+post_thumbnail_height+"px; border:1px solid #CCCCCC;"),rp_img.setAttribute("id","rp-img-"+iteration);var pin=String(post_thumbnail_url[random_entry].match(/\/s72-c\//));post_thumbnail_url[random_entry]=replaceAll(post_thumbnail_url[random_entry],pin,"/w"+post_thumbnail_width+"-h"+post_thumbnail_height+"-p/"),rp_img.setAttribute("src",post_thumbnail_url[random_entry]),rp_img.setAttribute("alt","Matched post excerpt thumbnail in the post footer."),document.getElementById("rp-anchor-"+iteration).appendChild(rp_img);var rp_para=document.createElement("div");rp_para.setAttribute("style","width:"+post_thumbnail_width+"px; height:"+post_thumbnail_height+"px;border: 0pt none ; margin: auto; padding-top: 18px; line-height:1.6;"),rp_para.setAttribute("id","rp-para-"+iteration);var textnode=document.createTextNode(post_titles[random_entry]);rp_para.appendChild(textnode),document.getElementById("rp-anchor-"+iteration).appendChild(rp_para),iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0}else iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0;post_urls.splice(0,post_urls.length),post_thumbnail_url.splice(0,post_thumbnail_url.length),post_titles.splice(0,post_titles.length)}
/*]]>*/
</script>
</b:if>

[Step3] 加入程式碼到要擺放的位置

這段跟原始教學網頁的做法不太一樣，可能是blogger用的模板不同的關係，我是搜尋class='post-footer'會找出三個位置，在這三個位置的下方各別加入以下程式碼:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop index='labelcount' values='data:post.labels' var='label'>
<script>
  var currentURL = &#39;<data:blog.url/>&#39;;
</script>
<b:if cond='data:labelcount &lt; 1'>
<script async='async' expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=display_related_posts&quot;' type='text/javascript'/></b:if></b:loop>
</div><div style='clear:both'/>
</b:if>

完成以上三步驟，應該就可以看到相關文章出現在blogger中了。


2021.10.09更新

最近碰到了點問題，就是關聯文章只要有出現最近寫的文章，就會出現縮圖模糊的狀況，發現是因為最近blogger的圖床格式改變造成的。

稍微追了一下上面的相關文章程式碼，發現邏輯是會先抓到一張很小(S72)的縮圖網址，然後再透過字串取代的方式，取得尺寸較大的圖片網址。

而因為最近blogger的圖床格式有改變，所以造成新的格式無法成功取代字串，所以沒辦法找到尺寸較大的縮圖網址，還是用最先找到的S72來放大，所以縮圖就模糊了。

以前圖片大小參數是在前面網址：
https://1.bp.blogspot.com/[圖片碼1]/[圖片碼2]/[圖片碼3]/[圖片碼4]/s72-c/[filename].jpg


現在變成在後面設定：
https://blogger.googleusercontent.com/img/a/[圖片碼]=s72-c


原本取代的方式是將網址列的"/s72-c/"取代成"/w144-h96-p/"，這邊144和96分別是對應上面設定的post_thumbnail_width和post_thumbnail_height。

但原本取代的方式有包括前後兩個"/"，於是最簡單的修改方式是忽略兩個"/"，單純只要把s72-c替代成w144-h96-p就可以了。

所以第一步先把程式碼的這個部分：
var pin = String(post_thumbnail_url[random_entry].match(/\/s72-c\//));


改成下面這樣：
var pin = String(post_thumbnail_url[random_entry].match(/s72-c/));



第二步把程式碼這個部分：
post_thumbnail_url[random_entry] = replaceAll(post_thumbnail_url[random_entry], pin, "/w" + post_thumbnail_width + "-h" + post_thumbnail_height + "-p/"), rp_img.setAttribute("src", post_thumbnail_url[random_entry]), rp_img.setAttribute("alt", "Matched post excerpt thumbnail in the post footer."), document.getElementById("rp-anchor-" + iteration).appendChild(rp_img);


改成下面這樣：
post_thumbnail_url[random_entry] = replaceAll(post_thumbnail_url[random_entry], pin, "w" + post_thumbnail_width + "-h" + post_thumbnail_height + "-p"), rp_img.setAttribute("src", post_thumbnail_url[random_entry]), rp_img.setAttribute("alt", "Matched post excerpt thumbnail in the post footer."), document.getElementById("rp-anchor-" + iteration).appendChild(rp_img);


這兩步都改好縮圖就正常了。


Tags
較新的 較舊