Typecho主题Handsome修改备忘录-iColak's Blog

主题配置

主题色调自定义搭配

[collapse status="false" title="点击展开"]

white-white-white

[/collapse]

背景颜色

[collapse status="false" title="点击展开"]

#efefef

[/collapse]

博主介绍动态彩色打字效果

[collapse status="false" title="点击展开"]

[/collapse]

左侧导航栏配置

[collapse status="false" title="点击展开"]

{"name":"引导页","class":"glyphicon glyphicon-star","link":"https://","target":"_blank"},
{"name":"知识库","class":"glyphicon glyphicon-book","link":"https://","target":"_blank"},
{"name":"导航站","class":"glyphicon glyphicon-globe","link":"https://","target":"_blank"},
{"name":"留言板","class":"glyphicon glyphicon-comment","link":"https://"},
{"name":"时间轴","class":"glyphicon glyphicon-time","link":"https://"},
{"name":"追番剧","class":"glyphicon glyphicon-film","link":"https://"},
{"name":"相片薄","class":"glyphicon glyphicon-picture","link":"https://"},
{"name":"云存储","class":"glyphicon glyphicon-hdd","link":"https://"},
{"name":"壁纸库","class":"glyphicon glyphicon-leaf","link":"","target":"_blank"},

[/collapse]

顶部导航栏配置

[collapse status="false" title="点击展开"]

{"name":"talk","status":"hide"} // 隐藏闲言碎语

[/collapse]

彩色标签云

代码添加到PJAX回调和开发者设置->自定义JavaScript中
[collapse status="false" title="点击展开"]


let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

[/collapse]

彩色数量标签背景

代码添加到PJAX回调和开发者设置->自定义JavaScript中
[collapse status="false" title="点击展开"]


let badges= document.querySelectorAll(".badge");
badges.forEach(badge => {
    badgeColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    badge .style.backgroundColor = badgeColor ;
});

[/collapse]

左侧彩色图标

代码添加到PJAX回调和开发者设置->自定义JavaScript中
[collapse status="false" title="点击展开"]

 
  let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

[/collapse]

优化彩色标签文字在夜间模式的显示

代码添加到开发者设置->自定义CSS中
[collapse status="false" title="点击展开"]

@media (prefers-color-scheme: dark) {
    html.theme-dark .badge {
    color:white
}
     }

[/collapse]

文章标题居中

代码添加到开发者设置->自定义CSS中
[collapse status="false" title="点击展开"]

/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}

[/collapse]

LOGO扫光

代码添加到开发者设置->自定义CSS中
[collapse status="false" title="点击展开"]

/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; 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{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

[/collapse]

自定义右键

代码添加到开发者设置->自定义输出body 尾部的HTML代码
[collapse status="false" title="点击展开"]







    
        首页
        复制
        刷新
        友链申请  
           留言反馈

[/collapse]

复制成功提示

[collapse status="false" title="点击展开"]

/* 复制成功提示代码开始 */ 
    kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！
 本文作者：苏为歌
原文链接：
"+sitesurl,
    title: "复制成功",
    type: "success",
    autoHide: !1,
    time: "5000"
    })
}}
/* 复制成功提示代码结束 */

[/collapse]

手机端不显示热门文章和标签云

[collapse status="false" title="点击展开"]

/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

[/collapse]

万能的控制台

[collapse status="false" title="点击展开"]

[/collapse]

首页文章上浮

开发者设置->自定义css中添加代码
[collapse status="false" title="点击展开"]

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:not(article) {
transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:not(article) {
transition: all 0.3s;
}
.blog-post .panel-picture:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

[/collapse]

修改h1，h2标题背景颜色

开发者设置->自定义css中添加代码
[collapse status="false" title="点击展开"]

/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}

[/collapse]

鼠标点击特效

开发者设置->自定义尾部html中添加代码
[collapse status="false" title="点击展开"]

[/collapse]

自定义页面

每日一读

创建页面，名称随意
内容填写即可

魔改主题

响应时间和访客总数

将以下代码放到/usr/themes/handsome/libs/Content.php的class content{}前
[collapse status="false" title="点击展开"]

/*访问总量代码开始*/
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;
}
/*响应时间代码结束*/

[/collapse]

然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，找到博客信息添加即可
[collapse status="false" title="点击展开"]
```
  




  
```
[/collapse]

心知天气

登录知心天气官网注册申请免费API 密钥

将以下代码放入/usr/themes/handsome/component/headnav.php第180行左右之后并更换你的公钥秘钥即可
[collapse status="false" title="点击展开"]

[/collapse]

美化主页小头图版式

记得备份
在handsome/libs/Content.php文件中[collapse status="false" title="点击展开"]

[/collapse]替换为：
[collapse status="false" title="点击展开"]

[/collapse]设置外观→开发者设置→自定义CSS，填入以下css样式：
[collapse status="false" title="点击展开"]

.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}

[scode type="share"]教程来自：听闻 ALL in game[/scode]
[/collapse]

增加文章底部版权信息

复制下面代码到你服务器文件路径usr/themes/handsome/post.php文件86行左右modified,$this->options->timezone - idate("Z"),$this); ?>之后放置代码即可.
[collapse status="false" title="点击展开"]



  
     本文作者： author(); ?>

     文章标题：title() ?>

     本文地址：permalink() ?>

     版权说明：若无注明，本文皆options->title() ?>原创，转载请保留文章出处。

[/collapse]

优化文章页面包屑导航

[post cid="380" cover="https://blog.static.icolak.com/typecho/2022/05/03/breadnvaimg.jpg?x-oss-process=style/blog"/]

网站底部增加已运行时间

[post cid="391" cover="https://blog.static.icolak.com/typecho/2022/05/03/uptime.jpg?x-oss-process=style/blog"/]

取消时光机文字首字放大效果

修改usr/themes/handsome/component/say.php文件，将以下代码注释掉
[collapse status="false" title="点击展开"]

#talk .streamline>.comment-list > .comment-body >.time-machine > .panel-body p:first-letter {
    font-size: 140%;
    /* float: left; */
    vertical-align: middle;
}

[/collapse]

目录CONTENT

Typecho主题Handsome修改备忘录

主题配置

主题色调自定义搭配

背景颜色

博主介绍动态彩色打字效果

左侧导航栏配置

顶部导航栏配置

彩色标签云

彩色数量标签背景

左侧彩色图标

优化彩色标签文字在夜间模式的显示

文章标题居中

LOGO扫光

自定义右键

复制成功提示

手机端不显示热门文章和标签云

万能的控制台

首页文章上浮

修改h1，h2标题背景颜色

鼠标点击特效

自定义页面

每日一读

魔改主题

响应时间和访客总数

心知天气

美化主页小头图版式

增加文章底部版权信息

优化文章页面包屑导航

网站底部增加已运行时间

取消时光机文字首字放大效果

评论区