常来我博客逛的朋友们应该都注意过,我的左上角有个寄语。如下图:
我在想有没有一种可能直接拉取Memos的数据,从而动态去取呢。
反正是用js的写起来,测起来都很方便。
随后花了半小时,写了个脚本,看起来它运作的不错。
顺便让豆包给了段样式,做了淡入淡出。
有需要的朋友可以自取,注意下版本号,由于是js拉取的,所以你在本地建一个html也可以进行测试。
以下Memos的API版本为:Version: v0.22.4
网页部分
<!DOCTYPE html>
<html lang="en">
<script src="./a.js"></script>
<body>
<div id="description">
<a>最近在搜寻有趣博客中...</a>
</div>
</body>
</html>
js脚本
String.format = function () {
if (arguments.length == 0)
return null;
var str = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
str = str.replace(re, arguments[i]);
}
return str;
}
let data = {}
let index = 0
function refreshContentInterval() {
if (index >= 4) index = 0;
index++;
var firstData = data[index]
var result = firstData.snippet;
if (result.length > 30) {
result = result.slice(0, 30) + "...";
}
let post_index = "改成转跳的页面";
const descriptionDiv = document.getElementById('description');
descriptionDiv.innerHTML = '';
const aTag = document.createElement('a');
aTag.textContent = result;
aTag.href = post_index;
aTag.id = "fading-a"
descriptionDiv.appendChild(aTag);
}
function showFirstContent() {
var bbUrl = "https://你的memos域名/api/v1/memos?filter=creator=='users/1'&&visibilities=='PUBLIC'&&pageSize=5";
fetch(bbUrl).then(res => res.json()).then(resdata => {
data = resdata.memos;
refreshContentInterval();
setInterval(refreshContentInterval, 3000);
});
}
// 当页面加载完成后执行的函数
window.onload = function () {
showFirstContent();
}
css样式
/* 定义要添加淡入淡出效果的a标签样式 */
a#fading-a {
opacity: 0; /* 初始设置为完全透明 */
animation: fadeInOut 3s ease-in-out infinite; /* 应用淡入淡出动画,持续时间3s,缓动效果为ease-in-out,无限循环 */
}
/* 定义淡入淡出动画关键帧 */
@keyframes fadeInOut {
0% {
opacity: 0; /* 开始时完全透明 */
}
30% {
opacity: 1; /* 中间达到完全不透明 */
}
80% {
opacity: 1; /* 中间达到完全不透明 */
}
100% {
opacity: 0; /* 结束时又回到完全透明 */
}
}
以上,晚饭后半小时的摸鱼杰作。