最近评论(7條) - ｢云华｣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訂閲預覽</title>
</head>
<body>
    <div class="container-fluid" id="rss-feed"></div>
    <script>
        const RSS_URL = "https://example.com/feed/comments"; //此處填寫你的評論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.innerHTML = `
                        <h3><b><a href="${link}" target="_blank">${title}</a></b></h3>
                        <p><i>發佈時間為: ${formattedDate}</i></p>
                        <hr>
                    `;
                    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="800px" ></iframe>

[2] 处的单页托管链接可以使用Github Pages和Cloudflare Pages等服务，此处不再赘述.