微语/说说/微博/Mricoblog 嵌入博客网页

<div id="pocketbase">
    <div id="tweetList"></div>
    <a id="moreButton" href="#" onclick="showMore(); return false;">更多</a>
</div>

<script type="text/javascript" src="/js/moment.js"></script>

<script type="text/javascript">
    const tweetList = document.getElementById('tweetList');
    const moreButton = document.getElementById('moreButton');
    const apiUrl = "https://api.ftls.xyz/api/collections/whispers/records";
    let currentPage = 1;

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function displayTweets(tweets) {
        tweets.forEach(tweet => {
            const blockquote = document.createElement('blockquote');
            const createdAtDiv = document.createElement('div');
            createdAtDiv.textContent = moment(tweet.createdAt).twitter(); // moment.js 或者 相对时间 Lately.js 
            const contentDiv = document.createElement('div');
            contentDiv.innerHTML = escapeHtml(tweet.text).replace(/\!\[.*\]\((.+)\)/g, '<img src="$1" loading="lazy" />');
            blockquote.appendChild(createdAtDiv);
            blockquote.appendChild(contentDiv);
            tweetList.appendChild(blockquote);
        });
        // window.Lately && Lately.init({ target: '.lately' }); // 相对时间 Lately.js 初始化
    }

    function fetchTweets(page) {
        const params = new URLSearchParams({
            sort: '-createdAt',
            perPage: 10,
            page: page
        });
        const url = `${apiUrl}?${params.toString()}`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                displayTweets(data.items);
                if (data.page < data.totalPages) {
                    moreButton.style.display = 'block';
                    currentPage = data.page + 1;
                } else {
                    moreButton.style.display = 'none';
                }
            });
    }

    function showMore() {
        moreButton.style.display = 'none';
        fetchTweets(currentPage);
    }

    // 页面加载时获取第一页推文
    fetchTweets(currentPage);
</script>
<!-- 简易样式；如果 Hugo 主题有样式可能会被覆盖 -->
<style>
    blockquote {
        margin: 0;
    }

    blockquote p {
        padding: 15px;
        background: #eee;
        border-radius: 5px;
    }
</style>

<div id="toots"></div>
<button id="toots-moreButton" onclick="tootsShowMore()">更多</button>

<script>
    let maxId = null; // 初始值为 null，表示第一页
    const tootsDiv = document.getElementById('toots');
    const tootsMoreButton = document.getElementById('toots-moreButton');

    // 获取 Mastodon 用户公开Toots
    async function getPublicToots() {
        const queryParams = maxId ? ("?limit={{ .Get 2 | default 5 }}&max_id=" + maxId) : "?limit={{ .Get 2 | default 5 }}";
        const response = await fetch("{{ .Get 0 }}/api/v1/accounts/{{ .Get 1 }}/statuses" + queryParams);
        const toots = await response.json();
        return toots;
    }

    // 将Toots显示在页面上
    async function displayToots() {
        try {
            const toots = await getPublicToots();
            if (toots && toots.length > 0) {
                toots.forEach(toot => {
                    const tootDiv = document.createElement('div');
                    tootDiv.innerHTML = `<p>${toot.content}</p><hr>`;
                    tootsDiv.appendChild(tootDiv);
                    maxId = toot.id; // 更新最大 ID
                });
                tootsMoreButton.style.display = 'block';
            } else {
                tootsMoreButton.style.display = 'none';
            }
        } catch (error) {
            console.error('获取Toots时出错：', error);
            tootsMoreButton.style.display = 'none';
        }
    }

    function tootsShowMore() {
        displayToots();
    }

    displayToots();

    // 页面加载时调用显示Toots函数
    // window.onload = displayToots;
</script>