handsome主题美化

首页图片焦点放大:

/*首页文章图片获取焦点放大1*/
.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);
}
/*首页文章图片获取焦点放大2*/
.index-post-img {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.3s;
}
.item-thumb:hover {
    transform: scale(1.1)
}

底部页脚标签:

就是这个:

将下面代码加入自定义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-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="©2019 Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Alvin</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 18135867号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">18135867号</span>
</a>
</div>

将下列代码放入博客右侧信息:

<div class="github-badge">
<a href="http://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>

然后将主题目录里的component/footer.php中的主题生命代码更换掉:

<?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 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>
      <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->

评论获取用户信息:

要安装插件,附上下载链接:
链接:https://pan.baidu.com/s/1kO-Fm5VaMJqANkTO_xcmww
提取码:h2yz
把这个插件放到typecho的plugin目录下,然后去后台启用
在component/comments.php中修改代码,大概在六十到八十行:
在comment-author vcard类中添加以下代码:

<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

这个就是在用户信息后面添加显示,效果可见本站评论,鼠标放上去就会显示,其他设置自己体验。

魔性动态标题

这个我没用,但蛮有意思,喜欢可以自己加上:
在自定义输出head 头部的HTML代码中添加:

<!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)我藏好了哦 - Alvin Blog';}else{document.title=normal_title;}});</script>

文本框打字机特效

在自定义输出body尾部的HTML代码中添加:

<!--文本框打字机特效-->
<script type="text/javascript" src="https://www.mgxfd.club/usr/themes/handsome/assets/js/commentTyping.js"></script>

复制弹框版权提醒

在自定义输出head头部的HTML代码中添加:

<!--复制弹框JS-->
<script src="https://www.mgxfd.club/layer/layer.js"></script>

在自定义Javascript中添加:

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};

文章底部赞赏图标跳动:

在自定义CSS中添加:

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

以上内容转载自:https://www.mgxfd.club/20.html

添加网站访客统计和网站响应耗时

在handsome主题中的libs文件夹中的content.php中添加以下代码,放在class content{}之前:

   /**
     * 访问总量
     */
     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;
    }

在sidebar.php中添加:

<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></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="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

这个自己看着添加,位置自己挑。
这部分转载自:https://www.dgpyy.com/archives/49/
以上都是我用过的或者正在用的美化,效果可见本站。
typecho用作个人博客,还是相当不错的,写东西也很简单,没有wordpress那么复杂,有这么个主题,再搞个美化,也挺舒服的。

未经允许不得转载:MYELSE » handsome主题美化
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址