网页头部滚动展示最近的memos

在网页部署代码，把memos最近几条滚动展示在网页最上方。

API

使用了最新的memos v0.22.2
https://m.qs100371.vip/api/v1/memos?pageSize=5&filter=visibilities==['PUBLIC']&creator=='users/2'
其中
pageSize为查询的memo个数，
users/2为查询的用户UID。

部署代码

粘贴到网页<body>之后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--add 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://m.qs100371.vip/api/v1/memos?pageSize=5&filter=visibilities==['PUBLIC']&creator=='users/2'";
            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 /.webp|jpeg.webp|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 (/.webp|jpeg.webp|gif|bmp|webp|svg)/i.test(cleanExternalLink.split('.').pop())) {
                                        processedContent += ` <a href="${cleanExternalLink}" target="_blank">🌅</a>`;
                                    }
                                }
                            });
                        }
    
                        return `<li class="item">💬 <a href="https://m.qs100371.vip/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> 
<!-- add memos-->

删掉💬后面的a标签可以去掉链接进入功能。

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