关于留言板添加每日诗词的方法总结

前言

看到很多同学在做网站的时候喜欢添上每日诗词或者一言。在空荡荡的留言板（再次重申一遍，不是没有人来看我网站,而是你们的屏幕太大了），觉得放一个每日诗词挺好的。这里分享的方法不仅仅适用于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文件的地址。
然后就大功告成了。

成果

http://sakura.lanceir.com/cooment

查看评论 - 8 条评论

Comments | 8 条评论

博客作者送报少年
回复
发布于 2020-05-14 13:44 ( Google Chrome 81.0.4044.138 Windows 10 )( )
我刚开始也失败了。。似乎是js代码有错误我在友人那里抄了一份js代码就成功了
ps我今天是真的惨数据库全没了
- 博客作者 Lanceir
  回复
  发布于 2020-05-14 14:14 ( Edge (Chromium) 81.0.416.72 Windows 10 )( )
  @送报少年嗯，大概老蘑菇哪里弄错了吧，但是iframe插入方法不会出错，HAHA。
  立即推→ 删库，销毁实例。
  - 博客作者送报少年
    回复
    发布于 2020-05-14 14:16 ( Google Chrome 81.0.4044.138 Windows 10 )( )
    @Lanceir 哇这个夜间模式怎么弄的
    - 博客作者 Lanceir
      回复
      发布于 2020-05-14 14:24 ( Edge (Chromium) 81.0.416.72 Windows 10 )( )
      @送报少年更新Sakura主题到3.3.8版本就有了。
博客作者送报少年
回复
发布于 2020-05-14 14:26 ( Google Chrome 81.0.4044.138 Windows 10 )( )
我应该是最新的吧我直接在github上克隆的直接有吗还是要设置
- 博客作者 Lanceir
  回复
  发布于 2020-05-14 14:28 ( Edge (Chromium) 81.0.416.72 Windows 10 )( )
  @送报少年不用设置，你的不是最新的。建议再去看看。
  - 博客作者送报少年
    回复
    发布于 2020-05-14 14:32 ( Google Chrome 81.0.4044.138 Windows 10 )( )
    @Lanceir 额好吧没有就算了吧我刚刚弄得差不多了不太想重新搞了谢谢啊哈哈
    - 博客作者 Lanceir
      回复
      发布于 2020-05-14 14:50 ( Edge (Chromium) 81.0.416.72 Windows 10 )( )
      @送报少年你说你是git克隆的话，可以用 git pull origin 直接更新，看这里。