主要来自:Handsome美化记录
1. 主题标题居中
步骤:
开发者设置➡自定义CSS
添加:
/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
2. 多彩标签云
步骤:
开发者设置➡自定义JavaScript
PJAX➡PJAX回调函数
添加:
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}
3. 等距标签云
步骤:
开发者设置➡自定义CSS
添加:
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
4. 复制弹窗提醒
步骤:
开发者设置➡自定义JavaScript
添加:
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创,转载请注明出处!<br> 本文作者:AIHGF<br>原文链接:"+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */
5. 自定义右键美化
6. 评论边框美化
步骤:
开发者设置➡自定义CSS
添加:
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
7. 正文结束及版权
步骤[1]:
开发者设置➡自定义CSS
添加:
/*版权信息&正文结束分割线CSS*/
.cutline {
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0;
text-align: center;
width: 100%;
}
.cutline span {
background-color: rgb(236, 237, 238);
border: 1px solid #d6d6d6;
font: 12px Arial,Microsoft JhengHei;
padding: 2px 4px;
position: relative;
top: -10px;
}
.post-copyright {
font-size: 13px;
margin: 8px 0;
padding: 10px;
border-left: 4px solid #3bd58a;
background-color: rgba(220, 220, 220, 0.1);
list-style: none;
word-break: break-all;
position: relative;
overflow: hidden;
}
.post-copyright li {
display: list-item;
text-align: -webkit-match-parent;
}
.post-copyright a {
color: rgba(0, 120, 231, 1);
text-decoration: none;
transition: color .1s;
}
步骤[2]:/usr/themes/handsome/post.php
如下出添加代码:
<?php if ($this->options->adContentPost != ""): ?>
<!--文章页脚的广告位-->
<?php $this->options->adContentPost(); ?>
<?php endif; ?>
<!--版权信息&正文结束分割线-->
<div class="cutline">
<span><a style="color:#F17B8F; border-bottom: 0px solid #999!important;"> 正文到此结束 </a></span>
</div>
<ul class="post-copyright">
<li class="post-copyright-author"><strong>本文作者:</strong><?php $this->author(); ?></li>
<li class="post-copyright-link"><strong>本文链接:</strong><a href="<?php $this->permalink() ?>" title="<?php $this->title() ?>"><?php $this->permalink() ?></a></li>
<li class="post-copyright-license"><strong>版权声明:</strong>本博客所有文章除特别声明外,均默认采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><strong> CC BY-NC-SA 4.0 </strong></a> 许可协议。</li>
</ul>