banner
「云华」CloudSino

网络一隅/Net`Corner

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

最近のコメント




実装原理?

既知の通り、xLog はコメントの RSS フィード機能を提供しています(これは XML 形式のファイルです)
(注意:最大で最新の 7 つのコメントのみ表示されます)

画像

したがって、私たちは 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>
    <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フィードの読み込みに失敗しました:', 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="100%" ></iframe>

[2] の単一ページホスティングリンクは、Github PagesCloudflare Pagesなどのサービスを使用することができます。ここでは詳細は省略します。

読み込み中...
ページは、創作者によって署名され、ブロックチェーンに安全に保存されています。