AI摘要:文章介绍了如何在Typecho中添加文字版的每日60秒早报。首先,创建一篇新文章并插入特定内容。然后,设置文章的头图链接,以实现每日自动更新头图。接着,在网站的body中添加JavaScript代码,以获取和显示每日早报内容。最后,作者提醒读者,这种方法主要适用于Joe主题和大部分魔改Joe主题,对于其他主题,可能需要修改代码以达到最佳显示效果。

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

注意事项

此方法理论上仅支持Joe主题以及大部分魔改Joe主题。对于其他主题,可能需要根据主题的文章样式修改代码中的模板,以达到最佳显示效果。如果您使用的是其他主题,可以在评论区留言,有空时我们会尽力帮助您修改JavaScript代码。