Recent Comments (7) - ｢雲華｣CloudSino

What is the implementation principle?

It is known that xLog provides a comment RSS subscription feature
(Note: Only the most recent seven will be displayed)

Therefore, we can write a piece of HTML code to fetch and display it in the style shown at the beginning.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RSS Comment Subscription</title>
    <style>
        body {
            margin: 0;
        }
        .item {
            margin-bottom: 10px;
            border-bottom: 1px solid white;
            padding-bottom: 5px;
        }
        .title {
            margin-bottom: 5px;
            padding: 10px;
        }
                .title a {
                        text-decoration: none; /* Remove link underline */
                        color: inherit; /* Use parent element's color */
                }
        .date {
          font-size: smaller;
          color: gray;
        }
        .markdown img { max-width: 100%; height: auto; }
    </style>
</head>
<body>

<div id="rss-content">Loading...</div>

<script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
<script>
    function parseRSS(url) {
        fetch(url)
            .then(response => response.text())
            .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
            .then(data => {
                const items = data.querySelectorAll("item");
                let output = "";
                const converter = new showdown.Converter();

                items.forEach(item => {
                    let title = item.querySelector("title").textContent;
                    const pubDate = item.querySelector("pubDate")?.textContent;
                    const link = item.querySelector("link").textContent; // Get link

                    // Convert IPFS links (including inside <a> tags)
                    title = title.replace(/<a href="ipfs:\/\/(.*?)">(.*?)<\/a>/g, '<a href="https://ipfs.crossbell.io/ipfs/$1">$2</a>');
                    title = title.replace(/ipfs:\/\/(.*?)/g, "https://ipfs.crossbell.io/ipfs/$1");

                    const htmlTitle = converter.makeHtml(title);

                    output += `
                        <div class="item">
                            <div class="title"><a href="${link}" target="_blank">${htmlTitle}</a></div>
                            ${pubDate ? `<div class="date">${new Date(pubDate).toLocaleString()}</div>` : ''}
                        </div>
                        <hr>
                    `;
                });
                document.getElementById("rss-content").innerHTML = output;
            })
            .catch(error => {
                console.error("Error fetching RSS:", error);
                document.getElementById("rss-content").innerHTML = "Load failed.";
            });
    }

    const urlParams = new URLSearchParams(window.location.search);
    const rssUrl = urlParams.get('url');

    if (rssUrl) {
        parseRSS(rssUrl);
    } else {
        document.getElementById("rss-content").innerHTML = "Please provide the RSS URL parameter. For example: /?url=https://cloud.sd.cn/feed/comments";
    }
</script>

</body>
</html>

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


<iframe src="https://rss.cloud.sd.cn/?url=https://cloud.sd.cn/feed/comments" seamless width="100%" height="800px" ></iframe>

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

Of course, if you don't mind, you can also use my ready-made service,
The link is " https://rss.cloud.sd.cn/?url=[Your RSS subscription link here]" with the same insertion method as above.