2020-02-26

handsome美化记录

基本上参考和复制了官方教程和史上最全的handsome美化，没有之一！（持续更新）。

Typecho 插件添加

[collapse status=“false” title=“UserAgent插件（显示评论人使用的操作系统和浏览器信息（Handsome主题专用）”]

[post url=“https://doge.uk/coding/useragent-modify.html” title=“安利一款Hansome主题专用的UserAgent插件” cover=“https://doge.uk/usr/uploads/2019/04/2919419827.png”]

[/collapse]

[collapse status=“false” title=“Bangumi 追番列表插件 Typecho 版”]

[post url=“https://blog.sspirits.top/archives/typecho-anime-list-plugin” title=“Typecho 追番列表插件” cover=“https://static.shadowyspirits.cn/blog/uploads/2019/02/945115605.png?_upt=9a26b2771585745515”]

[/collapse]

修改php文件

[collapse status=“false” title=“博客信息添加访客总数和响应耗时”]

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)']);
}

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>

[/collapse]

[collapse status=“false” title=“404页面自动返回”]

[post url=“http://book.huat.xyz/handsome/1501431” title=“404页面自动返回”]

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

[/collapse]

修改其他文件

[collapse status=“false” title=“添加额外的表情”] [post url=“https://sirblog.cn/bzhanowo.html” title=“handsome主题B站新表情”]

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

修改表情大小：

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

[/collapse]

博客底部左侧信息

[collapse status=“false” title=“备案号添加”]

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

[/collapse]

自定义 CSS

[collapse status=“false” title=“头像呼吸光环和鼠标悬停旋转放大”]

/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
    }
}

[/collapse]

[collapse status=“false” title=“首页文章标题居中”]

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

[/collapse]

[collapse status=“false” title=“文章阴影及头图放大特效”]

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

[/collapse]

[collapse status=“false” title=“盒子四周、上导航栏、文章小框、文章图片、引用文章及博客信息阴影调整”]

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

[/collapse]

[collapse status=“false” title=“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;
}

[/collapse]

[collapse status=“false” title=“右侧栏的条条更改为蓝色”]

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

[/collapse]

[collapse status=“false” title=“文章一二三四级标题美化”]

/*文章一二三四级标题美化*/
#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}

[/collapse]

自定义 JavaScript

[collapse status=“false” title=“彩色标签云”]

<!--彩色标签云-->
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;
});

[/collapse]

[collapse status=“false” title=“转载提醒（还需要设定head 头部的HTML代码（详见下面））”]

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

[/collapse]

[collapse status=“false” title=“地址栏变化”]

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

[/collapse]

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

[collapse status=“false” title=“转载提醒（还需要设定JavaScript（详见上面））”]

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

[/collapse]

[collapse status=“false” title=“拓展按钮”]

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

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

[/collapse] ##自定义输出body 尾部的HTML代码

[collapse status=“false” title=“Live2d——萌萌的血小板”]

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

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

自定义输出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>

[/collapse]

全局右侧边栏广告位

[collapse status=“false” title=“浏览人数统计”]

<a href="http://s01.flagcounter.com/more/yq3"><img src="https://s01.flagcounter.com/count2/yq3/bg_F9F9F9/txt_222222/border_F9F9F9/columns_2/maxflags_20/viewers_0/labels_1/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>

[/collapse]