概要
ジンドゥークリエイターで、ブログ記事一覧を表示させる方法について書きます。
ジンドゥーで、トップページに最近のブログ記事を載せたい場合、もっとも簡単な方法は、「RSSフィード」を使う方法です。
在ル在リさんという方の、「Jimdoのトップページにブログの新着記事を表示させる」というnote記事が詳しいです。
とはいえ、この記事にもあるとおり、ジンドゥーオリジナルのデザインは見づらいです。
CSSで頑張るにしても、HTMLを編集できないので限界があります。
そこで、HTMLも編集できるようなスクリプトを書きました。
2023年10月時点では機能します。
（今後、Jimdoの仕様変更があれば機能しなくなるかもしれません。）
<div id="my_blog_list">
<template id="my_blog_list_template" data-mybloglist-count="5">
<div>
<span class="my_blog_list_date">Y年 M月 D日</span>
<a href="#" class="my_blog_list_link">
<span class="my_blog_list_title">タイトル</span>
</a>
</div>
</template>
</div>
<script>
/* <![CDATA[ */
{
'use strict';
fetch( new URL('/rss/blog', location.origin) )
.then(res => res.text())
.then(xml => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xml, 'text/xml');
const items = [...xmlDoc.querySelectorAll('item')];
const template = document.getElementById('my_blog_list_template');
const count = template.dataset.mybloglistCount | 0;
const fragment = items.filter((_, i) => (i <= count)).reduce((frag, item) => {
const clone = template.content.cloneNode(true);
const dataDate = new Date(item.querySelector('pubDate')?.textContent);
const formatDate = clone.querySelector('.my_blog_list_date').textContent;
const dispDate = formatDate.replace(/[YMD]/g, match => (match === 'Y') ? dataDate.getFullYear()
: (match === 'M') ? (dataDate.getMonth() + 1).toString().padStart(2, '0')
: (match === 'D') ? dataDate.getDate().toString().padStart(2, '0')
: match );
clone.querySelector('.my_blog_list_date').textContent = dispDate;
clone.querySelector('.my_blog_list_title').textContent = item.querySelector('title')?.textContent;
const linkUrl = new URL(item.querySelector('link')?.textContent);
clone.querySelector('.my_blog_list_link').href = linkUrl.pathname;
frag.appendChild(clone);
return frag;
}, document.createDocumentFragment());
document.getElementById('my_blog_list').appendChild(fragment);
}).catch(err => {
console.error(err);
})
}
/*]]>*/
</script>
内容
スクリプトの内容を簡単にまとめます。
- HTMLは、ちらつきが出ないように、templateタグで囲んでおきます。
-
/rss/blogに、記事のxmlファイルがあるので、fetch APIでアクセスして、パーサで読み込みます。 - 新しい記事をdata-mybloglist-countの数だけを繰り返します。
- 日付、タイトル、リンク先は、それぞれquerySelectorで読み取ります。
- 日付のYMDを、年月日に置き換えます。
- fragmentにまとめて、最後に追加します。
descriptionは、再度パーサを使うと読み込みできると思います。
使い方
使い方は簡単です。
- Jimdoのトップページで、「コンテンツを追加」を押します。
- 「その他のコンテンツ&アドオン」を押します。
- 「ウィジェット/HTML」を押します。
- 入力画面に、上記のスクリプトをコピペします。
無事、表示されたら、HTML部分を編集してください。
注意点
- 編集画面では表示されません。
- 古いブラウザだと動かないかもしれません。
- ブラウザのJavaScriptが機能している必要があります。
- ジンドゥーのblog機能を有効する必要があります。
- 冒頭に書いたとおり、ジンドゥーの仕様変更があれば、機能しなくなるかもしれません。