无需修改主题文件,为留言板增加动态诗句(Sakurairo适用)

发布于 2022-06-06  853 次阅读


该修改方案的优点是:
        1. 无需修改任何主题文件,即在主题更新后无需重新修改。
        2. 在开启PJAX的情况下可以正常加载和重载。

前言

网上有很多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,到这里动态诗句的实现就已经全部完成了。你可以在后面写上任何你想要说的话,并且开放页面评论功能就可以了。
当然,你也可以将上面这段代码放在任何其他你想要放的页面、文章中。

  • alipay_img
  • wechat_img
大的叫孤勇,小的叫词穷 不大不小的最没用,名字叫踟蹰
最后更新于 2023-03-02