Recent Comments (7) - 「云华」CloudSino

What is the implementation principle?

It is known that xLog provides a comment RSS subscription feature (this is an XML format file)
(Note: Only the most recent seven entries are displayed)

Therefore, we can write a piece of HTML code to fetch and display it in the style mentioned above
(The code is as follows[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 Subscription Preview</title>
</head>
<body>
    <div class="container-fluid" id="rss-feed"></div>
    <script>
        const RSS_URL = "https://example.com/feed/comments"; //Fill in your comment RSS address here
        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>Published on: ${formattedDate}</i></p>
                        <hr>
                    `;
                    feedContainer.appendChild(feedItem);
                });
            } catch (error) {
                console.error('Failed to load RSS subscription:', error);
                document.getElementById('rss-feed').innerText = 'Unable to load RSS subscription, please try again later.';
            }
        }
        window.onload = loadRSSFeed;
    </script>
</body>
</html>

It is also known that xLog's HTML block cannot insert JS code, but it can embed web pages through the <iframe> method
(The code is as follows[2]:


<iframe src="http://[1]link to the HTML file" seamless width="100%" height="800px" ></iframe>

The single-page hosting link at [2] can use services like Github Pages and Cloudflare Pages, which will not be elaborated here.