写这个主要是方便我以后升级主题,我需要修改那些东西,如果对你有帮助那就更好了
首先让footer透明,1254行开始
.site-footer {
padding:2%;
background: #fff;
border-top: 0px solid #F7F7F7;
}
改成
.site-footer {
padding:2%;
background: rgba(0,0,0,0);
border-top: 0px solid #F7F7F7;
}
然后是评论区透明,2934行开始
.comments {
clear: both;
overflow: hidden;
width: 100%;
padding: 50px 0 50px;
list-style: none;
background: #fff; }
改成
.comments {
clear: both;
overflow: hidden;
width: 100%;
padding: 50px 0 50px;
list-style: none;
background: rgba(0, 0, 0, 0.0); }
首页图片显示比例,3442行开始
#centerbg {
width:100%;
z-index: 0;
height: 550px;
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
z-index:-1;
}
改成
#centerbg {
width:100%;
z-index: 0;
height: 875px;
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
z-index:-1;
}
首页头像下面的黑条改圆角
.header-info {
width: 60%;
margin: auto;
font-size: 14px;
color: #EAEADF;
background: rgba(0, 0, 0, 0.66);
padding: 20px 30px;
margin-top: 30px;
font-family: miranafont,"Hiragino Sans GB",STXihei,"Microsoft YaHei",SimSun,sans-serif;
letter-spacing: 1px;
line-height: 30px;
}
改成
.header-info {
width: 60%;
margin: auto;
font-size: 14px;
color: #EAEADF;
background: rgba(0, 0, 0, 0.5);
padding: 15px 25px;
margin-top: 22px;
font-family: "Microsoft JhengHei", miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, Sans-Serif;
letter-spacing: 0;
line-height: 30px;
border-radius: 50px;
}
添加以下样式
评论框添加图片
/* 评论框图片 */
#comment {
background-image:url(图片url);
background-repeat:no-repeat;
background-position:right bottom;
}
全局背景半透明
/* 全局背景半透明 */
body:before{
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .3;
z-index: -1;
content: "";
position: fixed;
background: url(https://api.paugram.com/wallpaper?source=cp) center/cover;
}
底部图片旋转
.foo-text{text-align: center;
margin-top: 0px;}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.an{
-webkit-transform: rotate(360deg);
animation: rotation 12s linear infinite;
-moz-animation: rotation 12s linear infinite;
-webkit-animation: rotation 12s linear infinite;
-o-animation: rotation 12s linear infinite;
opacity: .3;
}
.img{border-radius: 250px;
}
引入哔哩哔哩视频
/*视频挂载*/
.iframe_video {
position: relative;
width: 100%;
}
@media only screen and (max-width: 767px) {
.iframe_video {
height: 15em;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.iframe_video {
height: 20em;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.iframe_video {
height: 30em;
}
}
@media only screen and (min-width: 1200px) {
.iframe_video {
height: 40em;
}
}
.iframe_cross {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%
}
.iframe_cross iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0
}
404.php修改
因为前面设置了全局透明,又设置了全局背景,导致404页面会引用一张不完整的背景图,所以要取消掉
打开404.php,删除引入样式的链接,自定义成
<style>
.error-img {
text-align: center;
}
.err-button.back {
font-family:microsoft yahei;
text-align: center;
}
.err-button.back a {
padding:10px 30px;
margin:0 10px;
border:1px solid #A0DAD0;
color:#A0DAD0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
#gohome {
background: #A0DAD0;
color: #fff;
}
.err-button.back a:hover {
-webkit-box-shadow: 0 0 4px rgba(117, 247, 211, 0.85);
-moz-box-shadow: 0 0 4px rgba(117, 247, 211, 0.85);
-o-box-shadow: 0 0 4px rgba(117, 247, 211, 0.85);
box-shadow: 0 0 4px rgba(117, 247, 211, 0.85);
}
</style>
comments.php修改显示UA和发信插件
36行左右 <div class="info"><time datetime="<?php $comments->date('Y-m-d'); ?>"><?php $comments->date('Y年m月d日'); ?></time>
转行添加下面的代码显示评论UA(需配合插件使用)
<span class="useragent-info">
<?php UserAgent_Plugin::render($comments->agent);?>
</span>
104行左右,这个是评论邮箱通知(需配合插件使用)
<input type="text" name="mail" id="mail" class="commenttext" value="<?php $this->remember('mail'); ?>" size="22" placeholder="Email" tabindex="2" />
<label for="mail"></label>
改成
<input type="text" name="mail" id="mail" class="commenttext" value="<?php $this->remember('mail'); ?>" size="22" placeholder="Email" tabindex="2" />
<input type="hidden" name="receiveMail" id="receiveMail" value="yes" />
<label for="mail"></label>
footer.php修改
作者主题下添加
说明
`</p>
又拍云提供网站加速服务.百度统计提供网站统计服务.腾讯云提供DNS解析服务`
运行时间和Sitemap
<a href="https://catct.cn/sitemap.xml" >Sitemap</a>
<span id="runtime_span"></span>
<script type="text/javascript">
function show_runtime()
{window.setTimeout("show_runtime()",1000);X=new
Date("3/15/2019 15:00:00");
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML="网站已运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();</script>
</div>
添加
<script type="text/javascript" language="javascript">
if(window.console&&window.console.log){
console.log("%c 哟,高人您好,欢迎来到我的博客~!","color:red");
console.log("路有多远,只有心知道,");
console.log("最美的旅程,是不断的经历,");
console.log("坚持走下去,与梦想者同行!");
console.log("我是猫猫,一个成长中的少年。");
}
</script>
<script>
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~ | 你快回来!';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
</script>
当然,还有统计代码
header.php修改
添加一言<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
index.php修改
简介引入一言,同时注释或删除原有简介<p id="hitokoto">:D 获取中...</p>
注释或删除首页大图左右倾斜
然后是修改一下社交信息(记得把图片上传上去)
<!-- 社交信息 -->
<div class="top-social">
<li><a href="<?php $this->options->SINA();?>" target="_blank" rel="nofollow" class="social-sina" title="sina"><img src="<?php echo theurl; ?>images/sina.png"/></a></li>
<li class="qq"><a href="http://wpa.qq.com/msgrd?v=3&uin=<?php $this->options->QQ();?>&site=qq&menu=yes" target="_blank" rel="nofollow" ><img src="<?php echo theurl; ?>images/qq.png"/></a>
<div class="qqInner"><?php $this->options->QQ();?></div>
</li>
<li><a href="https://user.qzone.qq.com/<?php $this->options->QQ();?>" target="_blank" rel="nofollow" class="social-qzone" title="qzone"><img src="<?php echo theurl; ?>images/qzone.png"/></a></li>
<li><a href="https://space.bilibili.com/88434328" target="_blank" rel="nofollow" class="social-qzone" title="哔哩哔哩"><img src="<?php echo theurl; ?>images/bilibili.png"/></a></li>
<li><a href="<?php $this->options->Github();?>" target="_blank" rel="nofollow" class="social-github" title="github"><img src="<?php echo theurl; ?>images/github.png"/></a></li>
<li><a href="https://music.163.com/#/user/home?id=268773229" target="_blank" rel="nofollow" class="social-qzone" title="网易云音乐"><img src="<?php echo theurl; ?>images/netease.png"/></a></li>
</div>
post.php
修改给他获取本地文件夹的图片,而不是文章页第一张图
修改下面代码之间的内容
<div class="pattern-center">
<header class="pattern-header"><h1 class="entry-title"><?php $this->title() ?></h1></header>
改成<div class="pattern-attachment-img" style="background-image: url(<?php if (array_key_exists('img',unserialize($this->___fields()))): ?><?php $this->fields->img(); ?><?php else: ?><?php echo theurl.'images/postbg/'.mt_rand(1,36).'.jpg'; ?><?php endif; ?>)"></div>
mac风格的代码怎么实现的?
https://www.xcnte.com/archives/377/给你个地址吧
感谢![]()
ColorHighlight代码高亮 去找下这个插件
修改的很棒