痞客邦我的相關文章外掛--hunt教學

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

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

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

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

或是放置在[公告版位] 或是[頁尾描述]

// <![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 "); $("#DebugZone").append("Message:" + data.message + " "); 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 + " "); return; } $("#article-box").append(' '); $("#related-box").append(' 這個類別其他的文章 '); $("#related-item").append(' '); var li_item =''; //取出同分類文章 $.each(data.articles, function(i,blog){ if(blog.id!=ArticleID && $("#my_relate li").length '); li_item += (' '); li_item += (' '); if(blog.title.length>12){ li_item += (' ' + blog.title.substring(0,11) + '... '); } else{ li_item += (' ' + blog.title + ' '); } li_item += (' '); $("#my_relate").append(li_item); } }); }); }); }); // ]]>

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; }

以上~

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

♫ みんのブログ ♫

☼ 天天有晴天 ☼