MENU

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

June 27, 2020 • Read: 321 • 代码笔记

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

引入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();添加进入即可。

Last Modified: October 9, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
0:00