无需修改主题文件，为留言板增加动态诗句（Sakurairo适用）

前言

网上有很多Sakura、Sakurairo主题为留言板增加动态诗句的教程，但是大多需要修改主题相关文件，特别是主题的js文件（以实现初载和重载）。
但是最新的Sakurairo主题js文件采用Webpack进行打包，修改起来比较麻烦，而且一旦更新主题，所有的修改都会丢失。

此方案不用修改主题的任何文件，所以不存在上述的问题。

修改方法

增加相关css样式

首先在iro主题设置-其他设置-低使用设置-自定义CSS样式中加入如下代码（此处对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;
    }
}

新建页面并实现

引入完样式之后我们就已经完成了一大半了，之后就是在Wordpress中新建一个页面，并且在页面中加上这样一段代码

<script src="https://blog.cos.nyadoo.com/static/poem/poem.js" charset="utf-8"></script>
<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>

OK，到这里动态诗句的实现就已经全部完成了。你可以在后面写上任何你想要说的话，并且开放页面评论功能就可以了。
当然，你也可以将上面这段代码放在任何其他你想要放的页面、文章中。