该修改方案的优点是:
1. 无需修改任何主题文件,即在主题更新后无需重新修改。
2. 在开启PJAX的情况下可以正常加载和重载。
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.cdn.nya.vin/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,到这里动态诗句的实现就已经全部完成了。你可以在后面写上任何你想要说的话,并且开放页面评论功能就可以了。
当然,你也可以将上面这段代码放在任何其他你想要放的页面、文章中。
Comments | 1 条评论
请问大佬创建页面了是在哪导入啊?,不太会