前言

黑猴打了过半,便停了下来。想着赶紧记录下这篇文章,不然过一段时间肯定会忘得七七八八,于是便有了这篇关于主题美化文章哈!
黑猴打的太上头了,等我游戏打完二周目了,在更新一篇关于黑神话:悟空相关的文章哈。

自定义CSS

头像呼吸光环和鼠标悬停旋转

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*头像呼吸光环和鼠标悬停旋转 开始 */
.img-full {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #22ACD6;
    }
    50% {
        box-shadow: 0 0 16px #22ACD6;
    }
    100% {
        box-shadow: 0 0 4px #22ACD6;
    }
}
/*头像呼吸光环和鼠标悬停旋转 结束 */

首页文章标题居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*首页文章标题居中 开始*/
.panel:not(article) h2{
    text-align: center; 
}
.panel-small:not(article) h2{
    text-align: center; 
}
.panel-picture:not(article) h3{
    text-align: center; 
}
.post-item-foot-icon:not(article){
    text-align: center;
}
/*首页文章标题居中 结束*/

文章一二三四级标题美化

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
/*文章一二三四级标题美化 结束*/

文章阴影及头图放大特效

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*文章阴影及头图放大特效,修正放大后头图的版权位置 开始*/
.blog-post .panel {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img {
    overflow: hidden;
}
.index-post-img-small {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.3s;
}
.item-thumb:hover {
    transform: scale(1.1)
}
.item-thumb-small {
    transition: all 0.3s;
}
.item-thumb-small:hover {
    transform: scale(1.1)
}
.item-thumb .img_copyright{
    transition: all 0.3s;
}
.item-thumb:hover .img_copyright{
    transform: translateX(-24px);
}
.entry-thumbnail {
    overflow: hidden;
}
.post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
.post-content img:hover {
    transform: scale(1.1);
}
/*文章阴影及头图放大特效,修正放大后头图的版权位置 结束*/

博客盒子、卡片阴影调整

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 开始*/
.app.container {
    box-shadow: 0 0 30px rgba(73, 90, 47, 0.47);
}
.navbar{
    box-shadow: 0 1px 10px rgba(73, 90, 47, 0.47);
}
.breadcrumb{
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
.breadcrumb:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 8px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img {
    transition: all 0.3s;
    box-shadow: 0 3px 5px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 10px rgba(73, 90, 47, 0.47);
}
.preview{
    box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
#blog_info .list-group{
    transition: all 0.3s;
}
#blog_info .list-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(73, 90, 47, 0.47);
}
/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 结束*/

两侧框架留白间距

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*两侧框架留白间距 开始*/
@media (min-width:1700px) {
    .app.container {
        width: 95%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 95%
    }
}

@media (min-width:2048px) {
    .app.container {
        width: 93%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 93%
    }
}

@media (min-width:1200px) {
    .app.container {
        width: 90%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 90%
    }

    .app.container .app-footer-fixed {
        max-width: 970px
    }

    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px
    }

    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 90%
    }
}
/*两侧框架留白间距 结束*/

logo扫光

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/* logo扫光 开始 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;
}

.navbar-brand:before {
    content: "";
    position: absolute;
    left: -685px;
    top: -460px;
    width: 240px;
    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 {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}

@-webkit-keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}

@-o-keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}

@keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}
/* logo扫光 结束 */

评论区背景图(手机和电脑显示不一样的背景图)

此处内容需要评论回复后(审核通过)方可阅读。

赞赏按钮跳动

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS

/*赞赏按钮跳动开始*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}
/*赞赏按钮跳动结束*/

自定义 JavaScript

彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 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;
});

转载提醒

  1. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 JavaScript

    document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');};
  2. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义输出head 头部的HTML代码

    <!--转载提醒-->
    <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

地址栏变化

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 JavaScript

<!--地址栏变化-->
var OriginTitle = document.title; var titleTime;
document.addEventListener('visibilitychange', function () {if (document.hidden) {document.title = '(๐•̆ ·̭ •̆๐)  不在了吗?'; clearTimeout(titleTime);} else {document.title = 'ヾ(Ő∀Ő3)ノ你回来啦!'; titleTime = setTimeout(function () {document.title = OriginTitle;}, 2000);}});

时间流逝

  1. 将以下代码加到 /usr/themes/handsome/component/sidebar.php,在122行左右,放在 <?php endif; ?> 之后

    <!-- 时间倒计时代码开始 -->
     <section id="blog_info" class="widget widget_categories wrapper-md clear">
         <h5 class="widget-title m-t-none text-md"><?php _me("时间流逝") ?></h5>
     <div class="sidebar sidebar-count">
         <div class="content">
             <div class="item" id="dayProgress">
                 <div class="title">今日已经过去<span></span>小时</div>
                 <div class="progress">
                     <div class="progress-bar">
                         <div class="progress-inner progress-inner-1"></div>
                     </div>
                     <div class="progress-percentage"></div>
                 </div>
             </div>
             <div class="item" id="weekProgress">
                 <div class="title">这周已经过去<span></span>天</div>
                 <div class="progress">
                     <div class="progress-bar">
                         <div class="progress-inner progress-inner-2"></div>
                     </div>
                     <div class="progress-percentage"></div>
                 </div>
             </div>
             <div class="item" id="monthProgress">
                 <div class="title">本月已经过去<span></span>天</div>
                 <div class="progress">
                     <div class="progress-bar">
                         <div class="progress-inner progress-inner-3"></div>
                     </div>
                     <div class="progress-percentage"></div>
                 </div>
             </div>
             <div class="item" id="yearProgress">
                 <div class="title">今年已经过去<span></span>个月</div>
                 <div class="progress">
                     <div class="progress-bar">
                         <div class="progress-inner progress-inner-4"></div>
                     </div>
                     <div class="progress-percentage"></div>
                 </div>
             </div>
         </div>
     </div>
          </section>
     <!-- 时间倒计时代码结束 -->
  2. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS

    /* 时间流逝 开始 */
    .sidebar-count .content {
     padding: 15px
    }
     
    .sidebar-count .content .item {
     margin-bottom: 15px
    }
     
    .sidebar-count .content .item:last-child {
     margin-bottom: 0
    }
     
    .sidebar-count .content .item .title {
     font-size: 12px;
     color: var(--minor);
     margin-bottom: 5px;
     display: flex;
     align-items: center
    }
     
    .sidebar-count .content .item .title span {
     color: var(--theme);
     font-weight: 500;
     font-size: 14px;
     margin: 0 5px
    }
     
    .sidebar-count .content .item .progress {
     display: flex;
     align-items: center
    }
     
    .sidebar-count .content .item .progress .progress-bar {
     height: 10px;
     border-radius: 5px;
     overflow: hidden;
     background: var(--classC);
     width: 0;
     min-width: 0;
     flex: 1;
     margin-right: 5px
    }
    @keyframes progress {
     0% {
         background-position: 0 0
     }
     
     100% {
         background-position: 30px 0
     }
    }
    .sidebar-count .content .item .progress .progress-bar .progress-inner {
     width: 0;
     height: 100%;
     border-radius: 5px;
     transition: width 0.35s;
     -webkit-animation: progress 750ms linear infinite;
     animation: progress 750ms linear infinite
    }
     
    .sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
     background: #bde6ff;
     background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
     background-size: 30px 30px
    }
     
    .sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
     background: #ffd980;
     background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
     background-size: 30px 30px
    }
     
    .sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
     background: #ffa9a9;
     background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
     background-size: 30px 30px
    }
     
    .sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
     background: #67c23a;
     background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
     background-size: 30px 30px
    }
     
    .sidebar-count .content .item .progress .progress-percentage {
     color: var(--info)
    }
    /* 时间流逝 结束 */
  3. 打开站点根目录 - 跳转到 - /usr/themes/handsome/assets/js (打开主题 handsome - assets - assets - js)
  4. 新建一个文件 命名为:timeinfo.js
  5. 复制代码到 timeinfo.js

    function init_life_time() {
             function getAsideLifeTime() {
                 /* 当前时间戳 */
                 let nowDate = +new Date();
                 /* 今天开始时间戳 */
                 let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
                 /* 今天已经过去的时间 */
                 let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
                 /* 今天已经过去的时间比 */
                 let todayPassHoursPercent = (todayPassHours / 24) * 100;
                 $('#dayProgress .title span').html(parseInt(todayPassHours));
                 $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
                 $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
                 /* 当前周几 */
                 let weeks = {
                     0: 7,
                     1: 1,
                     2: 2,
                     3: 3,
                     4: 4,
                     5: 5,
                     6: 6
                 };
                 let weekDay = weeks[new Date().getDay()];
                 let weekDayPassPercent = (weekDay / 7) * 100;
                 $('#weekProgress .title span').html(weekDay);
                 $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
                 $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
                 let year = new Date().getFullYear();
                 let date = new Date().getDate();
                 let month = new Date().getMonth() + 1;
                 let monthAll = new Date(year, month, 0).getDate();
                 let monthPassPercent = (date / monthAll) * 100;
                 $('#monthProgress .title span').html(date);
                 $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
                 $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
                 let yearPass = (month / 12) * 100;
                 $('#yearProgress .title span').html(month);
                 $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
                 $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
             }
             getAsideLifeTime();
             setInterval(() => {
                 getAsideLifeTime();
             }, 1000);
         }
         init_life_time()
  6. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义输出body 尾部的HTML代码 即可

    <!-- 时间流逝 -->  
    <script src="https://自己的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

自定义代码

自定义作者评论头像

方法一
修改显示在时光机、评论、右上角顶部的头像方法:gravatar(全球通用头像),打开后台——控制台——个人设置,点击左侧的头像,去该网站使用你在个人设置里填写的电子邮箱地址注册账号,并上传头像,typecho的头像会自动更新。

此处内容需要评论回复后(审核通过)方可阅读。

文末END

  1. 在主题文件 post.php<?php if ($this->options->adContentPost != ""): ?> 前面加上下面的代码

    <div class="entry-content l-h-2x">
     <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
     <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
    </div>

版权提示

  1. 在主题文件 post.php<?php if ($this->options->adContentPost != ""): ?> 前面加上下面的代码,在 文末END 之后即可

    <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
    <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>  
    <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
    <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
    <span>版权说明:若无注明,本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
    </div>

响应时间和访客总数

  1. 将以下代码放到 控制台 - 外观 - 编辑当前外观 - functions.php - 文件最底部添加下方代码。

    /*访问总量代码开始*/
    function theAllViews(){
     $db = Typecho_Db::get();
     $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
         echo number_format($row[0]['SUM(VIEWS)']);
    }
    /*访问总量代码结束*/
    /*响应时间代码开始*/
    function timer_start() {
    global $timestart;
    $mtime = explode( ' ', microtime()  );
    $timestart = $mtime[1] + $mtime[0];
    return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
    global $timestart, $timeend;
    $mtime = explode( ' ', microtime()  );
    $timeend = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision  );
    $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display  ) {
     echo $r;
    }
    return $r;
    }
    /*响应时间代码结束*/
  2. 然后将以下代码放到 /usr/themes/handsome/component/sidebar.php 内,打开 sidebar.php 搜索 最后活动 ,在后面添加下方代码即可。

    <!--访客总数代码开始-->
    <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
    <span class="badge
    pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
    <!--访客总数代码结束-->
    
    <!--响应耗时代码开始-->
    <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
    <span class="badge
    pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
    <!--响应耗时代码结束-->
  3. 如过此方法的 访客总数 显示不正常或者为 0,那可以参考一下插件篇的 PageViews
    访客总数为 0 时候,需要检测 theAllViews 代码中是数据库前缀是否跟自己数据库前缀一直,不一致需要修复成自己的,
    下方数据库前缀为 xxx_ 需要修改成自己的数据库前缀。

    /* 总访问量 */ 
    function theAllViews()
    {
     /* 获取数据库连接 */
     $db = Typecho_Db::get();
    
     /* 查询所有文章的访问量总和 数据库前缀需要替换成自己的 */
     $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `xxx_contents`');
    
     /* 输出格式化后的访问量 */
     echo number_format($row[0]['SUM(VIEWS)']);
    };

添加心知天气

  1. 知心天气官网知心天气注册申请免费API 密钥。
  2. 然后将以下代码放到 /usr/themes/handsome/component/aside.php 内,在 <ul class="dropdown-menu animated fadeInRight w hidden-folded no-padder"> 前面添加下方代码并更换自己的公钥秘钥。(目前再用的)
  3. 然后将以下代码放到 /usr/themes/handsome/component/headnav.php 第117行左右,并更换自己的公钥秘钥。(PC端宽度小于1250px会出现不兼容现象)
  4. 使用官方代码也是可以的,就是样式有点丑(使用自定义地区)。
  5. 下方代码是 会展开天气详情 的。

    <!-- 知心天气-->
     <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
    <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
    <script>tpwidget("init", {
     "flavor": "slim",
     "location": "WX4FBXXFKE4F",
     "geolocation": "enabled",
     "language": "auto",
     "unit": "c",
     "theme": "chameleon",
     "container": "tp-weather-widget",
     "bubble": "enabled",
     "alarmType": "badge",
     "color": "#C6C6C6",
     "uid": "公钥",
     "hash": "密钥"
    });
    tpwidget("show");</script>
    <!-- 知心结束-->
  6. 下方代码 不会展开天气详情

    <!-- 心知天气插件 开始 -->        
      <div id="tp-weather-widget2"></div>
    <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
    <script>tpwidget("init", {
     "flavor": "slim",
     "location": "WX4FBXXFKE4F",
     "geolocation": "enabled",
     "language": "auto",
     "unit": "c",
     "theme": "chameleon",
     "container": "tp-weather-widget2",
     "bubble": "disabled",
     "alarmType": "badge",
     "color": "#C6C6C6",
     "uid": "公钥",
     "hash": "密钥"
    });
    tpwidget("show");</script>
    <!-- 心知天气插件 结束  -->

底部页脚美化

  1. 打开后台-更改外观-设置外观-开发者设置- 复制代码粘贴至 自定义 CSS

    /*底部页脚 开始*/
    #footer .footer_wrapper {
      padding-bottom: 4px;
    }
    
    .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
    }
    /*底部页脚 结束 */
  2. 打开后台-更改外观-设置外观-开发者设置- 复制代码粘贴至 博客底部左侧信息

    <div class="github-badge">
    <a href="https://onemuggle.com/" target="_blank" title="©2023&nbsp;OneMuggle">
    <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2023&nbsp;OneMuggle</span>
    </a>
    </div>
    &nbsp;|&nbsp;
    <div class="github-badge">
    <a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 xxx号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
    <span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">xxx号</span>
    </a>
    </div>
  3. 打开后台-更改外观-设置外观-开发者设置- 复制代码粘贴至 博客底部右侧信息

    <div class="github-badge">
    <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
    <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
    </a>
    </div>
    &nbsp;|&nbsp; 
    <div class="github-badge">
    <a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
    <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
    </a>
    </div>
  4. 删除 /usr/themes/handsome/component/footer.php 文件内部分代码,删除以下代码(大概第八行左右)。

    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>
  5. 继续删除以下代码。

    &copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;
  6. 保存后刷新博客即可。

404页面自动返回首页

  1. 在主题文件 404.php<div class="list-group bg-info auto m-b-sm m-b-lg"> 前面加上下面的代码,返回OneMuggle首页 替换成自己的站点名。

    <div class="juzhong404">
     <p>页面将在 0<span id="countdown">5</span> 秒后返回OneMuggle首页</p>
     <p> <span class="xiaoshou404" onclick="immediateReturn()">立即返回上一页</span></p>
    </div>
  2. </body> 前面加上下面的代码, https://onemuggle.com 替换成自己的站点地址。

    <script>
         let countdown = 5; // 倒计时初始值
         let countdownElement;
    
         function updateCountdown() {
             countdownElement.innerText = countdown;
             if (countdown > 0) {
                 countdown--;
                 setTimeout(updateCountdown, 1000);
             } else {
                 // 5秒后返回上一页
                 // window.history.back();
                 // 5秒后返回首页
                 window.location.href = 'https://onemuggle.com';
             }
         }
    
         function immediateReturn() {
             // 点击立即返回按钮,直接返回上一页
             window.history.back();
             // 点击 OneMuggle首页,直接返回首页
             // window.location.href = 'https://onemuggle.com';
         }
    
         window.onload = function() {
             countdownElement = document.getElementById('countdown');
             updateCountdown(); // 开始倒计时
         };
     </script>
     <style>
         .xiaoshou404 {
             cursor: pointer;
             color: #666666;
         }
         .juzhong404{
             display: flex;
             flex-direction: column;
             align-items: center;
             margin-bottom: 5px;
             color: #888888;
         }
     </style>
  3. 保存后刷新博客即可。

评论时间修改

将以下代码放到 /usr/themes/handsome/component/comments.php 内,找到 <a href="#<?php $comments->theId()?>"> 这一行,把这 整行 替换掉。(目前再用的)

<a href="#<?php $comments->theId()?>"><time class="format_time text-muted text-xs block m-t-xs" pubdate="pubdate" datetime="<?php $comments->date('c'); ?>"><?php echo Utils::formatDate($comments, $comments->created, 'Y-m-d H:i:s'); ?></time></a>

参考地址(不分先后)

END
本文作者: 文章标题:Handsome主题美化——记录已完善
本文地址:https://www.onemuggle.com/archives/164.html
版权说明:若无注明,本文皆OneMuggle原创,转载请保留文章出处。
如果觉得我的文章对你有用,请随意赞赏