博客头部滚动展示 最近的memos
使用了最新的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>
<style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style>
<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>
<script src=https://momentjs.cn/downloads/moment-with-locales.js></script>
阅读剩余
版权声明:
作者:老孙
链接:https://blog.hb.cn/archives/1238.html
文章版权归作者所有,未经允许请勿转载。
THE END