Typecho主题Handsome修改备忘录

博主：博主
发布时间：2023 年 05 月 13 日
278 次浏览
1 条评论
14130字数
分类：学习笔记

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

```
<html>
 <head></head>
 <body>
  <span class="text-muted text-xs block"> 
   <div id="chakhsu"></div>
   <script>
   var chakhsu = function (r) {         function t() {             return b[Math.floor(Math.random() * b.length)]}          function e() {             return String.fromCharCode(94 * Math.random() + 33)}          function n(r) {             for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {                  var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) }              return n}         function i() {             var t = o[c.skillI];              c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) }          /*以下内容自定义修改*/ var l = "", o = ["一场风雨一场寒，清风过，烟云散" ].map(         function (r) {             return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i()      };      chakhsu(document.getElementById('chakhsu'));  
   </script>
  </span> 
 </body>
</html>
```

### 左侧导航栏配置

```
{"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"},
```

### 顶部导航栏配置

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

### 彩色标签云

代码添加到PJAX回调和开发者设置 `->`自定义JavaScript中

```

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;
});
```

### 彩色数量标签背景

代码添加到PJAX回调和开发者设置 `->`自定义JavaScript中

```

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

### 左侧彩色图标

代码添加到PJAX回调和开发者设置 `->`自定义JavaScript中

```

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

代码添加到开发者设置 `->`自定义CSS中

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

### 文章标题居中

代码添加到开发者设置 `->`自定义CSS中

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

### LOGO扫光

代码添加到开发者设置 `->`自定义CSS中

```
/* 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;}}
```

### 自定义右键

代码添加到开发者设置 `->`自定义输出body 尾部的HTML代码

```

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><span class="external-link"><a class="no-external-link" href="https://blog.icolak.com" target="_blank"><i data-feather="external-link"></i><i class="fa fa-home fa-fw"></i><span>首页</span></a></span></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><span class="external-link"><a class="no-external-link" href="https://blog.icolak.com/friendlink.html" target="_blank"><i data-feather="external-link"></i><i class="fa fa-meh-o fa-fw"></i><span>友链申请</span></a></span></li>  
           <li><span class="external-link"><a class="no-external-link" href="https://blog.icolak.com/guestbook.html" target="_blank"><i data-feather="external-link"></i><i class="fa fa-pencil-square-o fa-fw"></i><span>留言反馈</span></a></span></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);

### 复制成功提示

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

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

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

### 万能的控制台

```

<script type="text/javascript">
  console.clear();  //清空控制台
  console.log("\n %c iColak's Blog  控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台，可写html代码
</script>
```

### 首页文章上浮

`开发者设置->自定义css`中添加代码

```
/*首页文章列表悬停上浮*/
.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);
}
```

### 修改h1，h2标题背景颜色

`开发者设置->自定义css`中添加代码

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

### 鼠标点击特效

`开发者设置->自定义尾部html`中添加代码

```
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>
```

## 自定义页面

### 每日一读

1. 创建页面，名称随意
2. 内容填写 `<img src="http://api.03c3.cn/zb" />`即可

## 魔改主题

### 响应时间和访客总数

1. 将以下代码放到 `/usr/themes/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;
   }
   /*响应时间代码结束*/
   ```
2. 然后将以下代码放到 `/usr/themes/handsome/component/sidebar.php`内，找到博客信息添加即可
   ```
   
   <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></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="refresh-ccw"></i></span>
   <span class="badge
   pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
   
   ```

### 心知天气

1. 登录[知心天气官网](https://blog.icolak.com/go/d3d3LnNlbml2ZXJzZS5jb20)注册申请免费API 密钥
2. 将以下代码放入 `/usr/themes/handsome/component/headnav.php`第180行左右 `<?php echo $headerItemsOutput; ?>`之后并更换你的公钥秘钥即可
   ```
   
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
   <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
   <script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "公钥",
    "hash": "密钥"
   });
   tpwidget("show");</script>
   
   ```

### 美化主页小头图版式

**记得备份**
在 `handsome/libs/Content.php`文件中

```
<div class="panel-small single-post box-shadow-wrap-normal">
    <div class="index-post-img-small post-feature index-img-small">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
        </a>
</div>
```

替换为：

```
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
    <div class="index-post-img-small post-feature index-img-small tt-left-box">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
        </a>
    </div>
<div class="tt-blur-img lazy" {$backgroundImageHtml}></div>
```

`设置外观→开发者设置→自定义CSS`，填入以下css样式：

```
.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;}}
```

### 增加文章底部版权信息

复制下面代码到你服务器文件路径 `usr/themes/handsome/post.php`文件86行左右 `<?php echo PostContent::exportPostFooter($this->modified,$this->options->timezone - idate("Z"),$this); ?>`之后放置代码即可.

```

<div class="entry-content l-h-2x">
  <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
     <span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
     <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
     <span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
     <span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
  </div>
</div>

```

### 优化文章页面包屑导航

修改 `handsome/libs/Content.php`文件211行左右，将

```
echo '<li class="active">' . _mt("正文") . '  </li>';
```

修改为

```
$options = Typecho_Widget::widget('Widget_Options');
echo '<li><a href='.$options->siteUrl .$archive->category.'>'. $archive->categories[0]['name'].'</a></span></li>'.'<li class="active">' . _mt("正文") . '  </li>';
```

最后修改：2023 年 05 月 13 日

如果觉得我的文章对你有用，请随意赞赏

1 条评论

博主
2023/05/13 11:50:18

！！！！

此处评论已关闭

Typecho主题Handsome修改备忘录

博主 • 2023 年 05 月 13 日

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

### 左侧导航栏配置

### 顶部导航栏配置

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

### 彩色标签云

代码添加到PJAX回调和开发者设置 `->`自定义JavaScript中

### 彩色数量标签背景

代码添加到PJAX回调和开发者设置 `->`自定义JavaScript中

### 左侧彩色图标

代码添加到PJAX回调和开发者设置 `->`自定义JavaScript中

```

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

代码添加到开发者设置 `->`自定义CSS中

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

### 文章标题居中

代码添加到开发者设置 `->`自定义CSS中

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

### LOGO扫光

代码添加到开发者设置 `->`自定义CSS中

### 自定义右键

代码添加到开发者设置 `->`自定义输出body 尾部的HTML代码

```

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

### 复制成功提示

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

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

### 万能的控制台

### 首页文章上浮

`开发者设置->自定义css`中添加代码

### 修改h1，h2标题背景颜色

`开发者设置->自定义css`中添加代码

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

### 鼠标点击特效

`开发者设置->自定义尾部html`中添加代码

## 自定义页面

### 每日一读

1. 创建页面，名称随意
2. 内容填写 `<img src="http://api.03c3.cn/zb" />`即可

## 魔改主题

### 响应时间和访客总数

### 心知天气

### 美化主页小头图版式

**记得备份**
在 `handsome/libs/Content.php`文件中

替换为：

`设置外观→开发者设置→自定义CSS`，填入以下css样式：

### 增加文章底部版权信息

### 优化文章页面包屑导航

修改 `handsome/libs/Content.php`文件211行左右，将

```
echo '<li class="active">' . _mt("正文") . '  </li>';
```

修改为

Typecho主题Handsome修改备忘录

1 条评论

游戏天堂:全球PC游戏破解下载站

Excel密码破解工具 Passper for Excel

Github无法访问解决办法

文明6地图全开方法

免 ROOT 删除安卓内置应用

宝塔面板安装WordPress建网站详细教程

别争了，Access数据库才是真正的低代码开发平台

安利一款Hansome主题专用的UserAgent插件

游戏天堂:全球PC游戏破解下载站

Typecho主题Handsome修改备忘录

Typecho主题Handsome修改备忘录