實現原理?
已知,xLog 提供了評論 RSS 訂閱功能 (這是一個 XML 格式文件)
(注意:最多顯示最近七條)
所以,我們可以編寫一段 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 Feed Display</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 Feed加載失敗:', error);
document.getElementById('rss-feed').innerText = '無法加載RSS Feed,請稍後再試。';
}
}
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等服務,此處不再贅述.