优化知乎热榜展示，使用列表格式替代 div，更新样式并添加动态数据渲染
This commit is contained in:
parent
20eb44ba4d
commit
504bdb77bd
@ -176,46 +176,29 @@ const saveFile = `${new Date().getTime()}_zhihu_hot.json`;
|
||||
await pushPlusNotify('知乎热榜更新失败', '请查看日志获取详细信息');
|
||||
}
|
||||
|
||||
function setDiv(item) {
|
||||
return `<div>
|
||||
<h2><a href="${item.link}">${item.shortTitle}</a></h2>
|
||||
<p>热度：${item.popularity}</p>
|
||||
<p class="popularity">${item.title}</p>
|
||||
</div>`;
|
||||
function setDiv(item, index) {
|
||||
return `<li>${index + 1}. <a href="${item.link}" target="_blank">${item.shortTitle}</a></li>`;
|
||||
}
|
||||
|
||||
let content = zhihu_hot_list.reduce(
|
||||
(accumulator, currentValue) => accumulator + setDiv(currentValue),
|
||||
''
|
||||
);
|
||||
const content = zhihu_hot_list.map((item, index) => setDiv(item, index)).join('');
|
||||
|
||||
let html = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>展示 知乎 数据</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
h2 {
|
||||
color: #333;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
.popularity {
|
||||
color: #888;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
font-size: 28px;
|
||||
li {
|
||||
margin: 10px 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${content}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
<ul id="item-list">${content}</ul>`;
|
||||
|
||||
await pushPlusNotify('知乎热榜已更新', `${getcurrentDate()} 知乎热榜已更新` + html);
|
||||
|
||||
|
||||
71
zhihu.html
71
zhihu.html
@ -8,22 +8,69 @@
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
h2 {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
ul li {
|
||||
margin: 10px 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
.popularity {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h2><a href="${item.link}">${item.shortTitle}</a></h2>
|
||||
<p>热度：${item.popularity}</p>
|
||||
<p class="popularity">${item.title}</p>
|
||||
</div>
|
||||
<ul id="item-list"></ul>
|
||||
</body>
|
||||
<script>
|
||||
const itemList = document.querySelector('#item-list');
|
||||
const data = [
|
||||
{
|
||||
shortTitle:
|
||||
'为什么乒乓球遮球观众都看出来了，而选手还是肆无忌惮的遮？如果遮球不算犯规，选手能不能都去练遮球？',
|
||||
title: '',
|
||||
popularity: '496 万热度',
|
||||
link: 'https://www.zhihu.com/question/5022410879',
|
||||
},
|
||||
{
|
||||
shortTitle:
|
||||
'缅北规模化电诈园区全部被铲除，763 名在缅中国籍嫌犯移交我方，哪些信息值得关注？',
|
||||
title:
|
||||
'为纵深打击缅北涉我电信网络诈骗犯罪，全面清剿诈骗窝点，依法缉捕涉诈人员，近日，公安部部署云南公安机关加强与缅甸相关地方执法部门的警务执法合作，首次在缅甸当阳地区抓获 1079 名实施跨境电信网络诈骗的犯罪嫌疑人，其中中国籍犯罪嫌疑人 763 名。目前，全部中国籍犯罪嫌疑人已被移交我方。这是打击缅北涉我电信网络诈骗犯罪专项工作开展以来，在缅甸纵深地带取得的又一重大突破。 去年公安部部署开展打击缅北涉我电信网络诈骗犯罪专项工作以来，中缅双方通过警务执法合作和一系列打击行动，累计抓获 5.3 万余名中国籍涉诈犯罪嫌疑人，临近我边境的缅北地区规模化电诈园区全部被铲除。在强力打击震慑下，涉诈人员不断向缅甸万海、当阳、妙瓦底等纵深地区转移，继续招募、诱骗境内人员非法出境参与电诈犯罪，并衍生出非法拘禁、故意伤害甚至绑架杀人等严重暴力犯罪活动，严重危害我国公民生命财产安全。 公安部对此高度重视，部署云南公安机关持续加强警务执法合作，联合缅甸相关地方执法部门开展打击行动，于 11 月 17 日在缅甸当阳地区抓获中国籍涉诈犯罪嫌疑人 763 名，包括网上在逃人员 69 名，缴获电脑、手机、诈骗话术脚本等一大批作案工具。11 月 19 日，相关犯罪嫌疑人及涉案物品已通过云南临沧永和口岸移交我方。 公安部有关负责人表示，公安机关将继续保持对跨境电信网络诈骗犯罪的严打高压态势，特别是对缅甸万海、当阳、妙瓦底等诈骗窝点聚集区，将进一步加大警务执法合作力度，坚决铲除涉我电信网络诈骗犯罪「毒瘤」。同时，公安机关提醒广大人民群众，切勿轻信境外高薪招聘信息，避免落入违法犯罪陷阱，切实维护自身合法权益。 来源：央视新闻缅北规模化电诈园区全部被铲除！763 名在缅中国籍嫌犯移交我方',
|
||||
popularity: '462 万热度',
|
||||
link: 'https://www.zhihu.com/question/4757292409',
|
||||
},
|
||||
{
|
||||
shortTitle:
|
||||
'网易云音乐要求 QQ 音乐立即停止剽窃式「创新」，如何看待此事？此次公开喊话会对双方品牌造成什么影响？',
|
||||
title:
|
||||
'网易云音乐公开喊话 QQ 音乐，要求 QQ 音乐停止剽窃式「创新」。 网易云音乐声明称，网易云音乐音乐播放器 DIY 功能于 10 月 25 日上线，用户可上传图片个性化定义播放器界面。11 月 19 日，网易云音乐推出以此功能为主题的首届「黑胶风格创意大赛」，吸引大量用户参与。 然而，仅四天后，QQ 音乐便推出了高度相似的「播放器自定义功能」，再次抄袭网易云音乐。 网易云音乐还在声明中详细回顾了 QQ 音乐近年来被指「模仿」、抄袭网易云音乐的黑胶播放页面、一起听、故宫主题播放器等事件，并要求 QQ 音乐立即停止一直以来的剽窃式「创新」、借鉴式「创意」、跟随式「更新」行为。 网易云音乐发文：请 QQ 音乐停止抄袭',
|
||||
popularity: '285 万热度',
|
||||
link: 'https://www.zhihu.com/question/5081019711',
|
||||
},
|
||||
];
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<li>${index + 1}. <a href="${item.link}" target="_blank">${
|
||||
item.shortTitle
|
||||
}</a></li>`;
|
||||
itemList.appendChild(div);
|
||||
});
|
||||
|
||||
function setDiv(item) {
|
||||
return `<div>
|
||||
<h2><a href="${item.link}">${item.shortTitle}</a></h2>
|
||||
<p>热度：${item.popularity}</p>
|
||||
<p class="popularity">${item.title}</p>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
console.log(data.map(setDiv).join(''));
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user