実装原理?
既知の通り、xLog はコメントの RSS フィード機能を提供しています(これは XML 形式のファイルです)
(注意:最大で最新の 7 つのコメントのみ表示されます)
したがって、私たちは HTML コードを作成して、それを前述のスタイルで表示することができます
(コードは以下の通り [1]:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSSフィード表示</title>
<style>
body {
padding: 20px;
}
.feed-container {
max-width: 600px;
margin: 0 auto;
}
.feed-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.feed-item h2 {
margin: 0;
font-size: 18px;
}
.feed-item p {
font-size: 14px;
color: #666;
}
.feed-item a {
text-decoration: none;
color: #333;
}
.feed-item a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="feed-container" id="rss-feed"></div>
<script>
const RSS_URL = "ここにコメントのRSSアドレスを入力";
async function loadRSSFeed() {
try {
const response = await fetch(RSS_URL);
const rssText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(rssText, "text/xml");
const items = xmlDoc.querySelectorAll("item");
const feedContainer = document.getElementById('rss-feed');
feedContainer.innerHTML = '';
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const pubDate = item.querySelector("pubDate").textContent;
const date = new Date(pubDate);
const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}時${date.getMinutes()}分${date.getSeconds()}秒`;
const feedItem = document.createElement('div');
feedItem.classList.add('feed-item');
feedItem.innerHTML = `
<h2><a href="${link}" target="_blank">${title}</a></h2>
<p>公開日時: ${formattedDate}</p>
`;
feedContainer.appendChild(feedItem);
});
} catch (error) {
console.error('RSSフィードの読み込みに失敗しました:', error);
document.getElementById('rss-feed').innerText = 'RSSフィードを読み込めませんでした。後でもう一度お試しください。';
}
}
window.onload = loadRSSFeed;
</script>
</body>
</html>
また、xLog の HTML ブロックには JS コードを挿入することはできませんが、<iframe>
を使用してウェブページを埋め込むことができます
(コードは以下の通り [2]:
<iframe src="http://[1]のHTMLファイルのリンク" seamless width="100%" height="100%" ></iframe>
[2] の単一ページホスティングリンクは、Github PagesやCloudflare Pagesなどのサービスを使用することができます。ここでは詳細は省略します。