侧边栏壁纸
博主头像
iColak's Blog博主等级

人生来来往往,来日并不方长

  • 累计撰写 106 篇文章
  • 累计创建 31 个标签
  • 累计收到 382 条评论

目 录CONTENT

文章目录

Typecho主题Handsome修改备忘录

苏维歌
2022-04-24 / 0 评论 / 0 点赞 / 4 阅读 / 20703 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-07-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

主题配置

主题色调自定义搭配

[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]

自定义页面

每日一读

  1. 创建页面,名称随意
  2. 内容填写 即可

魔改主题

响应时间和访客总数

  1. 将以下代码放到/usr/themes/handsome/libs/Content.phpclass 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]

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

    
    
  3. [/collapse]

心知天气

  1. 登录知心天气官网注册申请免费API 密钥
  2. 将以下代码放入/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="点击展开"]


本文作者:
文章标题: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]

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin
  3. QQ打赏

    qrcode qq

评论区