MENU

为站点添加每日一句的简单方法

2020 年 01 月 12 日 • 阅读: 2926 • 博客

2020 水文第二篇,为任意站点添加英文每日一句,随机从金山词霸、有道词典、欧路词典、海词词典和扇贝英语获取内容。你可在博客首页查看效果,大佬请跳过。

引入 JS

将以下代码加入到 <head> 标签中。对于本主题,依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展,将代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后),也可直接加入到主题对应的 header.php 中的 </head> 标签前。

<script>
    // 获取每日一句并显示
    document.addEventListener('DOMContentLoaded', initDescription);
    function initDescription() {
        // 锚点开始
        if (location.href !== location.origin + '/') return;
        const h1 = document.querySelector('h1.blog-title');
        const h2 = document.querySelector('h2.blog-description');
        // 锚点结束

        const local = {
            set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
            get: key => {
                const value = JSON.parse(localStorage.getItem(key));
                if (value && new Date(value.date).toDateString() !== new Date().toDateString()) return null;
                return value;
            }
        };
        const render = (data, save) => {
            h1.innerHTML = data.sentence, h2.innerHTML = data.translation;
            if (save) local.set('sentence', data);
        };
        const data = local.get('sentence');
        if (data) { render(data); return; }
        fetch('//logi.im/api/sentence/').then(response => response.json()).then(json => render(json, true));
    }
</script>

如果你开启了 PJAX,可能需要单独加入回调函数。对于本主题,依次进入 控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD,将 initDescription(); 添加进入即可。

其他主题

其他主题需要通过 F12 找到对应锚点,替换代码中那三行,不知道怎么找的,留下 博客链接要加入的位置,我看到后会将锚点代码更新到此。

演示地址

if (location.href !== location.origin + '/index.php') return;
const h1 = document.querySelector('h1.site-name');
const h2 = document.querySelector('h2.site-description');

如果你想自行部署 API,回复后刷新页面即可获取 PHP 源码。

此处内容需要评论回复后方可阅读

TG 大佬群 QQ 大佬群 QQ 追番群

最后编辑于: 2020 年 02 月 10 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

已有 24 条评论
  1. cvs cvs     Windows 10 /    Google Chrome

    感谢分享!感谢分享!

  2. 分隔符 分隔符     Windows 10 /    UC浏览器

    感谢大佬分享wwww

  3. cvs cvs     Windows 10 /    UC浏览器

    感谢 需要

  4. ZGGSONG ZGGSONG     MacOS /    Google Chrome

    感谢分享!

  5. lcs lcs     Windows 10 /    Google Chrome

    不错的教程

  6. SoSilent SoSilent     Windows 10 /    Google Chrome

    好棒的教程@(太开心)

  7. ymh ymh     Android /    Google Chrome

    嗯,不错不错

  8. H H     Windows 10 /    Google Chrome

    辛苦啦@(呵呵)

  9. X X     Android /    Google Chrome

    我试试#(高兴)

  10. cx cx     Windows 10 /    Google Chrome

    谢谢,我来试试

  11. Xu Xu     Android /    Google Chrome

    看起来不错@(呵呵)

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @Xu感谢支持

  12. Mr.Lin Mr.Lin     Windows 7 /    Google Chrome

    辛苦了。。

  13. H H     Windows 10 /    Google Chrome

    不错的教程#(高兴)

  14. Dianr Dianr     Android Pie /    Google Chrome

    来了

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @Dianr欢迎

  15. QaQ QaQ     Windows 10 /    Google Chrome

    阿偶找不来::quyin:amazing::

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @QaQ可以加群说一下想放在哪,我帮你找呀

  16. Toki Toki     MacOS /    FireFox

    来啦来啦~ ::quyin:maimeng::

    1. LOGI LOGI     Windows 10 /    Google Chrome

      @Toki所以你的博客在哪@(捂嘴笑)

    2. Toki Toki     MacOS /    FireFox

      @LOGI丢人就不放出来了。。。自己做笔记用~ 谢谢大佬解答 ::quyin:shakinghead::

  17. 帅人 帅人     Android Pie /    Safari

    感谢大佬分享

  18. 子午 子午     Windows 10 /    Google Chrome

    @(你懂的)

  19. 妞妞 妞妞     iPhone /    Safari

    评论一下

0:00