読者です 読者をやめる 読者になる 読者になる

平日WEB系SE 週末時々自転車屋

WEB系の技術ネタや大好きなお酒、週末手伝う自転車屋の話などを書きます。

はてなブログの記事下にサムネイル付きの関連記事を出して回遊性をUP!!!(2015 6/10 6/16 6/26 7/6バグ修正版)

※2015 6/16 ブラウザによるcss('background-image')の戻り値の違いを吸収するように修正しました。

※2015 6/26 jQueryを独自に読み込んだ方が早いので、独自に読み込むように修正しました。また、関連記事は後から処理を行っても良いので、3秒たってから読み込む処理を行うよう修正しました。

2015 7/6 ブラウザによるtoArray()の戻り値の違いを吸収するように修正しました。

CSSjavascriptを分離

先日公開したサムネイル付きの関連コンテンツ表示スクリプトですが、やはりコードが長すぎるので、CSSと分離しました。

 

前回の記事はこちら 

jitenshaya-se.hatenablog.com

 

一部バグ対応

併せて細かい修正ですが、サムネイルや概要文を記事に設定していない場合、エラーとなってしまう不具合を見つけたので一緒に修正しました。

 

最初のjqueryの読み込みは不要だった

はてブが下の記事の対応をされていて、jqueryをいきなり使おうとすると読み込みの順番の関係で動かないのですが、こちらの元のコードが良くできていて、jqueryが読み込まれるまで処理を待って処理を始めるコードになっていたのではずしました。

と書きましたが、 独自にjQueryを読み込んだ方が明らかに早いので、独自に読み込むように修正しました。

 

staff.hatenablog.com

 

で、完成したのがこれです。

少し要らない行を削って、コメントを入れたりしてみました。

javascirpt

/*jQueryの読み込み*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* 関連コンテンツ */
setTimeout(function(){
var defaultConfig = {
parentSelector: 'article',
maxEntries: 3, // or -1 for unlimited
template: [
'<div class="same-category-entries">',
'<% _.each(categories, function (category) { %>',
'<% if (category.entries.length > 0) { %>',
'<div class="same-category-entries-category">',
'<h2 class="same-category-entries-category-title"><a class="same-category-entries-category-name" href="/category/<%- category.name %>"><%- category.name %></a>カテゴリの他の記事</h2>',
'<ul class="same-category-entries-list">',
'<% _.each(category.entries, function (entry) { %>',
'<li class="same-category-entries-entry">',
'<% if (entry.thumnailurl.length > 0) { %>',
'<a href="<%- entry.url %>"><span class="same-category-entries-entry-thum" ><img src ="<%- entry.thumnailurl %>"></span><span class="same-category-entries-entry-title" ><%- entry.title %>></span><div class="same-category-entries-entry-date"><%- entry.published.getFullYear() %>/<%- entry.published.getMonth() + 1 %>/<%- entry.published.getDate() %></div></a>',
'<% }else{ %>',
'<a href="<%- entry.url %>"><span class="same-category-entries-entry-thum" ></span><span class="same-category-entries-entry-title" ><%- entry.title %>></span><div class="same-category-entries-entry-date"><%- entry.published.getFullYear() %>/<%- entry.published.getMonth() + 1 %>/<%- entry.published.getDate() %></div></a>',
'<% } %>',
'</li>',
'<% }) %>',
'</ul>',
'</div>',
'<% } %>',
'<% }) %>',
'</div>'
].join('')
};
var config = $.extend(defaultConfig, window.__hatenablog_show_same_category_entries);

var origin = location.protocol + '//' + location.host;
//2015 7/6 ブラウザによるtoArray()の戻り値の違いを吸収するように修正しました。
var categoryobjs = $('.categories').find('a');
var categoryobjscount = categoryobjs.length;
var categorytags = [];
for(var i=0 ; i < categoryobjscount; i++){
categorytags.push(categoryobjs.eq(i).text());
}

var startFetchCategoryEntries = function (d, categories) {
d = d || $.Deferred();
categories = categories || [];
var categoryTag = categorytags.shift();
if (!categoryTag) {
d.resolve(categories);
return d;
}
var category = {
name: categoryTag,
entries: []
};
(function (feed) {
$.ajax(origin + '/archive/category/' + encodeURIComponent(category.name)).done(function (feed) {
$(feed).find('section').each(function () {
var $feedEntry = $(this);

var entry = $feedEntry.find('h1').find('a');
var thum = $feedEntry.find('.entry-thumb').css('background-image');
var thum2 = "";
//※2015 6/16 ブラウザによるcss('background-image')の戻り値の違いを吸収するように修正しました。
// if(thum){
// var thum1 = thum.substr(0,thum.length-1);
// var thum2 = thum1.substr(4);
// }
 if(thum){
if( thum.match( /^url\(["']?(.*?)["']?\)/i )[1] != null ) {
thum2 = thum.match( /^url\(["']?(.*?)["']?\)/i )[1];
}
}
var desc = $feedEntry.find('.entry-description');
var summary = "";
if(desc.text().length >0){
var summary = desc.text().substr(0,100)+"...";
}
var entry = {
title: entry.text(),
url: entry.attr('href'),
thumnailurl: thum2,
summary: summary,
published: new Date($feedEntry.find('time').attr('datetime'))
};

if (entry.url === origin + location.pathname) return;
entry.url = entry.url + "?recommend=" + location.pathname;

category.entries.push(entry);

if (category.entries.length >= config.maxEntries && config.maxEntries !== -1) {
return false;
}
});

categories.push(category);

startFetchCategoryEntries(d, categories);
}).fail(function (xhr) {
(console.error || console.log).call(console, xhr);
});

return d;
};

startFetchCategoryEntries().done(function (categories) {
var html = _.template(config.template, { categories: categories });
var $html = $($.parseHTML(html));
$entry.before($html);
});
});
},3000);
});
</script>

※2015 6/16 ブラウザによるcss('background-image')の戻り値の違いを吸収するように修正しました。

※2015 6/26 jQueryを独自に読み込んだ方が早いので、独自に読み込むように修正しました。また、関連記事は後から処理を行っても良いので、3秒たってから読み込む処理を行うよう修正しました。

※2015 7/6 ブラウザによるtoArray()の戻り値の違いを吸収するように修正しました。。

CSS

.same-category-entries {
font-size: 90%;
}
.same-category-entry-summary {
color: #666;
}
a.same-category-entries-category-name, a.same-category-entries-category-name:visited {
color: inherit;
}
.same-category-entries-category-name:before {
content: "【";
}
.same-category-entries-category-name:after {
content: "】";
}
.same-category-entry-meta {
color: #CCC;
margin-top: 0.5em;
}
.same-category-entries-category-title{
border-bottom: 1px solid #000;
margin-bottom:5px;
}
.same-category-entries-list{
list-style: outside none none;
padding-left: 0;
margin-bottom:0;
}
.same-category-entries-entry {
border-bottom: 0.1em solid #000;
padding-left: 0;
margin: 1em 0em;
}
.same-category-entries-entry-thum{
float:left;
margin-right: 10px;
}
.same-category-entries-entry a{
color: #333333;
position: relative;
display: inline-block;
}
.same-category-entries-entry-title{
margin: 0;
text-decoration: underline;
}
.same-category-entries-entry-date{
color: #696969;
}