说明: 内容均非原创,由互联网收集所得

插件

UserAgent评论信息

官网有详细的安装使用教程,这里不过多描述


底部页脚标签样式

底部页脚标签样式


  • 将以下代码添加至后台主题设置 自定义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;
    background-color: #f6b044;
}
.github-badge .badge-subject {
    display: inline-block;
    background-color: #f6b044;
    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-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
}
.github-badge .bg-purple {
    background-color: #3f51b5;
}
.github-badge .bg-green {
    background-color: #3bca6e;
}
.github-badge a {
    text-decoration: none;
    color: #fff;
}
  • 将以下代码添加至后台主题设置 博客底部左侧信息,信息修改成自己的
<div class="github-badge" title="本站版权信息">
    <a href="#">
        <span class="badge-subject">©2021</span>
        <span class="badge-value bg-blue">迷途</span>
    </a>
</div>
<div class="github-badge" title="本站ICP备案号">
    <a href="http://www.miitbeian.gov.cn/" target="_blank">
        <span class="badge-subject">
            <img
                src="https://cdn.jsdelivr.net/gh/codemq/image/d2be085ac53bf1e4c2c720117ec12334.png"
                style="width:11px; height: 12px"
            />
            滇ICP
        </span>
        <span class="badge-value bg-blue">19007031号-3</span>
    </a>
</div>
  • 将以下代码添加至后台主题设置 博客底部右侧信息
<div class="github-badge" style="background-color: transparent">
    <a
        href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"
        target="_blank"
        title="本站由 Upyun 提供加速服务"
    >
        <img src="https://cdn.jsdelivr.net/gh/codermq/image/PicGo/20210319140123.png" alt="" width="60px" height="30px" />
    </a>
</div>
<div class="github-badge" title="本站由 Typecho 强力驱动">
    <a href="http://www.typecho.org" target="_blank">
        <span class="badge-subject">Powered</span>
        <span class="badge-value bg-blue">Typecho</span>
    </a>
</div>
&nbsp;|&nbsp;
<div class="github-badge" title="本站使用handsome主题">
    <a href="https://www.ihewro.com/archives/489/" target="_blank">
        <span class="badge-subject">Theme</span>
        <span class="badge-value bg-blue">Handsome</span>
    </a>
</div>
  • 添加完成后,需要去handsome\component\footer.php替换原有声明代码,以下为替换完后的效果(大概1~12行)
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper b-t bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
     
      </span>
        <span class="text-ellipsis"><?php $this->options->BottomleftInfo(); ?></span>
    </div>
      <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->

文章阴影化

文章阴影化

  • 将以下代码添加至后台主题设置 自定义CSS
.panel{-moz-box-shadow:0 0 5px 3px rgba(0,0,0,0.5);}.panel{box-shadow:0 0 5px 3px rgba(0,0,0,0.5)!important;-moz-box-shadow:0 0 5px 3px rgba(0,0,0,0.5)!important;}
.panel-small{box-shadow:0 0 5px 3px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px 3px rgba(0,0,0,0.5);}
.panel-small{box-shadow:0 0 5px 3px rgba(0,0,0,0.5)!important;-moz-box-shadow:0 0 5px 3px rgba(0,0,0,0.5)!important;}
.app.container{box-shadow:0 0 5px 3px rgba(0,0,0,0.5);}.index-post-img,.entry-thumbnail{overflow:hidden;}

文章标题居中

文章标题居中

  • 将以下代码添加至后台主题设置 自定义CSS
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

文章选择卡

文章选择卡

  • 将以下代码添加至后台主题设置 自定义CSS
.panel{cursor:pointer;transition:all 0.6s;}.blog-post .panel:not(article):hover{transform:translateY(-10px);}
.panel-small{cursor:pointer;transition:all 0.6s;}
.panel-small:hover{transform:scale(1.05);}
.item-thumb{cursor:pointer;transition:all 0.6s;}
.item-thumb:hover{transform:scale(1.05);}
.item-thumb-small{cursor:pointer;transition:all 0.6s;}
.item-thumb-small:hover{transform:scale(1.05);}

标题居中

标题居中

  • 将以下代码添加至后台主题设置 自定义CSS
.bg-light .lter,.bg-light.lter{text-align:center!important;font-family:楷体!important;}

待更新...

结束:本站美化效果主要由插件功能实现,其他魔改记录待更新

最后修改:2021 年 05 月 20 日 10 : 47 AM
如果觉得我的文章对你有用,请随意赞赏