已知, 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等服务, 此处不再赘述.