博客头部滚动展示 最近的memos 基于memos v0.22.2

使用了最新的memos v0.22.2

https://memos.ee/api/v1/memos?pageSize=5&filter=visibilities%20==%20[%27PUBLIC%27]%20%26%26%20creator%20==%20%27users/1%27
其中
pageSize为查询的memo个数
users/1为查询的用户UID

优化了一些获取滚动memos的方式

<div id="bber-talk"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var e = document.querySelector("#bber-talk");
    e && (fetchAndRenderMemos(), moment.locale("zh-CN"));

    function fetchAndRenderMemos() {
        var url = "https://memos.ee/api/v1/memos?pageSize=5&filter=visibilities%20==%20[%27PUBLIC%27]%20%26%26%20creator%20==%20%27users/1%27";
        fetch(url)
            .then(response => response.json())
            .then(data => {
                var memosList = data.memos;
                var contentHTML = memosList.map(memo => {
                    var createTime = memo.createTime;
                    var timeFromNow = moment(createTime).fromNow();
                    var content = memo.content;
                    var uid = memo.uid;

                    // Process content strings
                    var processedContent = content.replace(/!\[.*?\]\((.*?)\)/g, function(match, imageUrl) {
                        var cleanUrl = imageUrl.split(/[?#]/)[0];
                        return `<a href="${cleanUrl}" target="_blank">🌅</a>`;
                    }).replace(/\[(.*?)\]\((.*?)\)/g, function(match, linkText, url) {
                        var extension = url.split('.').pop().split(/[?#]/)[0];
                        var cleanUrl = url.split(/[?#]/)[0];
                        return /(jpg|jpeg|png|gif|bmp|webp|svg)/i.test(extension)
                            ? `<a href="${cleanUrl}" target="_blank">🌅</a>`
                            : `<a href="${url}" target="_blank">${linkText} 🔗</a>`;
                    });

                    // Add externalLink from resources if it's an image
                    if (memo.resources) {
                        memo.resources.forEach(resource => {
                            if (resource.externalLink) {
                                var cleanExternalLink = resource.externalLink.split(/[?#]/)[0];
                                if (/(jpg|jpeg|png|gif|bmp|webp|svg)/i.test(cleanExternalLink.split('.').pop())) {
                                    processedContent += ` <a href="${cleanExternalLink}" target="_blank">🌅</a>`;
                                }
                            }
                        });
                    }

                    return `<li class="item">💬 <a href="https://memos.ee/m/${uid}" target="_blank"><span class="datetime">${timeFromNow}</span>：${processedContent}</a></li>`;
                }).join('');

                var finalHTML = `<div class="talk-wrap"><ul class="talk-list">${contentHTML}</ul></div>`;
                e && (e.innerHTML = finalHTML);

                // Regularly move the first item to the end
                setInterval(function() {
                    var itemList = document.querySelector(".talk-list");
                    if (itemList) {
                        var items = itemList.querySelectorAll(".item");
                        if (items.length > 0) {
                            itemList.appendChild(items[0]);
                        }
                    }
                }, 2000);
            })
            .catch(error => console.error('Error fetching memos:', error));
    }
});
</script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script>
<style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style>
<script src=https://momentjs.cn/downloads/moment-with-locales.js></script>