主题样式模板修改记录

  • 2019 年 10 月 20 日
  • 1659次
  • 500 字
  • 5 条评论

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

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

版权属于：Cat

本文链接：https://www.catct.cn/archives/325.html

作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可

赏
下载海报
widthrgbabackgroundheightpadding

—— 收到 5 条评论 ——

    WyAr'T
    2020 年 01 月 26 日 15:31
    回复

    mac风格的代码怎么实现的？

      Cat
      2020 年 01 月 26 日 15:38
      回复

      https://www.xcnte.com/archives/377/给你个地址吧

        WyAr'T
        2020 年 01 月 26 日 15:42
        回复

        感谢

      Cat
      2020 年 01 月 26 日 15:37
      回复

      ColorHighlight代码高亮 去找下这个插件

    王根基
    2019 年 11 月 10 日 23:54
    回复

    修改的很棒

OωO