最近评论 - 「云华」CloudSino

实现原理?

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