MENU

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

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

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 大佬群

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

Loading captcha...

已有 32 条评论
  1. Caleb Caleb   Windows 10 x64 Edition  Google Chrome 120.0.0.0

    看看写的啥

  2. Mondayice Mondayice   Mac OS X 10.15.6  Safari 15.6.1

    我试试欧陆词典的

  3. oyo oyo   Windows 10 x64 Edition  Google Chrome 95.0.4638.54

    日常膜拜大佬

  4. TUS TUS   Windows 7 x64 Edition  Google Chrome 78.0.3904.108

    感谢 学习

  5. Baidu Baidu   Windows 10 x64 Edition  Google Chrome 90.0.4430.212

    Thanks for share...@(呵呵)

  6. 不吃猫的鱼 不吃猫的鱼   Windows 10 x64 Edition  Google Chrome 88.0.4324.190

    日常学习,#(献花)

  7. 半世迷离 半世迷离   Windows 10 x64 Edition  Google Chrome 78.0.3904.108

    过来看看大佬

  8. cvs cvs   Windows 10 x64 Edition  Google Chrome 78.0.3904.108

    感谢分享!感谢分享!

  9. 分隔符 分隔符   Windows 10 x64 Edition  Internet Explorer 11.0

    感谢大佬分享wwww

  10. cvs cvs   Windows 10 x64 Edition  Internet Explorer 11.0

    感谢 需要

  11. ZGGSONG ZGGSONG   Mac OS X 10.15.3  Google Chrome 83.0.4103.116

    感谢分享!

  12. lcs lcs   Windows 10 x64 Edition  Google Chrome 80.0.3987.106

    不错的教程

  13. SoSilent SoSilent   Windows 10 x64 Edition  Google Chrome 80.0.3987.132

    好棒的教程@(太开心)

  14. ymh ymh   Android 10  Google Chrome 80.0.3987.99

    嗯,不错不错

  15. H H   Windows 10 x64 Edition  Google Chrome 80.0.3987.132

    辛苦啦@(呵呵)

  16. X X   Android 10  Google Chrome 80.0.3987.99

    我试试#(高兴)

  17. cx cx   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

    谢谢,我来试试

  18. Xu Xu   Android 10  Google Chrome 79.0.3945.136

    看起来不错@(呵呵)

    1. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

      @Xu感谢支持

  19. Mr.Lin Mr.Lin   Windows 7 x64 Edition  Google Chrome 72.0.3626.119

    辛苦了。。

  20. H H   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

    不错的教程#(高兴)