部落格備份網

2019/04/12 改版紀錄
簡化原文所有步驟，只需在任何一個側欄加入一行語法即可
<script src="//s3-ap-northeast-1.amazonaws.com/appmarket-blogbackup/pixApp/js/pix_relate_articles.js" type="text/javascript"></script>

下圖紅色區塊是本文所要分享的外掛
  

此外掛的功能是當訪客在瀏覽文章A時,在文章A結尾處會顯示與文章A相同類別的最新五篇文章

安裝此外掛程式有兩個步驟.[兩個都要做嘿!!]
1.Javascript 語法如下,請連到 https://panel.pixnet.cc/blog/sidecolumn 新增一個側邊攔位區塊放置
或是放置在[公告版位] 或是[頁尾描述]

<div id="DebugZone"></div><script type="text/javascript">// <![CDATA[var sCategoryID;jQuery(function($){ if($("#blog-main").length){return;}//取得文章IDvar ArticleID=$("#article-main").attr("data-article-id");//取出文章,截取分類ID$.getJSON("https://emma.pixnet.cc/blog/articles/"+ArticleID+"?user="+pix.owner+"&format=json", function(json){if(json.error!="0"){$("#DebugZone").append("https://emma.pixnet.cc/blog/articles/"+ArticleID+"?user="+pix.owner+"&format=json <br>");$("#DebugZone").append("Message:" + data.message + "<br>");return;} sCategoryID=json.article.category_id;//文章個人分類ID//取出該分類6篇文章(只顯示五篇) $.getJSON("https://emma.pixnet.cc/blog/articles?user="+pix.owner+"&per_page=6&status=2&format=json&category_id=" + sCategoryID, function(data){if(data.error!="0"){$("#DebugZone").append("Message:" + data.message + "<br>");return;}$("#article-box").append('<div id="related-box" class="my-Related-box"></div>');$("#related-box").append('<div id="related-item" class="my-Related-Post"><h5>這個類別其他的文章</h5></div>');$("#related-item").append('<ul id="my_relate" class="myrelate"></ul>');var li_item =''; //取出同分類文章$.each(data.articles, function(i,blog){if(blog.id!=ArticleID && $("#my_relate li").length<5){var li_item = ('<li><a href="' + blog.link + '" class="relate-link" title="' + blog.title + '">');li_item += ('<div class="relate-thumb">');li_item += ('<img src="' + blog.thumb + '" class="article-image">');if(blog.title.length>12){li_item += ('<span class="relate-title">' + blog.title.substring(0,11) + '...</span>');}else{li_item += ('<span class="relate-title">' + blog.title + '</span>');}li_item += ('</div></a></li>');$("#my_relate").append(li_item);}});});});});// ]]></script>

2.CSS 語法如下,請放置在 https://panel.pixnet.cc/theme/blog/editcss 

/*相關文章使用*/.article-image { width: 90px; height: 90px; border-radius: 15px;/*文章縮圖的外框,45px會變成圓的*/}#related-item { height: 200px; width: 620px; text-align: center; margin: 0px auto;}#related-item li { float: left; width: 150px; height: 140px; padding: 8px; width:90px; border-radius: 10px 30px; /*每篇文章綠色外框不對稱圓角設定,只設定一個會讓四個角一樣*/ border: 2px solid #73AD21;/*每篇文章綠色外框*/ margin: 5px; font-size: 14px;}#related-item ul { height: 170px; padding-left: 10px; background-color: #E6EFD2;/*綠色背景,拿掉可移除背景色*/ -webkit-border-radius: 15px; border-radius: 10px 30px;}.relate-link { text-decoration: none;}#related-item li:hover{ background: #fff; color:black; border: 2px solid #CE2323;}#related-item a:hover{ color:black;}#DebugZone { display: none;}

以上~

若有任何問題需要解決,請不要移除語法再跟我說唷!