在网页部署代码,把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
| <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; 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>`; }); 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); 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>
|
删掉💬后面的a标签可以去掉链接进入功能。
参考:
博客头部滚动展示 最近的memos 基于memos v0.22.2