用JS写一个【十年之约】博客调取专题展示 Feeds，代码如下，直接复制粘贴调用即可。
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
| if (typeof Lately === 'undefined') {
const script = document.createElement('script');
script.src = 'https://fastly.jsdelivr.net/gh/Tokinx/Lately/lately.min.js';
script.onload = () => {
window.Lately && Lately.init({ target: '.forever-updated' });
};
document.head.appendChild(script);
} else {
window.Lately && Lately.init({ target: '.forever-updated' });
}
document.addEventListener("DOMContentLoaded", () => {
var foreverDom = document.querySelector('#foreverblog') || ''
var ForeverCSS = "#foreverblog{display:flex;flex-wrap:wrap;justify-content:center;margin:1.5rem 0 2rem;padding:0 20px;}.forever-avatar{border-radius:50%;height:38px;width:38px;max-width:none;margin-right:10px;}.forever-item{max-height:49px;border-radius:3rem;background:#fff;padding:5px 2rem 5px 7px;margin:0 0.6rem 1rem 0;display:inline-block;display:flex;box-shadow:0 1px 2px rgba(0,0,0,.05);}.dark .forever-item{background: #3b3d42}.forever-cont{line-height:1rem;display: inline-block;font-size: 1rem;}.forever-title{line-height: 24px;white-space: nowrap;max-width:350px;text-overflow:ellipsis;overflow:hidden;}.forever-title a,.douban h3 a,.home h3 a{text-decoration:none;}.forever-updated{font-style: italic;font-size: small;}@media (min-width: 550px) and (max-width:899px) {.forever-cont{width: 100%;}.forever-title{width:calc(100% - 50px);}.forever-item{width:48%;}.forever-item:nth-child(n+15){display:none;}}@media (max-width:549px) {#foreverblog{display: block;}.forever-cont{width: 100%;}.forever-title{width:calc(100% - 50px);}.forever-item{width:100%;}.forever-item:nth-child(n+7){display:none;}}"
if(foreverDom){loadCss(ForeverCSS);ForeverFeeds();}
function loadCss(css){
var style = document.createElement('style');
style.type = 'text/css';
style.rel = 'stylesheet';
style.appendChild(document.createTextNode(css));
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
function ForeverFeeds(){
var fetchUrl = "https://www.foreverblog.cn/api/v1/blog/feeds?page=1";
var localforeverData = JSON.parse(localStorage.getItem("foreverData")) || '';
if(localforeverData){
loadforever(localforeverData)
console.log("本地数据加载成功")
}else{
localStorage.setItem("foreverLink","")
}
fetch(fetchUrl).then(res => res.json()).then(resdata =>{
var foreverData = resdata.data
var foreverLink = foreverData.data[0].link
var localLink = localStorage.getItem("foreverLink")
if(foreverData && foreverLink != localLink){
foreverDom.innerHTML = "";
loadforever(foreverData)
localStorage.setItem("foreverData",JSON.stringify(foreverData))
localStorage.setItem("foreverLink",foreverLink)
console.log("热更新完成")
}else{
console.log("数据未更新")
}
})
}
function loadforever(foreverData){
var foreverArticle = '';
for (var i = 0;i<20;i++){
var item = foreverData.data[i];
foreverArticle +=`
<div class="forever-item">
<img class="forever-avatar avatar" src="https://gravatar.loli.net/avatar/${item.email}" alt="${item.author}">
<div class="forever-cont">
<div class="forever-title"><a target="_blank" rel="noopener nofollow" href="${item.link}">${item.title}</a></div>
<div class="forever-updated">${item.created_at}</div>
</div>
</div>
`;
}
foreverDom.innerHTML = foreverArticle
Lately.init({ target: '.forever-updated'});
}
})
|