关于Hansome主题本站魔改

Author：小旭
发布时间：August 30, 2021
18495 views
23 comments
16360 words
Categories：教程科普

## 前言

这篇文章作为对 `Handsome 9.2.1 Pro`美化记录，有新增时会实时更新。
</div>

本文内容部分来源于网络，如有侵权请留言删除！
</div>

## 美化日志

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS
</div>

### 自定义CSS

### 文章标题居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f7a29066e52a938bc4f36c73f53d753e23" aria-expanded="true"><div class="accordion-toggle"><span style="">文章标题居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f7a29066e52a938bc4f36c73f53d753e23" class="collapse collapse-content"><p></p>

```css
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
```

### 全站页面纯白

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-907d96ef102a1af1910aa86f8bb0391066" aria-expanded="true"><div class="accordion-toggle"><span style="">全站页面纯白</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-907d96ef102a1af1910aa86f8bb0391066" class="collapse collapse-content"><p></p>

```css
/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}
```

### 局部阴影

```css
/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
/*文章圆角-阴影*/
.panel {
    box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
    border-radius: 6px!important;
}
```

### 修改字体

```css
/* zcool-kuaile-regular */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: regular;
  src: url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot'); /* IE9 Compat Modes */
  src: local('ZCOOL KuaiLe'), local('ZCOOLKuaiLe-Normal'),
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff') format('woff'), /* Modern Browsers */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.svg#ZCOOLKuaiLe') format('svg'); /* Legacy iOS */
}
/* 全局字体 */
* {
    font-family: 'ZCOOL KuaiLe';
}
```

### 标签/博客信息背景颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ab0f36a485befa6660b4fc6bfd4f5dee90" aria-expanded="true"><div class="accordion-toggle"><span style="">标签/博客信息背景颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ab0f36a485befa6660b4fc6bfd4f5dee90" class="collapse collapse-content"><p></p>

```css
.badge {
    background-color: rgb(0, 0, 0)!important;
}
.post-tags a {
    background-color: #000000;  
}
```

### LOGO扫光

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f4b2b8acc3c437039a38e3fbec2780564" aria-expanded="true"><div class="accordion-toggle"><span style="">LOGO扫光</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f4b2b8acc3c437039a38e3fbec2780564" class="collapse collapse-content"><p></p>

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

### 滚动条效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d1e133ff179c09132554a526634bbe0062" aria-expanded="true"><div class="accordion-toggle"><span style="">滚动条效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d1e133ff179c09132554a526634bbe0062" class="collapse collapse-content"><p></p>

```css
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}
```

### 自定义JavaScript

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义Javascript
</div>

### 左侧彩色图标&右侧彩色标签云

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-50c953ba4209c05273dc1d5d2073368998" aria-expanded="true"><div class="accordion-toggle"><span style="">左侧彩色图标&右侧彩色标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-50c953ba4209c05273dc1d5d2073368998" class="collapse collapse-content"><p></p>

需要将以下代码添加到PJAX->PJAX回调函数中
</div>

```javascript
//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
    tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);  
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
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;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});
```

### 页面顶部进度条

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-af7b9a3805437cb769a45d9d816f6aed30" aria-expanded="true"><div class="accordion-toggle"><span style="">页面顶部进度条</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-af7b9a3805437cb769a45d9d816f6aed30" class="collapse collapse-content"><p></p>

需要将以下代码添加到-开发者设置-自定义CSS
</div>

```css
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
```

需要将以下代码添加到-开发者设置-自定义JS
</div>

```javascript
//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");
```

需要将以下代码添加到-开发者设置-自定义head
</div>

```html
<div id="percentageCounter"></div>
```

### 自定义修改

注意:请备份源代码-该自定义修改会破坏源代码格式！！！
</div>

### 版权美化

需要将以下代码添加到开发者设置-自定义CSS
</div>

```css
/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

background-color: #ABBAC3;

margin-bottom: 3px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 2px 2px 2px 3px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 2px 3px 2px 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}
```

需要将以下代码添加到开发者设置-博客底部信息
</div>

```html
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站版权信息">
<a href="./" title="小旭の破站">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">小旭の破站</span>
</a>
</div>
 
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站ICP备案号">
    <a href="https://beian.miit.gov.cn/" target="_blank" title="渝ICP备19016543号-2" style="pointer;">
   <span class="badge-subject"> 渝ICP备</span><span class="badge-value bg-green">19016543号-2</span>
</a>
</div>
 
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站公安备案号">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50022502000584" title="渝公网安备 50022502000584号" style="pointer;"><span class="badge-subject">渝公网安备</span>
<span class="badge-value bg-green">50022502000584号</span>
</a>
</div>
```

```html
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站主题模板">
<a href="https://www.ihewro.com/">
<span class="badge-subject">Themes</span><span class="badge-value bg-blue">Handsome</span></a>
</div>
 
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站驱动程序">
<a href="https://typecho.org">
<span class="badge-subject">Powered</span><span class="badge-value bg-orange">Typecho</span></a>
</div>
```

**修改**`usr/themes/handsome/component/footer.php`**从117行footer替换到footer**
</div>

```php
<footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
        <span class="pull-right hidden-xs text-ellipsis">
            <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
        </span>
        <span class="text-ellipsis">
            <?php
            $this->options->BottomleftInfo(); ?>
        </span>
    </div>

</footer>
```

### 正文末尾End标识

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f64074a1814b7a30aab96817b6af446a35" aria-expanded="true"><div class="accordion-toggle"><span style="">正文末尾End标识</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f64074a1814b7a30aab96817b6af446a35" class="collapse collapse-content"><p></p>

**修改**`post.phpp`**适当位置添加下述代码**
</div>

```html

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

需要将以下代码添加到开发者设置-自定义CSS
</div>

```
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}
```

### 转载申明

**修改**`post.phpp`**适当位置添加下述代码**
</div>

```html

<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>

```

需要将以下代码添加到开发者设置-自定义CSS
</div>

```css
/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}
```

### 博主文字介绍动态化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f2b4573cade541507132edf90d99d0bc74" aria-expanded="true"><div class="accordion-toggle"><span style="">博主文字介绍动态化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f2b4573cade541507132edf90d99d0bc74" class="collapse collapse-content"><p></p>

将代码里的 `这是我的介绍`文字内容修改成需要展示的文字内容即可，顺便那个❤也是可以改的。 将以下代码放到 `主题后台-外观-设置外观-初级设置-博主的介绍`内即可
</div>

```html
<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>
```

### 首页打字一言

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1944d730df388d6735b412feed730f7049" aria-expanded="true"><div class="accordion-toggle"><span style="">首页打字一言</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1944d730df388d6735b412feed730f7049" class="collapse collapse-content"><p></p>

先调用一下`FontAwesome`图标-添加开发者-自定义head
</div>

```html
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://api.sicx.top/js/typed.min.js" type="text/javascript" charset="utf-8"></script>
```

添加开发者-自定义JS
</div>

```javascript

function typedword() {
    $.ajax({
        type: "get",
        url: "https://api.gumengya.com/get/love/",
        async: true,
        success: function(word) {
            var list = [];
            for (var i = 0; i < word.data.length; i++) {
                list.push(word.data[i]['text']);
            }
            $("#typedWord").typed({
                strings: list,
                typeSpeed: 55,
                loop: true,
                backDelay: 300,
            });
        }
    });
}
$(function() {
    typedword();
});
```

初级设置-首页一行文字介绍
</div>

```html
<p><i style="color:red;" class="fa fa-heart" aria-hidden="true"></i><span id="typedWord"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></span><i style="color:red;" class="fa fa-heart" aria-hidden="true"></i><script>$(function(){typedword();})</script></p>
```

### 博客信息美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7a7bb507868db943c287554392afa00e45" aria-expanded="true"><div class="accordion-toggle"><span style="">博客信息美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7a7bb507868db943c287554392afa00e45" class="collapse collapse-content"><p></p>

添加/usr/themes/handsome/libs/Content.php中，放在class Content的上面
</div>

```php
/*访问总量*/
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;
}

/*全站字数*/
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}

/*在线人数*/
function online_users() {
    $filename='online.txt'; //数据文件
    $cookiename='Nanlon_OnLineCount'; //Cookie名称
    $onlinetime=30; //在线有效时间
    $online=file($filename); 
    $nowtime=$_SERVER['REQUEST_TIME']; 
    $nowonline=array(); 
    foreach($online as $line){ 
        $row=explode('|',$line); 
        $sesstime=trim($row[1]); 
        if(($nowtime - $sesstime)<=$onlinetime){
            $nowonline[$row[0]]=$sesstime;
        } 
    } 
    if(isset($_COOKIE[$cookiename])){
        $uid=$_COOKIE[$cookiename]; 
    }else{
        $vid=0;
        do{
            $vid++; 
            $uid='U'.$vid; 
        }while(array_key_exists($uid,$nowonline)); 
        setcookie($cookiename,$uid); 
    } 
    $nowonline[$uid]=$nowtime;
    $total_online=count($nowonline); 
    if($fp=@fopen($filename,'w')){ 
        if(flock($fp,LOCK_EX)){ 
            rewind($fp); 
            foreach($nowonline as $fuid=>$ftime){ 
                $fline=$fuid.'|'.$ftime."\n"; 
                @fputs($fp,$fline); 
            } 
            flock($fp,LOCK_UN); 
            fclose($fp); 
        } 
    } 
    echo "$total_online"; 
}
```

添加`找到/usr/themes/handsome/component/sidebar.php文件，找到代码`
</div>

```php+HTML
      
         <?php if (@!in_array('info', Utils::checkArray($this->options->sidebarSetting))): ?>
      <section id="blog_info" class="widget widget_categories wrapper-md clear">
       <h5 class="widget-title m-t-none text-md"><?php _me("博客信息") ?></h5>
       <ul class="list-group box-shadow-wrap-normal">
   
           <li class="list-group-item text-second">

<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>  
       </ul>
      </section>
      <?php endif; ?>
         <?php if ($this->options->adContentSidebar != ""): ?>
```

### 随机API头图

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5b0b5e0a9eb5d628f3815a5002899e4448" aria-expanded="true"><div class="accordion-toggle"><span style="">随机API头图</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5b0b5e0a9eb5d628f3815a5002899e4448" class="collapse collapse-content"><p></p>

创建一个`get_img.php`文件,打开`/usr/themes/handsome/libs/content/CommonContent.php`文件找到`whenSwitchHeaderImgSrc`函数附近,注释掉`$randomNum = unserialize(INDEX_IMAGE_ARRAY);`和`$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';`,添加一行`$random = '/code/get_img.php?_='.rand(999, 3000);`

```php
<?php
/*
直接请求将随机跳转到一个图片
*/
$imgArr = [];

//https://www.pexels.com/zh-cn/
$imgArr[0] = [
'list'=>[267371,230477,1115680,838413,235922,1560424,1056251,416160,96938,2194261,
666839,1133957,1269025,1089932,338711,573910,670061,3113124,247431,434090,
1209843,1684187,358312,1536619,96380,164821,373945,1547248,301920,256468,
1653823,59106,556665,461198,376464,321588,3193917,1040157,189349,396547,
3145552,220067,285173,409701,917076,255464,735911,2120016,1162540,],
//'fun'=> function($id){return "https://images.pexels.com/photos/{$id}/pexels-photo-{$id}.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";}
'fun'=> function($id){return "https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images";}
];
//https://i.keaitupian.net/
// $imgArr[1] = [
//     'list'=>[
//         'up/40/c0/7c/ec2caa4f7b67d2b44a95bece4e7cc040.jpg',
//         'up/38/05/17/57ae05cdfe607c1f877a7881ea170538.jpg'
//     ],
//     'fun'=> function($id){return "https://i.keaitupian.net/".$id;}
// ];
function oneImg($id=false){
global $imgArr;
//求图片总数

// echo $count;
//随机选择一个
if($id == false){
    $count = 0;
    foreach($imgArr as $item){
        $count += count($item['list']);
    }
    $id = rand(0, $count - 1);
}
//累积下标
$key = 0;
foreach($imgArr as $item){
    if(isset($item['list'][$id - $key])){
        return $item['fun']($item['list'][$id - $key]);
    }else{
        $key += count($item['list']);
        continue;
    }
}
}

header('Location: '.oneImg(isset($_GET['id'])?$_GET['id']:false));exit;
```

### 栏目列表美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ca634cb8128b4df075fdebb9b4d8c39631" aria-expanded="true"><div class="accordion-toggle"><span style="">栏目列表美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ca634cb8128b4df075fdebb9b4d8c39631" class="collapse collapse-content"><p></p>

修改后的使用前提：文章编辑页面中，文章头图样式选择选择小版式。
</div>

**替换Content.php文件**

```html
<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>
```

```html
<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">
            <img $img class="post-pic lazy">
            </div>
        </a>
    </div>
    <div class="tt-blur-img">
    <img $img class="lazy post-pic border-radius-6">
    </div>
```

**添加CSS**

```css
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;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;}}
```

End

本文标题：关于Hansome主题本站魔改

本文链接：https://sicx.top/01.html

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

Last modification：August 25, 2024

❤如果觉得文章不错的话，可以点个赞~或者请小旭喝杯咖啡嘛~ヾ(◍°∇°◍)ﾉﾞ❤

23 comments

磅豆龙
July 29th, 2024 at 09:26 pm

看着很不错，这是什么评论

Reply
1. 小旭
  July 30th, 2024 at 12:11 am
  
  @磅豆龙
  
  还好吧,很久没更新了
  
  Reply
彼岸花露
April 15th, 2024 at 02:26 pm

ios下冒出灰色与滑动闪烁，触发原因也不太明朗偶尔网站就会蒙上一层类似这种（Safari浏览器白色背景下会蒙上一层灰色）https://www.alipan.com/s/CqwWj9Q2wvi 然后网站滑动过程中就会闪烁（补个博主博客视频）
https://www.alipan.com/s/8tRiFdZDrmB

Reply
1. 小旭
  April 15th, 2024 at 02:59 pm
  
  @彼岸花露
  
  可以试试深色模式看看会不会触发这个闪屏问题~
  
  Reply
  1. 小旭
    April 18th, 2024 at 01:16 am
    
    @小旭
    
    目前已经修复好了,你可以重新试试看OωO
    
    Reply
彼岸花露
April 15th, 2024 at 02:17 pm

hello博主，最近发现一个问题经过美化后的网站在ios下会产生闪屏的问题（链接为博主站在iphone14下的闪屏问题演示，绿色为浏览器背景在Safari浏览器同样会出现且更明显，ipad与安卓暂时并为发现此问题）视频演示：https://www.alipan.com/s/qvG9zEjxe8z 奈何本人能力有限能请博主看看问题出现原因吗

Reply
1. 彼岸花露
  April 15th, 2024 at 02:30 pm
  
  @彼岸花露
  
  作为iPhone用户手机访问就有点催残不知道啥时候看着看着就狂闪眼睛受不了
  
  Reply
  1. 小旭
    April 15th, 2024 at 02:56 pm
    
    @彼岸花露
    
    本人iPhone11未发现该问题,电脑也没出现该问题~OωO
    你试试我的图床网站https://www.imgxu.cn/ 刷新会不会出现该问题呢？
    
    Reply
    
    彼岸花露
    April 15th, 2024 at 03:35 pm
    
    @小旭
    
    图床正常其他网页也正常博客不正常博主博客也不正常过来评论也出现了几次，不知道是不是较新款iPhone有什么东西改了吧
    
    Reply
    
    彼岸花露
    April 15th, 2024 at 03:32 pm
    
    @小旭
    
    电脑和安卓是不会出现。ipad也不会出现此问题只在iPhone上出现且较频繁但是也不知道怎么触发的
    
    Reply
    
    小旭
    April 15th, 2024 at 04:11 pm
    
    @彼岸花露
    
    我测试没啥问题,不太清楚了QAQ
    
    Reply
安心
March 10th, 2024 at 03:05 pm

大佬，首页打字一言调用FontAwesome图标和typed扩展代码是放在哪？
我放在自定义输出head 头部的HTML代码里他有爱心，不打字一直转圈
求指教

Reply
1. 小旭
  March 10th, 2024 at 03:15 pm
  
  @安心
  
  用的什么主题？OωO
  
  Reply
  1. 安心
    March 10th, 2024 at 03:33 pm
    
    @小旭
    
    跟你用的同款Handsome
    
    Reply
    
    小旭
    March 10th, 2024 at 03:56 pm
    
    @安心
    
    那就是大概api接口问题，回去我看看我现在在外面不太方便处理OωO
    
    Reply
    
    安心
    March 10th, 2024 at 03:58 pm
    
    @小旭
    
    好的感谢大佬OωO
    
    Reply
    
    小旭
    March 10th, 2024 at 05:25 pm
    
    @安心
    
    方便发一下你的网站嘛？
    
    Reply
    
    安心
    March 10th, 2024 at 05:46 pm
    
    @小旭
    
    http://blog.c0p.cn/
    
    Reply
小旭 1
February 28th, 2024 at 09:32 pm

默认不会,除非瞎改代码

Reply
X.的笔记
November 18th, 2023 at 07:43 pm

该评论仅登录用户及评论双方可见

Reply
湫
October 4th, 2023 at 06:58 pm

Reply
许七安
July 18th, 2023 at 12:05 am

你好

Reply
1. 听风
  October 1st, 2023 at 12:02 pm
  
  @许七安
  
  你好
  
  Reply

关于Hansome主题本站魔改

小旭 • 2021 年 08 月 30 日

## 前言

这篇文章作为对 `Handsome 9.2.1 Pro`美化记录，有新增时会实时更新。
</div>

本文内容部分来源于网络，如有侵权请留言删除！
</div>

## 美化日志

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS
</div>

### 自定义CSS

### 文章标题居中

### 全站页面纯白

### 局部阴影

### 修改字体

### 标签/博客信息背景颜色

```css
.badge {
    background-color: rgb(0, 0, 0)!important;
}
.post-tags a {
    background-color: #000000;  
}
```

### LOGO扫光

### 滚动条效果

### 自定义JavaScript

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义Javascript
</div>

### 左侧彩色图标&右侧彩色标签云

需要将以下代码添加到PJAX->PJAX回调函数中
</div>

### 页面顶部进度条

需要将以下代码添加到-开发者设置-自定义CSS
</div>

```css
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
```

需要将以下代码添加到-开发者设置-自定义JS
</div>

需要将以下代码添加到-开发者设置-自定义head
</div>

```html
<div id="percentageCounter"></div>
```

### 自定义修改

注意:请备份源代码-该自定义修改会破坏源代码格式！！！
</div>

### 版权美化

需要将以下代码添加到开发者设置-自定义CSS
</div>

```css
/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

background-color: #ABBAC3;

margin-bottom: 3px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 2px 2px 2px 3px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 2px 3px 2px 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

需要将以下代码添加到开发者设置-博客底部信息
</div>

**修改**`usr/themes/handsome/component/footer.php`**从117行footer替换到footer**
</div>

</footer>
```

### 正文末尾End标识

**修改**`post.phpp`**适当位置添加下述代码**
</div>

```html

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

需要将以下代码添加到开发者设置-自定义CSS
</div>

### 转载申明

**修改**`post.phpp`**适当位置添加下述代码**
</div>

```

需要将以下代码添加到开发者设置-自定义CSS
</div>

### 博主文字介绍动态化

### 首页打字一言

先调用一下`FontAwesome`图标-添加开发者-自定义head
</div>

添加开发者-自定义JS
</div>

初级设置-首页一行文字介绍
</div>

### 博客信息美化

添加/usr/themes/handsome/libs/Content.php中，放在class Content的上面
</div>

添加`找到/usr/themes/handsome/component/sidebar.php文件，找到代码`
</div>

### 随机API头图

```php
<?php
/*
直接请求将随机跳转到一个图片
*/
$imgArr = [];

header('Location: '.oneImg(isset($_GET['id'])?$_GET['id']:false));exit;
```

### 栏目列表美化

修改后的使用前提：文章编辑页面中，文章头图样式选择选择小版式。
</div>

**替换Content.php文件**

**添加CSS**

关于Hansome主题本站魔改

23 comments

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

关于Hansome主题本站魔改

欢迎使用 Typecho

NSFW-API开源的图片鉴黄API

修复自建时光机微信公众号发送失败

Pve+爱快(iKuai)+OpenWrt(旁路由) 双软路由配置教程

Logo文字图标

修复自建时光机微信公众号发送失败

[摄影记录]

宝塔设置cf2dns自选IP

CentOS安装IPtables

关于Hansome主题本站魔改

23 comments

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

关于Hansome主题本站魔改

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款