handsome主题美化优化整合

博主：站长
发布时间：2025 年 01 月 09 日
750 次浏览
9 条评论
38088字数

> · 当前位置 : 首页 >> 默认分类 >> 《 handsome主题美化优化整合》的正文

> # 说明：
>
> 本文使用的Typecho版本为1.2.1版本主题版本为：handsome 9.2.1 Pro，使用的PHP7.4，Mysql5.7.44

# 主题基础美化

文章收集至：[https://www.5k5b.com/archives/5.html](https://www.5k5b.com/archives/5.html)

# 基础设置

### 开启全站HTTPS

```
1、首先在宝塔或通过配置文件给你的网站配置好证书，并开启强制HTTPS
2、去网站后台，找到设置 -> 基本设置 -> 站点地址将其改为https开头的网址。
```

### 添加GZIP压缩

这个主要是减小带宽压力，以达到加快网站加速速度的目的。
和上面的HTTPS一样，在**config.inc.php**内加入以下配置即可：

```
/** 开启gzip压缩 */
ob_start('ob_gzhandler');
```

### 去掉地址栏的index.php

首先进入后台，找到 **设置 - 永久链接**，是否使用地址重写功能：启用，自定义文章路径：选择：wordpress风格 /archives/{slug}.html

更改前是这样的：[https://lqza.cn/index.php/archives/hanbl.html](https://lqza.cn/index.php/archives/hanbl.html)

更改后是这样的：[https://lqza.cn/archives/hanbl.html](https://lqza.cn/archives/hanbl.html)

### 使Typecho支持emoji

```
alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;
```

执行上述 **sql**语句来修改表的编码，如果用的是宝塔面板和 MySQL数据库，一般有可视化的 phpmyadmin界面，可以在 phpmyadmin的控制台里面执行上面的语句。

最后将 Typecho 目录下的 config.inc.php 配置文件中数据库定义参数中的 charset 为 utf8mb4：

```
$db->addServer(array (
      'host'      =>  localhost, 
      'user'      =>  'root',
      'password'  =>  'root',
      'charset'   =>  'utf8mb4', //修改这一行
      'port'      =>  3306,
      'database'  =>  ''
  ), Typecho_Db::READ | Typecho_Db::WRITE);
```

### 添加左侧导航

以下代码放在 后台-外观设置-高级设置-左侧边栏导航内容请自行更改

```
{"name":"名称","class":"图标","link":"链接位置","target":"_blank"}
{"name":"名称","class":"图标","link":"链接位置","target":"_blank"}
```

### 自定义音乐播放器音量

后台-设置外观-开发者设置-自定义JS 添加以下代码

```
setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);
```

其中 volume=0.3为播放器音量控制，默认为 0.3支持修改范围为 0.0 - 1可自行设置

# 自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内
</div>

### 文章标题居中

```
/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
  text-align:center !important;
}
```

### 首页标题文字居中

```
/*首页标题文字居中*/ .m-t-none.text-ellipsis.index-post-title.text-title { text-align:center !important; }
```

### 左上角博客LOGO/博客名称的扫光效果

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

### 左上角博主信息羽毛背景

background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）

```
/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}
```

[羽毛](https://lqza.cn/img/yumao.webp)

### 鼠标路过头像时放大并旋转

```
/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

### 首页文章图片获取焦点放大

```
/* 首页文章图片获取焦点放大 */
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}
```

### 时光机内圆形头像

顾名思义，就是将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)

```
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
```

### 网站右侧滚动条样式

此处的#949494;即为滚动条的颜色，你可以去 [http://tools.jb51.net/static/colorpicker/](https://www.5k5b.com/go/aHR0cDovL3Rvb2xzLmpiNTEubmV0L3N0YXRpYy9jb2xvcnBpY2tlci8) 这个链接去找到你喜欢的颜色然后替换
注意：替换的是#后面的6位数字，#不要动\~

```
/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #949494;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,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
}
```

#### 文章版式阴影化

可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。
所有rgba后面的，如26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。
你同样可以去 [http://tools.jb51.net/static/colorpicker/](https://www.5k5b.com/go/aHR0cDovL3Rvb2xzLmpiNTEubmV0L3N0YXRpYy9jb2xvcnBpY2tlci8) 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~

```
/* 首页文章版式阴影颜色 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}
```

### 右侧列表导航栏图标颜色

这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。
同样#后面的六位数字代表颜色，可以改\~

```
/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
```

### 等距标签云

```
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
```

### 首页文章列表悬停上浮

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

### 赞赏按钮跳动

```
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
from {
transform: scale(1);
}

to {
    transform: scale(1.1);
}
}
```

### 评论边框

```
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
```

### 粗斜体上色

```
/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}
```

### 开启全站变灰（黑白模式）

```

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}

```

### 首页文章添加圆角效果

```
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}
```

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

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

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

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

# 自定义JavaScripts

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

### 复制成功提示

使用方法：
复制下面代码到 **handsome主题>设置外观>开发者设置>自定义 JavaScript**

```
/* 复制成功提示代码开始 */ 
    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>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}}
/* 复制成功提示代码结束 */
```

### 复制文章带有文章版权

使用方法：
复制下面代码到 **handsome主题>设置外观>开发者设置>自定义 JavaScript**

```
/* 复制文章自动带版权开始 */ 
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
     notie({
  type: 'info',
  text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。', 
  autoHide: true
})
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
 
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！<br>'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>'
            + '作者：陌独<br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：https://lqza.cn/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：陌独\n'
            + '链接：' + window.location.href + '\n'
            + '来源：https://lqza.cn/\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
/* 复制文章自动带版权结束 */
```

### 鼠标点击特效-爱心样式

```
//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
```

### 网站加载完成提示

```
/* 网站加载完成提示开始 */ 
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
/* 网站加载完成提示结束 */
```

### 左侧图标颜色和彩色标签云

```
//左侧图标多彩
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','');
});
```

如果你博客开启了PJAX，需要在 **PJAX回调函数**里面添加以下代码：

### 打字动画效果（代码实现）

```
/* 打字动效 */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
```

### 添加复制弹窗

```

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

然后将以下代码加到 **自定义JavaScripts**，文字部分可以自行更改

```
/* 复制效果 */
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};
```

# 自定义body

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处
</div>

### 万能的控制台

```

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

### 自定义右键菜单美化

注意：一定首先在 **主题后台-外观-设置外观-开发者设置-自定义输出head** 头部的HTML代码位置添加以下代码。如果不添加将不会显

```

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

加完之后再将下面的代码放到 **自定义输出body** 尾部的HTML代码处
另外，一定要把代码里的网址改成自己的！！\~

```

  <style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="放你网站的对应网址"><i class="fa fa-home"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh"></i><span>重载网页</span></a></li>
        <li><a href="放你网站的对应网址"><i class="fa fa-meh-o"></i><span>和我当邻居</span></a></li>  
        <li><a href="放你网站的对应网址"><i class="fa fa-pencil-square-o"></i><span>给我留言吧</span></a></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);
   
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
    </script>

```

### 防止他人F12抓你代码

首先要说，这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的(就不告诉你)。
提示内容可以自行修改哦

```

<script type="text/javascript">
    $(document).ready(function () {
      document.oncontextmenu = function () {
        return false;
      }
      //document.onselectstart = function () {
       // return false;
     // }
      //document.oncopy = function () {
        //return false;
     // }
      document.onkeydown = function () {
        //f12
        if (window.event && window.event.keyCode == 123) {
          event.keyCode = 0;
          event.returnValue = false;
          layer.msg("球球了，别再扒孩子了=.=")
          return false;
        }
        //ctrl+u
        if (event.ctrlKey && window.event.keyCode == 85) {
          return false;
        }
        //ctrl+shift+i
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
          return false;
        }
        // Ctrl+S
        else if ((event.ctrlKey) && (event.keyCode == 83)) {
          return false;
        }
      };

});
  </script>
<script>
    //debug调试时跳转页面
    var element = new Image();
    Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.5k5b.com"}});
    console.log(element);
</script>
```

### 顶部导航栏添加网页动态滚动进度条|滚动指示器

使用方法
将以下代码加到 **后台设置->自定义输出head 头部的HTML代码**

```

<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;margin-top: 0px;background-color: #6B999B;width: 0%;"></div>
<script type="text/javascript">
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), //滚动条的位置
                docHeight = $(document).height(),   //文档高度
                winHeight = $(window).height(); //窗口高度
 
        var scrolled = (winTop / (docHeight - winHeight))*100;
 
        $('.scroll-line').css('width', (scrolled + '%'));
    });
</script>
```

需要注意的是，需要关闭后台的 **固定头部**和 **固定导航**，效果最佳，不然可能会看不到效果。

# 修改文件

这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\~
</div>

这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\~
</div>

这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\~
</div>

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

将代码里的这是我的介绍这一部分修改称自己想要展示的内容即可，顺便那个❤也是可以改的，随你开心就是了
将以下代码放到 **主题后台-外观-设置外观-初级设置-博主的介绍**内即可
放之前记得先清空 **博主的介绍**栏内的所有内容

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

### 给正文添加结束标识

效果就是像本博客的每篇博文正文下面有一个好看的END标识。

首先打开 网站根目录 `/usr/themes/handsome的post.php`文件
找到 `<?php if ($this->options->adContentPost != ""): ?>`（或者Ctrl+F搜索）这行代码，在其上方的空白位置添加以下代码

```

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

```

并在改好保存后，在 `自定义CSS`处添加以下代码

```
/*文章正文下的结束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;}
```

这个代码同样也是在 `<?php if ($this->options->adContentPost != ""): ?>`的上方
添加位置和上面正文结束功能的添加位置相同找到后添加以下代码(你也可以添加到其他你认为合适的地方)

```html

<div
    style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
    <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>
</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;}
```

### 右侧添加人生倒计时(岁月不待人)

首先找到网站根目录 `/usr/themes/handsome/component`
打开 `sidebar.php`文件，找到 ``这一行内容。
在该内容向上两行找到 `<?php endif; ?>`，在该行紧接着下面添加如下代码：

```html

<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none text-md">
        <?php _me("岁月不待人") ?>
    </h5>
    <div class="sidebar sidebar-count">
        <div class="content">
            <div class="item" id="dayProgress">
                <div class="title">今日已经过去<span></span>小时</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-1"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="weekProgress">
                <div class="title">这周已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-2"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="monthProgress">
                <div class="title">本月已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-3"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="yearProgress">
                <div class="title">今年已经过去<span></span>个月</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-4"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
        </div>
    </div>
</section>

```

改好后保存退出，进入网站根目录 `/usr/themes/handsome/assets/js/`的文件夹
创建一个名为 `timeinfo.js`的文件，并将以下代码放进该文件后，保存并退出

```
function init_life_time() {
function getAsideLifeTime() {
    /* 当前时间戳 */
    let nowDate = +new Date();
    /* 今天开始时间戳 */
    let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
    /* 今天已经过去的时间 */
    let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
    /* 今天已经过去的时间比 */
    let todayPassHoursPercent = (todayPassHours / 24) * 100;
    $('#dayProgress .title span').html(parseInt(todayPassHours));
    $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
    $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
    /* 当前周几 */
    let weeks = {
        0: 7,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6
        };
    let weekDay = weeks[new Date().getDay()];
    let weekDayPassPercent = (weekDay / 7) * 100;
    $('#weekProgress .title span').html(weekDay);
    $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
    $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
    let year = new Date().getFullYear();
    let date = new Date().getDate();
    let month = new Date().getMonth() + 1;
    let monthAll = new Date(year, month, 0).getDate();
    let monthPassPercent = (date / monthAll) * 100;
    $('#monthProgress .title span').html(date);
    $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
    $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
    let yearPass = (month / 12) * 100;
    $('#yearProgress .title span').html(month);
    $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
    $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
    }
    getAsideLifeTime();
    setInterval(() => {
        getAsideLifeTime();
    }, 1000);
    }
    init_life_time()
```

以下代码放在 `后台-外观设置-开发者设置-自定义CSS`

```
/* 时间流逝 */
.sidebar-count .content {
    padding: 15px
}
 
.sidebar-count .content .item {
    margin-bottom: 15px
}
 
.sidebar-count .content .item:last-child {
    margin-bottom: 0
}
 
.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}
```

最后一步,将以下代码放在 `后台-外观设置-开发者设置-自定义输出body尾部`

```
  
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
```

步骤均完成后，即可去查看效果了\~

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

修改 `usr/themes/handsome/component/say.php`文件，将以下代码注释掉

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

### 信息统计增加全站字数、在线人数、响应耗时和访客总数

首先将以下代码加到 `/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;
    }
        /**
     * 全站字数
     */
    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`文件内，找到合适和位置添加以下代码： 注：``处就是添加代码的地方，（在这些同样代码的中间回车出一行再插入，不要放在最后或者最前面不然会报错）

```
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<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>
```

### 底部版权美化

左侧底部放在 `后台-开发者设置-博客底部左侧信息`

```

<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://lqza.cn" target="_blank">
        <span class="badge-value bg-blue">©2024 Modu</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">桂ICP备</span>
    <a href="http://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2024034040号</span></a>
</div>
|  

<div class="github-badge">
<span class="badge-subject">运行时间</span>
<span class="badge-value bg-green"><span id="span_dt_dt"></span></span>
<script>
    /*建站时间*/
    function show_date_time() {
        window.setTimeout("show_date_time()", 1e3);
        var BirthDay = new Date("2024/12/8 1:30:00"),
        today = new Date,
        timeold = today.getTime() - BirthDay.getTime(),
        msPerDay = 864e5,
        e_daysold = timeold / msPerDay,
        daysold = Math.floor(e_daysold),
        e_hrsold = 24 * (e_daysold - daysold),
        hrsold = Math.floor(e_hrsold),
        e_minsold = 60 * (e_hrsold - hrsold),
        minsold = Math.floor(60 * (e_hrsold - hrsold)),
        seconds = Math.floor(60 * (e_minsold - minsold));
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
    }
    show_date_time();
</script>
```

右侧底部放在 `后台-开发者设置-博客底部右侧信息`

```

<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://www.huaweicloud.com/" target="_blank">
        <span class="badge-value bg-blue">华为云云服务</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://www.ihewro.com/" target="_blank">
        <span class="badge-value bg-orange">Handsome</span></a>
</div>
```

css放在 `主题设置-自定义css`内

```
/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

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

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

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-green {
  background-color: #3bca6e
}
```

把下面代码放在主题目录 `usr/themes/handsome/component/footer.php`内大概在 `177`行，覆盖原来的即可

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

### 添加网站加载效果

首先找到 `/usr/themes/handsome/component/`文件夹内的 `header.php`，将以下代码加到最后 `</style>`之后

```

<style>
    #PageLoading {
        background-color: #fff;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }

#PageLoading-center {
        width: 100%;
        height: 100%;
        position: relative;
    }

#PageLoading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;
    }

.object2 {
        -moz-border-radius: 50% 50% 50% 50%;
        -webkit-border-radius: 50% 50% 50% 50%;
        border-radius: 50% 50% 50% 50%;
        position: absolute;
        border-left: 5px solid #FFB6C1;
        border-right: 5px solid #b6def7;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        -webkit-animation: animate 2s infinite;
        animation: animate 2s infinite;

}

#object_one {
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
    }

#object_two {
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

#object_three {
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

#object_four {
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

@-webkit-keyframes animate {
        50% {
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

100% {
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

@keyframes animate {
        50% {
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

100% {
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }
</style>

<body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>
```

加好后刷新博客会出现一直卡在加载页面的问题，我们再将以下代码放到 `自定义JavaScripts`里面

```
/* 加载动画 */
$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

### 添加一键打卡功能

该功能在每篇博文的评论框底部
首先找到 `/usr/themes/handsome/component/comments.php`
将如下代码(可以直接搜 `<div class="comment-form-comment form-group">`)

更改为：

```
            <div class="comment-form-comment form-group">
                <label for="comment"><?php _me("评论") ?>
                    <span class="required text-danger">*</span></label>
                    <span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
                <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                <div class="OwO" style="display: inline;"></div>
                <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
                <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
                <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                <div class="secret_comment" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                    <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                    <div class="secret_comment_check">
                        <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                            <input type="checkbox" id="secret_comment_checkbox">
                            <i></i>
                        </label>
                    </div>
                </div>
            </div>
```

接着去 `自定义JavaScript`加入如下代码

```

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 文章写得不错，给你点个赞，继续加油哈！")
    },
    cai: function() {
        a(c, "骚年，我怀疑你写了一篇假的文章！")
    }
};
```

在 `自定义CSS`处添加

```
/*评论一键打卡、赞、踩 */
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}
```

### 小版图模式下列表美化(小图斜切效果)

这个项目就是将博客首页的小图模式下的栏目做一个斜切效果，具体可以看我博客首页的效果。
或者新建一个 `.html`文件，添加如下代码来预览效果

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
.li-box{position:relative;z-index:1;display:flex;overflow:hidden;margin-top:50px;margin-right:auto;margin-left:auto;width:800px;background-color:#333;color:#fff}
.left-img{z-index:1;display:flex;margin:0;width:30%;height:190px;-webkit-clip-path:polygon(0 0,95% 0,100% 100%,0 100%);clip-path:polygon(0 0,95% 0,100% 100%,0 100%)}
.left-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:14.5rem;background-position:center;background-size:cover;transform:scale(1.2);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.875rem) brightness(.8);filter:blur(1.875rem) brightness(.8)}
.right-cont{z-index:1;display:flex;width:70%;text-shadow:0 .1875rem .3125rem rgb(0 0 0 / 30%);letter-spacing:.06rem;flex-direction:column;justify-content:space-between}
.right-cont a{color:inherit;text-decoration:none}
    </style>
  </head>
  <body>
    <div class="li-box">
      <a class="left-img" href="#"><img src="https://img01.sogoucdn.com/app/a/200692/300_300_feedback_25fb6bfdbfe64e07bffb0ac725f9cb7b.jpg"/></a>
      <div class="blur-img" style="background-image: url(https://img01.sogoucdn.com/app/a/200692/300_300_feedback_e308749875fa4b3bafc959762bacbc8b.jpg);"></div>
      <div class="right-cont">
        <a class="cont-title" href="#">Cesium - 开源好用的图片压缩软件</a>
        <a class="cont-des">Cesium能将您的图片压缩高达90％，而不会出现明显的质量损失。你可以使用此软件将诸如JPG，JPEG，PNG，BMP或WMF等图片格式，压缩保存为JPG，PNG或BMP。</a>
        <div class="cont-info"><a href="#">其它信息</a></div>
      </div>
    </div>
  </body>
</html>
```

注意该效果仅仅在小版图的模式下才有效果\~
首先我们找到网站根目录 `/usr/themes/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>
```

替换为

```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" {$backgroundImageHtml}></div>
    </a>
</div>
<div class="tt-blur-img" {$backgroundImageHtml}></div>
```

并在 `自定义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;}}
```

### 在博客顶部添加心知天气

首先去[心知天气](https://www.5k5b.com/go/aHR0cHM6Ly93d3cuc2VuaXZlcnNlLmNvbS8)官网注册账号并申请API
之后在 `/usr/themes/handsome/component/headnav.php`文件中的动态日历中 `<?php endif;?>`下方添加以下代码
注意将API信息改成自己的

```

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

```

### 404页面添加自动返回首页功能

找到 `/usr/themes/handsome`文件夹内的 `404.php`文件并打开。
在 `h1 class="text-shadow text-white">404`这一行下面加入以下代码：

```
<br>
<small class="text-muted letterspacing">
<b id="sp">2</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>
```

再把下面的代码加入 `404.php`文件内最底下的 `</body>`前面

```
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=2;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>
```

### 文章底部添加标签

在主题目录下的 `/usr/themes/handsome/post.php`文件中的适当地方加入以下代码。

```

标签：<?php $this->tags('，', true, 'no tag'); ?>
```

### 在文章顶部添加百度是否收录

使用方法
在 `handsome/functions.php`最底部添加代码

```
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1){
    echo "百度已收录";
}
else{
    echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
        return 1;
    } else {
        return -1;
    }
} 
```

然后在 `handsome/post.php`在63行左右添加代码

```

<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>
```

### 一言打字特效

第一步
先把这两个js放到：`设置外观–开发者设置–自定义输出head头部的HTML代码`

```
<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js"></script> <script src="https://i.gordsky.cn/assets/weiyu/typed.min.js"></script>
```

第二步
把下面的js代码。复制到：`设置外观–开发者设置–自定义JavaScript`

```
function typedword(){ $.ajax({ type:"get", url:"https://api.gordsky.cn/Love/", data:{type:'json10'}, async:true, success:function(word){ var list = []; for(var i = 0 ;i < word.length ; i++){ list.push(word[i]['word']); } $("#word").typed({ strings: list, typeSpeed: 20, loop: true, backDelay: 3000, }); } }); }
```

第三步
把下面的html代码复制到：`设置外观–初级设置–首页一行文字介绍`

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

### 全站友链显示图片

打开/usr/themes/handsome/component/aside.php文件，大概在210左右，把这一段替换为以下代码

```

                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" /><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
                </ul>
              </li>
```

### 右侧添加“全屏显示按钮”

打开/usr/themes/handsome/component/fotter.php文件，找到“返回顶部”这段代码 大概在96行左右，在下方开始添加

```
<div class="f10 panel panel-default" style="position:fixed;top:450px;right:-240px;z-index:99;width:240px;-webkit-transition:all .2s;transition:all .2s;">
    <button id="f10" class="fix-padding btn btn-default rightSettingBtn  pos-abt 
          border-radius-half-left"
            data-toggle="tooltip" data-placement="left" data-original-title="<?php _me("全屏切换") ?>" style="top:44px;border:none;box-shadow:-3px 0 2px 0 rgba(0,0,0,.02);background:rgba(255,255,255,.3) !important;color:#840606 !important;border-top-right-radius:0;border-bottom-right-radius:0;left:-43px;padding:10px 15px;position:absolute;">
        <span class="icon1"  id = "span1" style="display:;margin-left:1px;">
            <i width="13px" height="13px" data-feather="maximize"></i>
        </span>
        <span class="icon2" id="span2" style="display:none;">
            <i width="13px" height="13px" data-feather="minimize"></i>
        </span>
                      
    </button>
    <style>
/*        .btn-default {*/
            /*所有按钮颜色*/
/*  color: #840606 !important*/
/*}*/
/*    </style>*/
    <script>
  
    var button = document.getElementById('f10');
    var myspan1 =document.getElementById('span1');
    var myspan2 = document.getElementById('span2');
    button.onclick = function(){
    document.fullscreen ? closeMyFullScreen() : myFullScreen();
    if(document.fullscreen )
    {
        // var name= document.getElementById('name');
        // name.style.cssText = "border: 1px solid #95FF00;padding: 3px;"
         myspan2.style.cssText="display:none;"
         myspan1.style.cssText="display:;"
    } else 
    {
         myspan1.style.cssText="display:none;"
         myspan2.style.cssText="display:;"
    }
};
// 全屏
function myFullScreen() {
    var docElm = document.documentElement;
    //W3C 
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox 
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等 
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11 
    else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}
 // 退出全屏
function closeMyFullScreen() {
 
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}
    </script>
</div>
```

### 时光机去除蒙层

把以下代码添加到 `自定义JavaScript代码`内

```
/* 时光机去蒙版 */
try{
document.getElementsByClassName("wrapper-lg bg-white-opacity")[0].classList.remove("bg-white-opacity");
}catch(err){}
```

---

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

END

本文作者：站长文章标题：handsome主题美化优化整合
本文地址：https://lqza.cn/archives/hanbl.html
版权说明：若无注明，本文由Mo陌独博客原创，转载请保留文章出处。

最后修改：2025 年 04 月 10 日

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

私密评论

名称 *

🎲

邮箱 *

地址

9 条评论

1111
March 27th, 2025 at 09:58 am

学习一下大佬

回复
zhpddhvydl
March 7th, 2025 at 12:44 am

这篇文章不错！

回复
vejxedskor
March 2nd, 2025 at 05:15 pm

文章结构紧凑，层次分明，逻辑严密，让人一读即懂。

回复
matopxozap
February 28th, 2025 at 10:20 pm

情感浓度过高可适当留白，以达平衡。

回复
zxobbgsehv
February 28th, 2025 at 04:39 pm

案例丰富且贴合主题，论证逻辑环环相扣。

回复
boychai
February 27th, 2025 at 09:56 pm

这么多，tql

回复
时间的距离
February 17th, 2025 at 04:39 pm

大佬，请问一下，导航栏的申请友链怎么改的？谢谢

回复
竹梢
February 1st, 2025 at 11:15 pm

感谢教程

回复
是是是
January 13th, 2025 at 10:10 pm

kskkkwjwjnw快睡觉觉什么

回复

handsome主题美化优化整合

站长 • 2025 年 01 月 09 日