基本上参考和复制了官方教程史上最全的handsome美化,没有之一!(持续更新)

Typecho 插件添加

UserAgent插件(显示评论人使用的操作系统和浏览器信息(Handsome主题专用)

Bangumi 追番列表插件 Typecho 版

修改php文件

博客信息添加访客总数和响应耗时

  1. handsome主题的文件夹中的functions.php的最底下添加:
/*加载时间 @return bool*/
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;
}

/*总访问量*/
function theAllViews(){
    $db = Typecho_Db::get();
    $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
    echo number_format($row[0]['SUM(VIEWS)']);
}
  1. handsome主题的文件夹中的/component/sidebar.php中找到博客信息的代码并添加(约为第99行):

        <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="eye"></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>

404页面自动返回

个人觉得5秒比较好……,把代码中的10都改成5

修改其他文件

添加额外的表情

内含 阿鲁+滑稽+小电视+新表情 的集成包

修改表情大小:

.emotion-bs {
    width: 30px;
}
.emotion-BZ {
    width: 50px;
}

博客底部左侧信息

备案号添加

<a href="http://www.beian.miit.gov.cn/"> 粤ICP备20009732号</a>

自定义 CSS

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

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #22ACD6;
    }
    50% {
        box-shadow: 0 0 16px #22ACD6;
    }
    100% {
        box-shadow: 0 0 4px #22ACD6;
    }
}

首页文章标题居中

/*首页文章标题居中*/
.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;
}

文章阴影及头图放大特效

/*文章阴影及头图放大特效,修正放大后头图的版权位置*/
.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);
}

盒子四周、上导航栏、文章小框、文章图片、引用文章及博客信息阴影调整

/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整*/
.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);
}

bilibili视频挂载

/*bilibili视频挂载*/

.bilibili{
    position: relative;
    width: 100%;
    height: 0;              /*高度设置这里无效,设置为0,用padding撑开div*/
    padding-bottom: 75%;    /*68%到80%都可以*/
}
.bilibili iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

右侧栏的条条更改为蓝色

/*右侧栏的条条更改为蓝色*/
.navs-slider-bar{
  background-color: #23B7E5;
}

文章一二三四级标题美化

/*文章一二三四级标题美化*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#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}

自定义 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;
});

转载提醒(还需要设定head 头部的HTML代码(详见下面))

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

地址栏变化

<!--地址栏变化-->
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);}});

自定义输出head 头部的HTML代码

转载提醒(还需要设定JavaScript(详见上面))

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

拓展按钮

<link rel="stylesheet" href="/usr/themes/handsome/assets/css/buttons.css">

css文件来自:https://www.bootcss.com/p/buttons/

自定义输出body 尾部的HTML代码

Live2d——萌萌的血小板

注:模型来自jad大佬的博客
  由于live2d-widget.js的官方文档404了……
  以下代码和部分js文件扒取自jad大佬的博客。
  live2d-widget.js核心及模型文件下载:点击此处

  1. 下载文件,将解压后的usr文件夹存放于网站根目录下。

  2. 自定义输出body 尾部的HTML代码

     <script src = "/usr/live2dw/lib/L2Dwidget.min.js"></script>
     <script>
     L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/usr/live2dw/assets/kesshouban.model.json"},"display":{"position":"right","width":325,"height":300,"hOffset":-110,"vOffset":0},"dialog":{"enable":true},"mobile":{"show":false},"react":{"opacity":1},"log":false});
    </script>

最后修改:2020 年 06 月 23 日 04 : 58 PM