为Typecho添加文字版每日60S早报

曈曈too

发布于 2023-11-17 13:20:27

48700

代码可运行

文章被收录于专栏：瞳瞳too的学习笔记瞳瞳too的学习笔记

运行总次数：0

代码可运行

每日60秒早报简介

每日60秒早报是一种便捷的获取每日新闻和信息的方式。通过简短的文字，让用户快速了解当天的重要事件和热点话题。

在Typecho中实现文字版本的每日60秒早报

创建文章并插入内容

首先，在Typecho中创建一篇新文章，将以下内容插入文章正文：

<div class="60sHtml"></div>

设置文章头图

将文章的头图设置为以下链接，这将通过博主的头图API实现每日自动更新头图：

https://api.letanml.xyz/60

在网站的body中添加代码

在网站的标签内添加以下代码：

<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>