插件

插件篇

看板娘（Pio）正在使用：Pio（自带）、香风智乃（Chino）、时崎狂三（Kurumi）、干物妹小埋（Umaru...

首页文章头图阴影

  • 方法:将以下代码添加至后台-开发者设置-自定义CSS。(颜色自行修改)
/*panel阴影*/
.panel:hover,.panel-small:hover,.panel-picture:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

彩色标签云及数字

  • 方法:将以下代码添加至后台-开发者设置-自定义JavaScript。
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;
});

如有开启Pjax,则还需放入Pjax回调函数中

标签云整齐排列

  • 方法:将以下代码添加至后台-开发者设置-自定义CSS。
/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

标签云数量调整

  • 目标:标签云默认最大数量30
方法:将/usr/themes/handsome/component/sidebar.php中的<?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')的30

给typecho加上心知天气

网站头部加上天气

目标:网站头部方法心知天气官网申请秘钥并生成天气插件代码将生成的以下代码放入/usr/themes/handsom...

手机适配中不显示热门及标签云

  • 方法：将以下代码添加至后台-开发者设置-自定义CSS。
/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

404页面自动返回

  • 404页面
  • 方法
  1. 打开/usr/themes/handsome/404.php，在第130行左右，在<h1 class="text-shadow text-white">404</h1>后面添加：
<br>
<small class="text-muted letterspacing">
<b id="sp">10</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>
  1. 然后把下面这段放到最后的</body>前
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=3;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>

网站响应耗时

博客右侧信息自定义

博客信息添加全站字数、在线人数、访客总数和网站加载耗时等全站字数在线人数访客总数网站加载耗时

代码高亮

代码高亮

首页文章列表悬停上浮

  • 鼠标经过首页文章列表文章上浮放大，请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。
.blog-post .panel:not(article) {
    transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:not(article) {
    transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.box-shadow-wrap-normal {
    transition: all 0.3s;
}
.box-shadow-wrap-normal:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

文章内头图和文章图片悬停放大并将超出范围隐藏

  • 请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。
.index-post-img {
    overflow: hidden;
}
.index-post-img-small .post-feature .index-img-small {
    overflow: hidden;
}
.panel-picture .post-thumbnail {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.3s;
}
.item-thumb-small {
    transition: all 0.3s;
}
.panel-picture .post-thumbnail .post-thumbnail-inner {
    transition: all 0.3s;
}
.item-thumb:hover {
    transform: scale(1.1)
}
.item-thumb-small:hover {
    transform: scale(1.1)
}
.panel-picture .post-thumbnail .post-thumbnail-inner:hover {
    transform: scale(1.1)
}

文章图片居中

默认情况文章内的所有图片居左显示，对于大量使用图片的文章而言其阅读体验会大减折扣。
  • 请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。
#post-content img {
    border: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

打赏图标跳动

  • 文章页最底部的打赏图标添加跳动效果，请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

页脚美化

点击展开

  1. 将以下内容添加至 外观设置 >> 开发者设置 >> 博客底部左侧信息 下：
<div class="github-badge">
  <span class="badge-subject">Copyright</span>
  <a href="./" target="_blank">
    <span class="badge-value bg-blue">©2017&nbsp;WQT's Blog</span></a>
</div>&nbsp;|&nbsp;
<div class="github-badge">
  <span class="badge-subject">粤ICP备</span>
  <a href="http://beian.miit.gov.cn/" target="_blank">
    <span class="badge-value bg-green">17098080号</span></a>
</div>
  1. 将以下内容添加至 外观设置 >> 开发者设置 >> 博客底部右侧信息 下：
<div class="github-badge">
  <span class="badge-subject">Powered by</span>
  <a href="http://www.typecho.org" target="_blank">
    <span class="badge-value bg-blue">Typecho</span></a>
</div>&nbsp;|&nbsp;
<div class="github-badge">
  <span class="badge-subject">Theme by</span>
  <a href="https://www.ihewro.com/" target="_blank">
    <span class="badge-value bg-orange">Handsome</span></a>
</div>
  1. 将以下内容添加至 外观设置 >> 开发者设置 >> 自定义 CSS 下：
/*底部页脚css*/
.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-green {
  background-color: #3bca6e
}
  1. 修改footer.php文件

在 footer.php 文件中，找到以下框选的2处内容，将其删除即可:

img

删除内容：

内容一： Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a>
内容二： &copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;

右侧导航图标美化

  • 开发者设置j >> 自定义CSS
/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

Logo扫光效果

  • 开发者设置j >> 自定义CSS
/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

让网站自动刷新

没有使用，测试的时候开

  • 开发者设置 >> 自定义输出head头部的HTML代码 >> 自定义html语句：
自己调时间 10=10s
<META HTTP-EQUIV="Refresh" content="10">

使用html和css3给网站添加上春节灯笼挂件代码

  • 给主题挂个灯笼

没有使用，会被导航栏挡住，后面再研究

点击展开

  1. 复制下面的代码添加到主题 --> 设置外观 --> 开发者设置 --> 自定义输出head头部HTML代码
<!-- 灯笼 1 -->
<div class="deng-box">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">春节</div></div>
        </div>
        <div class="shui shui-a"></div>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>

<!-- 灯笼 2 -->
<div class="deng-box1">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">快乐</div></div>
        </div>
        <div class="shui shui-a"></div>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>
<body id="body" class="fix-padding">
  1. 复制下面的css代码添加到主题 --> 设置外观 --> 开发者设置 --> 自定义CSS
@media (max-width: 1600px){.deng-box{display: none;}.deng-box1{display: none;}}  //手机端隐藏
    .xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.deng-box {
    position: fixed;
    top: -30px;
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 60px;
    z-index: 999;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.shui {
    width: 5px;
    height: 40px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
.shui-a {
    margin: -10px 0 0 40px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -20px;
}
.shui-b {
    margin: -35px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
}
.shui-c {
    margin: -45px 0 0 77px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -25px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 1.8rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
    50% {
        -moz-transform: rotate(10deg)
    }
    100% {
        -moz-transform: rotate(-10deg)
    }
}
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

添加每日60s读懂世界

  • 添加文章或者独立页面 >> 加入输入下列代码：
    ☞这里
<img src="http://api.03c3.cn/zb" />

首页添加新年倒计时

☞这里

  • 如下，复制到后台→开发者设置→首页列表最前方广告位
在代码内找到var EndTime = new Date('2022/01/1 00:00:00');修改里面时间即可

点击展开 

<style>  
    .gn_box{border: none; border-radius: 15px; }  
    .gn_box{padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff;}
    #t_d{color: #982585; font-size: 18px;}
    #t_h{color: #8f79c1; font-size: 18px;}
    #t_m{color: #65b4b5; font-size: 18px;}
    #t_s{color: #83caa3; font-size: 18px;}  
</style>  
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>2</font>
        <font color=#A3005C>3</font>
        <font  color=#8C0073>年</font>
        <font color=#75008A>-</font>
        <font color=#5E00A1>新</font>
        <font color=#4700B8>年</font>
        <font color=#3000CF>倒</font>
        <font color=#1900E6>计</font>
        <font color=#0200FD>时</font>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d"> 天</span>
            <span id="t_h"> 时</span>
            <span id="t_m"> 分</span>
            <span id="t_s"> 秒</span>
            </div>
    </center>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2023/01/1 00:00:00');
            var NowTime = new Date();
            var t = EndTime.getTime() - NowTime.getTime();
            var d = Math.floor(t / 1000 / 60 / 60 / 24);
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            var m = Math.floor(t / 1000 / 60 % 60);
            var s = Math.floor(t / 1000 % 60);
            var day = document.getElementById("t_d");
            if (day != null) {
                day.innerHTML = d + " 天";
            }
            var hour = document.getElementById("t_h");
            if (hour != null) {
                hour.innerHTML = h + " 时";
                }
                var min = document.getElementById("t_m");
                if (min != null) {
                    min.innerHTML = m + " 分";
                }
                var sec = document.getElementById("t_s");
                if (sec != null) {
                    sec.innerHTML = s + " 秒";
                }
            }
        setInterval(getRTime, 1000);
    </script>
</div>

Last modification：June 25, 2024
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate