前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >为Typecho添加文字版每日60S早报

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

作者头像
曈曈too
发布2023-10-23 15:29:48
2830
发布2023-10-23 15:29:48
举报

每日60秒早报简介

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

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

创建文章并插入内容

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

代码语言:javascript
复制

设置文章头图

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

代码语言:javascript
复制
https://api.letanml.xyz/60

在网站的body中添加代码

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

代码语言:javascript
复制
    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();
                });
            }
        });
    });

注意事项

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-08-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 每日60秒早报简介
  • 在Typecho中实现文字版本的每日60秒早报
    • 创建文章并插入内容
      • 设置文章头图
        • 在网站的body中添加代码
          • 注意事项
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档