banner
「云华」CloudSino

网络一隅/Net`Corner

愿我的祝福与你同在!
github
bilibili
zhihu
steam
misskey
follow
email

Recent Comments (7)




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)

Image

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.

Loading...
Ownership of this page data is guaranteed by blockchain and smart contracts to the creator alone.