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

2023-11-17 21:20:27 浏览数 (4)

每日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 授权协议,转载请注明来源,谢谢!

1 人点赞