自定义CSS

自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS

首页头图获取焦点放大

/*首页头图获取焦点放大*/
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}


首页头图获取焦点放大

/*首页头图获取焦点放大*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}


标题居中


文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

主题标题居中

/*主题标题居中*/
header.bg-light.lter.wrapper-md {
    text-align: center;
}


底部页脚微徽

/*底部GitHub*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}

.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}

.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
background-color: #007ec6
}

.github-badge .bg-orange {
background-color: #ffa500
}

.github-badge .bg-red {
background-color: #f00
}

.github-badge .bg-green {
background-color: #3bca6e
}

.github-badge .bg-purple {
background-color: #ab34e9
}

博客底部左侧信息

<div class="github-badge">
<a href="/" title="©2020 Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020 Alvin</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn/" target="_blank" title="豫ICP备 20011562号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">豫ICP备</span><span class="badge-value bg-green">20011562号</span>
</a>
</div>

博客底部右侧信息

<div class="github-badge">
<a href="https://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

需要去/handsome/component/footer.php删除原有声明代码,以下为删除完后的效果(大概121行)

// 可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解
      ?>
      </a>
      </span>
        <span class="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>
    </div>

自定义JavaScript

自定义JavaScript丨放入后台-外观设置-开发者设置-自定义JavaScript

右侧边栏添加全站字数


先在 component/sidebar.php处,选择合适位置加入以下代码(位置大概在 93后)

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

然后在 component/sidebar.php的开头加入下面的代码

<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>

网站加载完成提示

/* 网站加载完成提示开始 */
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(),
title: "网站加载完成",
type: "success",
autoHide: !1,
time: "3000"
})
/* 网站加载完成提示结束 */

自定义body

自定义body丨放入后台-外观设置-开发者设置-自定义输出body尾部的HTML代码

背景添加冒泡动画

<!--背景添加冒泡动画-->
   <div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>

参数说明

id: '',                           //容器ID
num: 100,                        // 个数
start_probability: 0.1,          // 如果数量小于num,有这些几率添加一个新的
radius_min: 1,                   // 初始半径最小值
radius_max: 2,                   // 初始半径最大值
radius_add_min: .3,               // 半径增加最小值
radius_add_max: .5,               // 半径增加最大值
opacity_min: 0.3,                 // 初始透明度最小值
opacity_max: 0.5,                // 初始透明度最大值
opacity_prev_min: .003,            // 透明度递减值最小值
opacity_prev_max: .005,            // 透明度递减值最大值
light_min: 40,                 // 颜色亮度最小值
light_max: 70,                 // 颜色亮度最大值
is_same_color: false,          //泡泡颜色是否相同
background:"#f1f3f4"           //背景颜色

其他魔改

未完待续。。

最后修改:2021 年 08 月 18 日 11 : 38 PM
如果觉得我的文章对你有用,请随意赞赏