♫ みんのブログ ♫

本文引自http://blogbackup.pixnet.net/blog/post/442760468#comment-119136452

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

此外掛的功能是當訪客在瀏覽文章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;} //取得文章ID var 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">'); 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; } #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; } #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; }

以上~

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