每日60秒早报简介
每日60秒早报是一种便捷的获取每日新闻和信息的方式。通过简短的文字,让用户快速了解当天的重要事件和热点话题。
在Typecho中实现文字版本的每日60秒早报
创建文章并插入内容
首先,在Typecho中创建一篇新文章,将以下内容插入文章正文:
代码语言:javascript复制<div class="60sHtml"></div>
设置文章头图
将文章的头图设置为以下链接,这将通过博主的头图API实现每日自动更新头图:
代码语言:javascript复制https://api.letanml.xyz/60
在网站的body中添加代码
在网站的标签内添加以下代码:
代码语言:javascript复制<script>
const executeWhenElementExists = (selector, callback) => {
const element = $(selector);
if (element.length) {
callback(element[0]);
return;
}
const observer = new MutationObserver((mutations, observerInstance) => {
const targetElement = $(selector);
if (targetElement.length) {
observerInstance.disconnect();
callback(targetElement[0]);
}
});
observer.observe(document.body, { childList: true, subtree: true });
};
executeWhenElementExists('.60sHtml', (div) => {
// jQuery的ajax请求
$.ajax({
url: 'https://api.03c3.cn/zb/html.php',
type: 'get',
success: (data) => {
let _data = data.data[0];
div.innerHTML = _data.content;
$(div).find('figure').each((index, item) => {
const imgElement = $(item).find('img');
if (imgElement.length) {
const imgSrc = imgElement.attr('src');
const newElement = $('<p>').html(`<span style="display: block;" data-fancybox="Xc" href="${imgSrc}"><img src="${imgSrc}" alt="" loading="lazy"></span>`);
$(item).replaceWith(newElement);
}
});
$(div).find('a').each((index, item) => {
$(item).remove();
});
}
});
});
</script>
注意事项
此方法理论上仅支持Joe主题以及大部分魔改Joe主题。对于其他主题,可能需要根据主题的文章样式修改代码中的模板,以达到最佳显示效果。如果您使用的是其他主题,可以在评论区留言,有空时我们会尽力帮助您修改JavaScript代码。
文章目录
- 每日60秒早报简介
- 在Typecho中实现文字版本的每日60秒早报
- 创建文章并插入内容
- 设置文章头图
- 在网站的body中添加代码
- 注意事项
版权属于:瞳瞳too
本文链接:https://cloud.tencent.com/developer/article/2360132
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!