主题样式模板修改记录


写这个主要是方便我以后升级主题,我需要修改那些东西,如果对你有帮助那就更好了

首先让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>

声明:猫猫博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 主题样式模板修改记录


故梦待续 | 结局无期