前言

看到很多同学在做网站的时候喜欢添上每日诗词或者一言。在空荡荡的留言板(再次重申一遍,不是没有人来看我网站,而是你们的屏幕太大了),觉得放一个每日诗词挺好的。这里分享的方法不仅仅适用于Sakura主题,因此各位都可以尝试一下。

方法一

这里是搬运了来自雾时之森的老蘑菇分享的手段。
那就开始吧。
1、首先在Sakura主题设置中开启使用本地CSS,js文件。
这是路径:WP后台-外观-Sakura主题设置-CDN-开启本地调用主题 js、css 文件。
2、在额外CSS样式中添加下列代码(WP后台-外观-自定义-额外CSS):

/*每日诗词*/
.poem-wrap {
    position: relative;
    width: 730px;
    max-width: 80%;
    border: 2px solid #797979;
    border-top: none;
    text-align: center;
    margin: 80px auto;
}

.poem-wrap h1 {
    position: relative;
    margin-top: -20px;
    display: inline-block;
    letter-spacing: 4px;
    color: #797979
}

.poem-wrap p {
    width: 70%;
    margin: auto;
    line-height: 30px;
    color: #797979;
}

.poem-wrap p#poem {
    font-size: 25px;
}

.poem-wrap p#info {
    font-size: 15px;
    margin: 15px auto;
}

.poem-border {
    position: absolute;
    height: 2px;
    width: 27%;
    background-color: #797979;
}

.poem-right {
    right: 0;
}

.poem-left {
    left: 0;
}

@media (max-width: 685px) {
    .poem-border {
        width: 18%;
    }
}

@media (max-width: 500px) {
    .poem-wrap {
        margin-top: 60px;
        margin-bottom: 20px;
        border-top: 2px solid #797979;
    }

    .poem-wrap h1 {
        margin: 20px 6px;
    }

    .poem-border {
        display: none;
    }
}

3、修改Sakura主题目录下的 js/sakura-app.js 文件,大概在开头的位置,自己对照着下列代码添加。

mashiro_global.ini = new function () {
    this.normalize = function () { // initial functions when page first load (首次加载页面时的初始化函数)
        lazyload();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //每日诗词初加载
        if ($("div").hasClass("poem-wrap")) {
            get_poem('#poem', '#info')
        }
        coverVideoIni();
        checkskinSecter();
        scrollBar();
    }
    this.pjax = function () { // pjax reload functions (pjax 重载函数)
        pjaxInit();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //每日诗词重载
        if ($("div").hasClass("poem-wrap")) {
            get_poem('#poem', '#info')
        }
        coverVideoIni();
        checkskinSecter();
    }
}

并在该文件最下面添加

/*每日诗词*/
function get_poem(poem_ele, info_ele) {
    var poem = document.querySelector(poem_ele);
    var info = document.querySelector(info_ele);
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://v2.jinrishici.com/one.json');
    xhr.withCredentials = true;
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            var data = JSON.parse(xhr.responseText);
            poem.innerHTML = data.data.content;
            info.innerHTML = '【' + data.data.origin.dynasty + '】' + data.data.origin.author + '《' + data.data.origin.title + '》';
        }
    };
    xhr.send();
}

3、在Wordpress后台新建一个页面,模板选择默认模板(反正留言板不就是默认模板做的么)。然后在正文开头处填上如下代码

<div class="poem-wrap">
    <div class="poem-border poem-left"></div>
    <div class="poem-border poem-right"></div>
    <h1>念两句诗</h1>
    <p id="poem">挑选中...</p>
    <p id="info">
</div>

然后就是允许该页面被评论,设置特色图片,在代码下随便写点自己的叨叨就完成了。
PS:实战中我没成功,

方法二

在方法一试用无果后,决定去扒其他老师的网站。十年後の八月老师网站也用了每日诗词,F12看了看,好像没有用 每日诗词 的接口啊,怎么回事呢,一行一行找。看到了这个,

<iframe src="https://***.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%; height: 340px;" frameborder="0" scrolling="no"></iframe>

有点意思,想起了做 充电 页面时用的一个小方法——在网页里面套网页(iframe),果然换个角度看问题就有其他的想法。SDL, TQL, WSL。
所以说这里本站用的做法如下:
1、新建一个html文件,填上下列代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>诗词</title>
        <style type="text/css">
            .poem-wrap {
                position: relative;
                width: 730px;
                max-width: 80%;
                border: 2px solid #797979;
                border-top: none;
                text-align: center;
                margin: 80px auto;
            }
            .poem-left {
                left: 0;
            }
            .poem-right {
                right: 0;
            }
            .poem-border {
                position: absolute;
                height: 2px;
                width: 27%;
                background-color: #797979;
            }
            .poem-wrap h1 {
                position: relative;
                margin-top: -20px;
                display: inline-block;
                letter-spacing: 4px;
                color: #797979;
            }
            .poem-wrap p {
                width: 70%;
                margin: auto;
                line-height: 30px;
                color: #797979;
            }
            .poem-wrap p#poem {
                font-size: 25px;
            }
            .poem-wrap p#info {
                font-size: 15px;
                margin: 15px auto;
            }
        </style>
    </head>
    <body>
        <div class="poem-wrap">
            <div class="poem-border poem-left"></div>
            <div class="poem-border poem-right"></div>
            <h1>念两句诗</h1>
            <p id="poem">诗句加载中...</p>
            <p id="info">诗句加载中...</p>
        </div>
        <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
        <script type="text/javascript">
          jinrishici.load(function(result) {
            document.getElementById("poem").innerHTML = result.data.content;
            var info = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》';
            document.getElementById("info").innerHTML = info;
          });
        </script>
    </body>
</html>

把这个文件放在你网站的目录下面。
2、新建一个页面,默认模板 。模板填上

<iframe src="https://***.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%; height: 340px;" frameborder="0" scrolling="no"></iframe>

***.html 这部分替换成你刚刚新建的html文件的地址。
然后就大功告成了。

成果

https://sakura.lanceir.com/cooment


喜欢努力的雪集。