- BloggerでJavascriptを使って、簡単に記事を取得し表示する
http://saskwave.blogspot.jp/2014/06/blogger-saskwave-feed-entry-collection.html - Bloggerにsaskwave.jsを組み込んでみよう
http://saskwave.blogspot.jp/2014/06/blogger-build-in-saskwave.html
- Blogger単独で最近の投稿を表示する方法 (Recent Posts)
http://saskwave.blogspot.jp/2014/06/blogger-recent-posts.html
- LatestPostsConfigで表示件数や表示の制御ができる
- jQueryとsaskwave.jsが必要
- saskwave.jsによって記事取得と表示が分離されているのでレイアウト設計が簡単
- jQueryによる簡易な記述
- 利用は自由(でも利用したらコメントください！)
- HTML/Javascriptガジェットに貼り付けるだけでOK
- 無名関数により極力グローバル変数を使わない実装
ではコードを掲載します。
「最近の投稿」と「更新された投稿」の設置方法
都合上、CSSコードとHTML/Javascriptコードは分けて掲載してますが、一纏めにしてHTML/Javascriptガジェットに貼り付けて問題なしです。それではCSSコードです。
「最近の投稿」と「更新された投稿」ウィジェット両対応で不具合修正版です。
<style type="text/css">
#LatestPosts ul {
list-style: none;
margin: 0;
padding: 0;
}
#LatestPosts ul li {
margin: 2px 0px 2px;
border-bottom: 1px dotted rgb(195, 195, 195);
}
#LatestPosts li:nth-of-type(1) {
padding-top: 5px !important;
}
#LatestPosts li:nth-last-of-type(1) {
padding-botttom: 0px !important;
border-style: none;
}
#LatestPosts img {
height: 72px;
width: 72px;
padding: 0px;
margin: 1px 3px 0px 0px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
#LatestPosts a:hover,
#LatestPosts img:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
#LatestPosts .item-content {
margin-top: 3px;
}
/* This class belongs to the LatestPosts only. */
#LatestPosts .item-date {
font-size: 90%;
color: rgb(120, 120, 120);
display: block;
}
#LatestPosts .item-title,
#LatestPosts .item-title a {
margin: 3px 0;
font-size: 13px;
font-weight: bold;
color: rgb(204, 0, 34);
text-decoration: none;
}
#LatestPosts .item-title a:link,
#LatestPosts .item-title a:visited,
#LatestPosts .item-title a:hover,
#LatestPosts .item-title a:active {
color: rgb(204, 0, 34);
}
#LatestPosts .item-title a:link,
#LatestPosts .item-title a:hover,
#LatestPosts .item-title a:active {
text-decoration: none;
}
#LatestPosts .item-snippet {
/* Hides the overflow area over height attribute. */
border-style: none;
margin-bottom: 5px;
padding-top: 5px;
font-size: 12px;
line-height: 120%; /* 150% */
height: 6em; /* (1.2 * 5) = 6em */
overflow: hidden;
}
/* This hack uses webkit specific feature.
This will be used only in google chrome. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#LatestPosts .item-snippet {
line-height: 120%; /* 150% */
height: 5.9em; /* (1.2 * 5) = 6em - α */
overflow: hidden;
}
}
#LatestPosts .item-thumbnail {
float: left;
margin: 0px 5px 5px 0px;
}
#LatestPosts .no-thumbnail-72x72 {
width: 72px;
height: 72px;
display: block;
background-repeat: no-repeat;
/* no photo img. */
background-image: url(data:image/png;base64,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);
}
</style>
CSSコードはちょっと長くなりますね。次はHTML/Javascriptコードです。
以前の「最近の投稿」ウィジェットより半分程度にコード量が減っています。
実質、表示に関するコードのみになっているので手直しが簡単となります。
<div id="LatestPosts" class="latest-posts">
<div class="latest-posts-hook"><!-- HOOK UP --></div>
<script type="text/javascript">
var LatestPostsConfig = {
showMode : 'published', // 'published'|'updated'
showResults : 10,
showDate : true,
showThumbnail: true,
showSnippet : true,
};
</script>
<script type="text/javascript">
(function(){
var feColl = new Saskwave.FeedEntryCollection();
feColl.setOrderType(LatestPostsConfig.showMode);
feColl.setNumEntries(LatestPostsConfig.showResults);
feColl.collect(function(entries){
var rootNode = $('#LatestPosts .latest-posts-hook');
var ulNode= $('<ul>');
var liNode= null;
var divNode = null;
var node= null;
var e, t;
for(var i = 0; i < LatestPostsConfig.showResults; i++){
if(i == entries.length){
break;
}
e = entries[i];
liNode= $('<li>');
divNode = $('<div>').attr('class', 'item-content');
if(LatestPostsConfig.showDate){
if(LatestPostsConfig.showMode == 'published'){
t = e.publishedDate;
}else if(LatestPostsConfig.showMode == 'updated'){
t = e.updatedDate;
}
node = $('<div>').attr('class', 'item-date').text(t.substring(0, 10));
divNode.append(node);
}
node = $('<div>').attr('class', 'item-title');
node.append($('<a>').attr({ 'target':'_self', 'href':e.link }).text(e.title));
divNode.append(node);
if(LatestPostsConfig.showThumbnail){
node = $('<div>').attr('class', 'item-thumbnail');
node.append($('<a>').attr({ 'target':'_self', 'href':e.link }).html(
((e.hasThumbnail()) ? $('<img>').attr('src', e.thumbnail) : $('<a>').attr('class', 'no-thumbnail-72x72'))
));
divNode.append(node);
}
if(LatestPostsConfig.showSnippet){
t = e.contentSnippet.substring(0, 191) + '…';
node = $('<div>').attr('class', 'item-snippet').html(t);
divNode.append(node);
}
liNode.append(divNode);
liNode.append($('<div>').css('clear', 'both'));
ulNode.append(liNode);
}
rootNode.append(ulNode);
});
})();
</script>
</div>
</div>
上のLatestPostsConfigに関しては説明が必要ですね。抜粋して説明すると、以下のようになります。
<script type="text/javascript">
var LatestPostsConfig = {
// 投稿日降順なら'published'を指定、更新日降順なら'updated'を指定。
showMode : 'published',
// ウィジェットに表示する投稿件数。
showResults : 10,
// 日付を表示するかどうか。
showDate : true,
// サムネイル画像を表示するかどうか。
showThumbnail: true,
// 投稿本文の一部分を表示するかどうか。
showSnippet : true,
};
</script>
こんな感じです。
saskwave.jsさえ設置してしまえば、あとは楽に弄れますよ。ちなみに表示サンプルは以下の項目をご覧ください。
表示サンプル
それぞれ、日付＋タイトル、日付＋タイトル＋スニペット、全部表示といった感じです。
0 件のコメント:
コメントを投稿