記事に関連記事を追加するJS

目的

muragonのカスタマイズ。
投稿記事と関連する記事表示が無い。
この為、記事のカテゴリー・タグと同じ記事を、記事下に先頭画像とタイトルを3件表示する。

Javascript

$(function() {
var li_url = [];
var li_ttl = [];
var li_img = [];
var li_cnt = 0;
var li_max = 3; /* 表示件数 */

$(function() {
var url = window.location.href;
var uid = url.replace(/https:\/\/(.*)\.muragon\.com\/(.*)/,"$1");
$(".entry-contents .entry-tag-list-item").each(function(i) {

/* タグページ取得 */
var tag = $(this).context.innerText;
tag = encodeURI(tag);
var turl = 'https://' + uid + '.muragon.com/tag/?q=' + tag;

$.ajax({
url: turl,
async: false,
cache: false,
success: function(getData) {
$(".list-contents-item",getData).each(function(j) {
var ttl = $(".entry-title",this).text();
var href = 'https:' + $(".entry-title",this).find("a").attr("href");

/* 自記事を除く */
if (url != href) {
if (li_cnt < li_max) {

/* 既に登録済み */
var flg = 0;
for (var i=0;i<li_cnt;i++) {
if (li_url[i] == href) {
flg = 1;
}
}

/* 新規登録 */
if (flg == 0) {
li_url[li_cnt] = href;
li_ttl[li_cnt] = ttl;
li_cnt ++ ;
}
}
}
});
}
});
});

/* 記事の1番目の画像取得 */
for(var i=0;i<li_cnt;i++) {
$.ajax({
url: li_url[i],
async: false,
cache: false,
success: function(getData) {
li_img[i] = $(".entry-body img",getData).eq(0).attr("src");
}
});
if (li_img[i] == undefined) {
li_img[i] = 'サムネイル無し画像のURL';
}
}

/* HTML出力 */
if (li_cnt != 0) {
html = '<div class=related><div class=title>関連記事</div><ul>';
for (var i=0;i<li_cnt;i++) {
html = html + '<li><a href="' + li_url[i] + '">' + '<figure><img src="' + li_img[i] + '"></figure><div class=rep>' + li_ttl[i] + '</div></a></li>';
}
for (var i=li_cnt;i<li_max;i++) {
html = html + '<li></li>';
}
html = html + '</ul></div>'
$(".entry-body").after(html);
}
})
});

CSS

/* 見出し */
.related .title {
font-size : 20px;
color : #333;
font-weight : bold;
}

/* リスト */
.related ul {
display : flex;
list-style : none;
padding : 0;
justify-content : space-between;
}

.related li:empty {
visibility : hidden;
}

.related li {
width : 180px;
border : 1px solid #ccc;
overflow : hidden;
}

/* 関連記事サムネイル */
.related img {
display : block;
width : 180px;
height : 180px;
}

/* 関連記事タイトル */
.related .rep {
overflow : hidden;
display : block;
margin : 10px;
height : 4.2em;
line-height : 1.4;
font-weight : bold;
font-size : 14px;
}

バグレポート

日付現象原因対策
2017年12月26日IEの時、動作しない。カテゴリー・タグ一覧ページのURLに日本語が含まれる。この時、ページが取得できない。カテゴリー・タグをencodeURIを用いエンコードした後、カテゴリー・タグ一覧ページを取得する。