Handsome 主题大升级：原版基础上的惊艳修改与网站风格完美适配全记录（总）

component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头，没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增，第三方评论
css/        博客CSS，一般不要改
fonts/      博客字体，一般不要改
img/        图像，一般不要改
js/         js文件，一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件？
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色

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

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

更改前是这样的：https://blog.demius.tech/index.php/archives/368.html 更改后是这样的：https://blog.demius.tech/archives/368.html

首先进入后台，找到 设置 - 永久链接，改成如下图所示:

然后我们需要配置伪静态规则 如果使用的面板，就在 网站-设置-伪静态-选择Typecho-保存即可

1、将 Typecho程序根目录中的后台文件夹 “admin"改名，名字即为你想自定义的地址名，例如：将 “admin"改为 “xxx” 2、修改根目录文件 “config.inc.php”，打开该文件后找到：

/* 后台路径(相对路径) /
define(' **TYPECHO_ADMIN_DIR** ', '/admin/');

使用方法 首先先创建一个独立页面，名称随意，将以下代码放在独立页面内：

<img src="https://api.4rz.cn/zbPhoto.jpg" />

在我给大家增加一个接口，二选一 感觉哪个速度快就用哪个：

<img src="http://api.03c3.cn/zb" />

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

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

图标选择：Glyphicons字体图标，feather图标

在外观设置——高级设置——首页轮播图中可以配置首页的轮播图

格式：

{"title":"第一篇文章","link":"","cover":"","desc":""},
{"title":"第一篇文章","link":"","cover":"","desc":""}

示例：

{"title":"handsome主题基于原版修改项，美化适配网站风格记录","link":"https://blog.demius.tech/archives/368.html", "cover":"https://tc.demius.tech/i/2024/09/11/66e0fdff49f74.webp","desc":"在复杂中，保持简洁。 一款精心打磨后的typecho主题。"},
{"title":"typecho的插件推荐，持续更新...","link":"https://blog.demius.tech/archives/453.html","cover":"https://tc.demius.tech/i/2024/09/11/66e0fe0eba820.webp","desc":"拒绝信息化的算法推送"}

属性介绍：

• title: 文章标题
• link: 文章的地址
• cover: 文章图片地址，比例建议8：3，不要太小，否则显示的不清楚
• desc: 简单描述（不要太长）

最后一个 }后面不要加上英文逗号

默认已经填入了配置，书写规则和上面基本类似：

• name：代表显示按钮的名称
• class：表示按钮的网页图标的样式
• link：代表按钮的链接
• status：当 status值为 single时，特指页面中的绿色文字按钮，此时无需填写 class项。

{"name":"twitter","class":"fa fa-twitter","link":"#"},
{"name":"facebook","class":"fa fa-facebook","link":"#"},
{"name":"googlepluse","class":"fa fa-google-plus","link":"#"},
{"name":"github","status":"single","link":"#"}

简单配置，只需要修改”value”和”link”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

默认已经填写email、QQ、微博以及网易云音乐的配置：

• name：代表显示栏目的名称
• img：表示该联系方式的图标（图片格式）
• link：代表联系方式的地址

{"name":"email","img":"图片地址","value":"ihewro@163.com","link":"#"},
{"name":"QQ","img":"图片地址","value":"535425690","link":"#"},
{"name":"微博","img":"图片地址","value":"昵称","link":"地址"},
{"name":"网易云音乐","img":"图片地址","value":"昵称","link":"地址"}

简单配置，只需要修改”value”和”link”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

在独立页面上放置一个单独的网页页面 使用方法 在文章中添加代码即可，将链接地址修改为你需要展示的网站地址

<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>

使用方法 将以下代码按照需求自行修改后放到主题 后台-时光机配置-RSS动态内容配置内即可

{"id":"iciba","name":"每日一句","url":"https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"},
{"id":"oschina","name":"开源中国","url":"https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news"},
{"id":"bing","name":"Bing 壁纸","url":"https://proxy.attainment.cn/https://rss.attainment.cn/bing"},
{"id":"sspai","name":"少数派","url":"https://proxy.attainment.cn/https://sspai.com/feed"},
{"id":"DailyArt","name":"每日艺术","url":"https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"}

打开后台-更改外观-设置外观-初级设置-复制代码粘贴至 博主的介绍即可

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

将页面扩大化了，看原版：

修改后：

代码：

/*两侧框架留白间距*/
@media (min-width:1700px) {
    .app.container {
        width: 95%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 95%
    }
}

@media (min-width:2048px) {
    .app.container {
        width: 93%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 93%
    }
}

@media (min-width:1200px) {
    .app.container {
        width: 90%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 90%
    }

    .app.container .app-footer-fixed {
        max-width: 970px
    }

    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px
    }

    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 90%
    }
}

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

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

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

/* 鼠标经过头像旋转放大 */
.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;
    }
}

.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}

.img-full: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;
    }
}

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

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

to {
    box-shadow: 0 0 16px #f00;
    }
}

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

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

此处的 #949494;即为滚动条的颜色，你可以去 http://tools.jb51.net/static/colorpicker/ 这个链接去找到你喜欢的颜色然后替换 注意：替换的是 #后面的 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
}

/* 首页文章图片获取焦点放大 */
.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);
}

.index-post-img {
 overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

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

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

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

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异次元鼠标经过文章Banner效果</title>
</head>
<style>
.entry-banner {background: #f4f4f4;width: 680px;height: 130px;clear: both;position: relative;display: block;border-radius: 8px;overflow: hidden}
.entry-banner a {border-radius: 8px;display: inline-block;width: 681px;height: 130px}
.entry-banner a img {-webkit-transition: all .2s;-moz-transition: all .2s;-ms-transition: all .2s;transition: all .2s}
.entry-banner a:before {position: absolute;top: 0;left: 0;z-index: 2;visibility: hidden;border-radius: 8px;width: 100%;height: 100%;background: #026dd4;content: '';opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:after {position: absolute;top: 0;left: 0;z-index: 5;margin-top: 0;visibility: hidden;content: "";background-image: url(https://s2.ax1x.com/2019/06/11/VcwS8f.png);background-repeat: no-repeat;background-size: 101px 63px;background-position: center center;height: 130px;width: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:hover:before {visibility: visible;opacity: .75;-ms-filter: "alpha(opacity=75)"}
.entry-banner a:hover:after {visibility: visible;opacity: 1;-ms-filter: "alpha(opacity=100)"}
.entry-banner a:hover img {-webkit-transform: scale(1.08);-moz-transform: scale(1.08);transform: scale(1.08)}
</style>
<body>
  <div class="entry-banner">
   <a href="#">
           <img border="0" width="680" height="130" src="https://img.iplaysoft.com/wp-content/uploads/2018/618-apps-sale/618_2019_banner.jpg" />
       </a>
  </div>
</body>
</html>

注意：这个效果本博还没测试过，蛮好玩的这里先收录一下了。

.entry-thumbnail {
overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

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

/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
/*文章一二三四级标题美化 结束*/

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

/* 首页文章版式阴影颜色 */
.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;
}

/*首页文章列表悬停上浮*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article), .panel-picture {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover, .panel-picture:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}


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

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

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

.border-radius-6 {
border-radius: 15px;
}

这段可能还需要改进，在目前这个主题版本中测试没有生效。

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

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

to {
    transform: scale(1.1);
}
}

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义CSS即可:

/*两侧框架留白间距*/
@media (min-width:1700px) {
    .app.container {
        width: 95%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 95%
    }
}

@media (min-width:2048px) {
    .app.container {
        width: 93%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 93%
    }
}

@media (min-width:1200px) {
    .app.container {
        width: 90%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 90%
    }

    .app.container .app-footer-fixed {
        max-width: 970px
    }

    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px
    }

    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 90%
    }
}

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

<!--底栏高度开始-->
.wrapper {
    padding: 10px
}
<!--底栏高度结束-->

/* 粗斜体上色 */
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);}
<!--黑白模式结束-->

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

<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>

使用方法： 复制下面代码到 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>'
            + '来源：http://www.5k5b.com/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：hellolin.cn\n'
            + '链接：' + window.location.href + '\n'
            + '来源：http://www.5k5b.com/\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"
})
/* 网站加载完成提示结束 */

/* FPS显示 */
var console={};
console.log=function(){};

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();

/* 打字动效 */
(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);

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

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

此处的 #949494;即为滚动条的颜色，你可以去 http://tools.jb51.net/static/colorpicker/ 这个链接去找到你喜欢的颜色然后替换 注意：替换的是 #后面的 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
}

/* 左侧图标颜色and彩色标签云 */
/*彩色标签云代码开始*/
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
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
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});
/*左侧图标颜色代码结束*/

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

// 彩色标签云
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
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
    }
}

<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

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

<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

当你看其他网站的时候，网页标题会有可爱的变化~

另外代码里的两个链接可以按照自己的需求修改哦~

/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
         document.title = '网页崩溃了！！！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");
         document.title = '咦，又好啦(✿◡‿◡)' ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

这里用了免费的cdn加速，建议换成自己的，目前是否还可用未知，没测试过。

效果图：

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

id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:"#f1f3f4"           //背景颜色

在 开发者设置 自定义输出body 尾部的HTML代码中添加下面代码，需要修改可参考上方参数

<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</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>
<!-- 自定义右键菜单美化 -->

<!-- 防调试 -->
<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>

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义输出body尾部代码即可：

<script>
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"
})

</script>

将如下代码加到 开发者设置-首页列表最前方广告位即可：

<!-- 首页倒计时 -->
<style>
    .gn_box {
        border: none;
        border-radius: 15px;
    }

    .gn_box {
        padding: 10px 14px;
        margin: 10px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #fff;
    }

    #t_d {
        color: #982585;
        font-size: 18px;
    }

    #t_h {
        color: #8f79c1;
        font-size: 18px;
    }

    #t_m {
        color: #65b4b5;
        font-size: 18px;
    }

    #t_s {
        color: #83caa3;
        font-size: 18px;
    }
</style>
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>2</font>
        <font color=#A3005C>3</font>
        <font color=#8C0073>年</font>
        <font color=#75008A>-</font>
        <font color=#5E00A1>新</font>
        <font color=#4700B8>年</font>
        <font color=#3000CF>倒</font>
        <font color=#1900E6>计</font>
        <font color=#0200FD>时</font>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span
                id="t_s"> 秒</span></div>
    </center>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2023/01/01 00:00:00');   // 这里是明年第一天时间
            var NowTime = new Date('2022/8/25 23:02:01');    // 这里是当前时间 自己修改
            var t = EndTime.getTime() - NowTime.getTime();
            var d = Math.floor(t / 1000 / 60 / 60 / 24);
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            var m = Math.floor(t / 1000 / 60 % 60);
            var s = Math.floor(t / 1000 % 60);
            var day = document.getElementById("t_d");
            if (day != null) {
                day.innerHTML = d + " 天";
            }
            var hour = document.getElementById("t_h");
            if (hour != null) {
                hour.innerHTML = h + " 时";
            }
            var min = document.getElementById("t_m");
            if (min != null) {
                min.innerHTML = m + " 分";
            }
            var sec = document.getElementById("t_s");
            if (sec != null) {
                sec.innerHTML = s + " 秒";
            }
        }
        setInterval(getRTime, 1000);   
    </script>
</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>

打开 Handsome/componet/aside.php文件，在大概第126行代码的下面添加：

<li>
    <a data-no-instant class="auto">
        <span class="pull-right  text-muted">
            <i class="fa icon-fw fa-angle-right text"></i>
            <i class="fa icon-fw fa-angle-down text-active"></i>
        </span>
        <i class="iconfont icon-c-classification"></i>
        <span><?php _me("伸缩框标题") ?></span>
    </a>

    //需要几条这三行复制多少遍
       <ul class="nav nav-sub dk">
        <li><span class="external-link"><a class="no-external-link" href="https://example.com" target="_blank"><i data-feather="external-link"></i><span>XXXXX网站</span></a></span></li>
       </ul>

</li>

修改/usr/themes/handsome/component/aside.php文件 在125行* >上面添加以下代码

修改/usr/themes/handsome/index.php文件，位于公告位置下方 删除以下代码:

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

修改 /usr/themes/handsome/index.php文件，位于公告位置下方:

<header class="bg-light lter b-b wrapper-md">
替换成
<header class="bg-light lter b-b wrapper-md" style="text-align:center">

效果图：

方法：

1. 用压缩包内的 login.php文件替换掉 /admin/login.php文件
2. 将压缩包内的 style文件夹上传到 /admin/文件夹下
3. 修改 login.php第 35行，把“TuJun’Blog”替换成自己的信息

[button color=“success” icon=“glyphicon glyphicon-arrow-down” url=“https://wwwc.lanzoue.com/i8EN628gdnpi” type=""]后台登陆界面美化模板[/button]

.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) }

/*响应时间*/
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"; }

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

</footer>

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义JavaScript即可

<!--评论 打卡、赞、踩 功能-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED，用于存放编辑器功能

// ... (existing code)

// 定义一个函数 a，用于在文本框中插入文字
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;
    var m = a.selectionEnd;
    var 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();
  }
}

window.SIMPALED.Editor = {
 daka: function() {
    var b = new Date().toLocaleTimeString();
    var c = document.getElementById("comment") || 0;
    a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~<br>");

    // 将光标移到文本最后
    if (c.setSelectionRange) {
      var len = c.value.length;
      c.setSelectionRange(len, len);
      c.focus();
    } else if (c.createTextRange) {
      var range = c.createTextRange();
      range.collapse(false);
      range.select();
      c.focus();
    }
  },

  zan: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 这篇文章展现了作者深邃的思想和独特的观点，令人赞叹不已。 ::coolapk:96:: <br>",
      " 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动，实在值得赞美。 ::coolapk:96:: <br>",
      " 作者以敏锐的洞察力和真挚的情感，将文字融为一体，这种写作技巧令人赞赏。 ::coolapk:96:: <br>",
      " 这篇文章展现了作者的才华和学识，无不让人对其赞美有加。 ::coolapk:96:: <br>",
      " 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。 ::coolapk:96:: <br> ",
      " 作者的文字流畅而富有节奏感，令人为之倾倒，实在是一篇令人赞美的佳作。 ::coolapk:96:: <br>",
      " 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ::coolapk:96:: <br>",
      " 这篇文章的独到见解和新颖观点，让人对作者的创意赞美有加。 ::coolapk:96:: <br>",
      " 作者运用生动的比喻和细腻的描写，让读者仿佛身临其境，实在是一种令人赞美的写作艺术。 ::coolapk:96:: <br>",
      " 这篇文章的深情笔触和真挚感受让人深深感叹，实在是一篇值得赞美的美文。 ::coolapk:96:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  cai: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 我是来替大家批评博主的，我是来批评的，这篇文章的结构有点混乱，需要更好地组织和展开内容。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，作者的表达能力有待提高，有些地方表述不够清晰，读者可能会感到困惑。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章的语法错误较多，建议仔细检查并进行修改。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，内容有些空洞，需要更多具体的例子或细节来支撑观点。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章缺乏逻辑，有些段落之间的衔接不够自然。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，作者的观点没有充分论证，需要更多的证据和理由来支持主张。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章中出现了一些拼写错误和用词不当的情况，建议进行仔细校对。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，语言表达过于简单，可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，这篇文章的主题不够突出，需要更好地明确中心思想。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章缺乏吸引人的开头，建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  yulu: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 有你在的日子才是我的日常。 ::dunjiao:302:: <br>",
      " 夹在我女友与前女友与青梅竹马间的果然是修罗场！ ::dunjiao:302:: <br>",
      " 既然如此，就再努力一次吧。别在这里愁眉不展，也不要再自欺欺人，重新来过！ ::dunjiao:302:: <br>",
      " 比自己,比梦想更重要的东西永远都存在着... ::dunjiao:302:: <br>",
      " 嘛，那又怎么样呢？ ::dunjiao:302:: <br>",
      " 自身不先改变的话，一切都不会改变。 ::dunjiao:302:: <br>",
      " 比起有一百个朋友，不如有个比一百人还要重要的真心朋友。 ::dunjiao:302:: <br>",
      " 我有在反省，但我不后悔。 ::dunjiao:302:: <br>",
      " 要超越过去与悲伤，用坚强和笑容去开拓明天。 ::dunjiao:302:: <br>",
      " 男人许下的诺言就一定要遵守。 ::dunjiao:302:: <br>",
      " 没有回忆就去创造回忆，没有道路就去开辟道路。 ::dunjiao:302:: <br>",
      " 我敬你是条汉子！ ::dunjiao:302:: <br>",
      " 不相信自己的人，连努力的价值都没有。 ::dunjiao:302:: <br>",
      " 微风摇曳着窗帘，夕阳斜射入教室，在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友，不行吗？」 ::dunjiao:302:: <br>",
      " 就算是沉落地面的太阳，只要夜晚过了一定会再度升起，不管有什么痛苦或难过的事，跟今天截然不同的明天也一定会到来。 ::dunjiao:302:: <br>",
      " 我的腿让我停下，可是心却不允许我那么做。 ::dunjiao:302:: <br>",
      " 生活就像超级女生，走到最后的都是纯爷们。 ::dunjiao:302:: <br>",
      " 我要拼，装上假牙也要拼！ ::dunjiao:302:: <br>",
      " 想要成为无论多么悲伤的时候，也能够漂亮微笑的人吧。 ::dunjiao:302:: <br>",
      " 人们只是用好人来称呼对自己有用的人而以，不存在对所有人都有用的人。 ::dunjiao:302:: <br>",
      " 烈焰中舞动的火花，将赐予邪恶异性交往以天罚。 ::dunjiao:302:: <br>",
      " 无论乌云有多浓厚，星星也一定还在，只是暂时看不到了而已。 ::dunjiao:302:: <br>",
      " 不相信人咬不到肚脐的，咬破肚脐去死如何？ ::dunjiao:302:: <br>",
      " 人一生会遇到约万人，两个人相爱的概率是.。所以你不爱我，我不怪你。 ::dunjiao:302:: <br>",
      " 不管看到什么样的过去，都请不要迷失自己，不管你变成什么样子，我都是你的同伴。 ::dunjiao:302:: <br>",
      " 心，可是很重的。 ::dunjiao:302:: <br>",
      " 我爱上的人，称我为怪叔叔 ::dunjiao:302:: <br>",
      " 慕君之心，至死方休。 ::dunjiao:302:: <br>",
      " 虚伪的眼泪，会伤害别人，虚伪的笑容，会伤害自己。 ::dunjiao:302:: <br>",
      " 若隐若现才是艺术！ ::dunjiao:302:: <br>",
      " 生我何用？不能欢笑。灭我何用？不减狂骄。 ::dunjiao:302:: <br>",
      " 就是因为你不好，才要留在你身边，给你幸福。 ::dunjiao:302:: <br>",
      " 呐，我们好像是，被宇宙和地球拆散的恋人似的。 ::dunjiao:302:: <br>",
      " 你会梦游，我会磨牙，我们晚上一起去吓人吧！ ::dunjiao:302:: <br>",
      " 或许只需一滴露水，便能守护这绽放的花朵。 ::dunjiao:302:: <br>",
      " 自己永远是孤单的，但你可以让其他人变得不孤单。 ::dunjiao:302:: <br>",
      " 和哥哥的便当比起来夜空的薯片就像大便一样！只会给我大便的大便夜空是笨蛋～笨蛋～ ::dunjiao:302:: <br>",
      " 我手中的魔法，是守护挚爱的力量，是坚定这个信念所必须的力量，我一定会拯救你的，无论在何时、何地。 ::dunjiao:302:: <br>",
      " 要改变别人的心真是件很难办的事，不过改变自己要容易一点。 ::dunjiao:302:: <br>",
      " 风筝的线你随时可以放开，只是别盼望我会回来。 ::dunjiao:302:: <br>",
      " 与你的生命等价的东西，这个世界上根本没有。 ::dunjiao:302:: <br>",
      " 君子可寓意于物，但不可留意于物。 ::dunjiao:302:: <br>",
      " 最好的感觉，是有人懂你的欲言又止。 ::dunjiao:302:: <br>",
      " 看似美好的东西，往往藏着陷阱。 ::dunjiao:302:: <br>",
      " 爱,其实很简单，困难的是去接受它。 ::dunjiao:302:: <br>",
      " 喜欢大胸只是本能，喜欢贫乳才是审美。 ::dunjiao:302:: <br>",
      " 二次元什么的我本来是不感冒的，直到我的膝盖中了一箭。 ::dunjiao:302:: <br>",
      " 你才是⑨！你全家都是⑨！ ::dunjiao:302:: <br>",
      " 努力是不会背叛自己的，虽然梦想有时会背叛自己。 ::dunjiao:302:: <br>",
      " 面对就好，去经历就好。 ::dunjiao:302:: <br>",
      " 我从小就害怕虫子 ::dunjiao:302:: <br>",
      " 做不到的话，不过就是一死 。但是，赢了就能活下去，要是不战斗就赢不了。 ::dunjiao:302:: <br>",
      " 既然认准这条路，何必去打听要走多久。 ::dunjiao:302:: <br>",
      " 研表究明，汉字的序顺并不定一能影阅响读，比如当你看完这句话后，才发这现里的字全是都乱的。 ::dunjiao:302:: <br>",
      " 少年心意，一如明月松间的青石流水，那些年里看到了，却不懂。 ::dunjiao:302:: <br>",
      " 明明只是活着，哀伤却无处不在⋯⋯ ::dunjiao:302:: <br>",
      " 少罗嗦，你还不如虫子呢！ ::dunjiao:302:: <br>",
      " 天空是连着的，如果我们也能各自发光的话，无论距离有多远，都能看到彼此努力的身影。 ::dunjiao:302:: <br>",
      " 别人恋爱不成功，你连暗恋都不成功！ ::dunjiao:302:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
};

代码内 ::dunjiao:302:: ::coolapk:96:: ::dunjiao:315::等是表情文件，根据自己的表情内容修改，文字内容是随机输出的，也可以根据自己喜欢更改。 打开 Handsome主题目录下的 component/comments.php文件,大概172行，找到并删除如下内容:

<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                            <div class="OwO padder-v-sm"></div>

替换成如下代码：

<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();"><div class="OwO-logo"><span class="smile-icons"><i class="iconfont icon-daohanglan-01"></i></span><span class="OwOlogotext">打卡</span></div></div>
    <div class="OwO" title="语录" style="display: inline;" onclick="javascript:SIMPALED.Editor.yulu();"><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();"><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();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></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("2021/09/11 22: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>

/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>
                      <!--<i class="fontello fontello-chevron-circle-up" aria-hidden="true"></i>-->
    </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>

首先我们去字体天下网站找到一款自己喜欢的字体，记得一定要是免费商用的，防止有版权问题~ 下载好后会发现是一个 .tff扩展名的文件，我们再去字体转换网站里将 .tff转换为 .woff格式的文件 并将转换后的文件上传到你网站目录里的某个位置，默认是 usr/themes/handsome/assets/fonts文件夹里。 前往 外观设置-开发者设置-自定义css中添加以下代码：

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}

后来发现有插件可以实现一键切换字体，很方便，放在最下面插件里了。

首先去心知天气官网注册账号并申请API 之后在 /usr/themes/handsome/component/headnav.php文件中的动态日历中 下方添加以下代码 注意将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>
<!-- 知心结束-->

代码添加到 自定义CSS中：

/*新年喝彩图*/
#new_year{
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    left: 0;
    right: 0;
    bottom: 0;
}
#post-panel header.wrapper-md.bg-light{
position:relative;
}

找到 usr/theme/handsome/index.php在以下图中位置（大概37行左右）添加如下代码：

<img id="new_year" src="https://img04.sogoucdn.com/app/a/200692/1315_138_feedback_f61e2617c522404ab4ee69b5cfba0657.png" draggable="false">

假如你是个古诗词爱好者，你可能希望将handsome自带的一言换为换成古诗词版的，刚好已经有人开发出这样的api了，我们直接调用即可。今日诗词官网

我比较喜欢的一点是，它会自动获取访客ip，然后根据ip所在地、访问时间等信息来推荐相关的古诗词（比如如果你在上海的晚上打开网站，它就会推送有关江南、夜雨的古诗词），很妙。

具体的推荐方式 点我查看。

主题根目录下打开 index.php，找到以下代码：

<small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>

更改为以下代码：

<small class="text-muted letterspacing indexWords">
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></small>

当然，别忘了在主题后台启用 主题增强功能->增强功能开关->启用一言接口

编辑/usr/themes/handsome/component/sidebar.php文件 在上面添加以下代码:

<!--文章显示标签云-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
    <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>
    <div class="tags l-h-2x">
        <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
        <?php if($tags->have()): ?>
             <?php while ($tags->next()): ?>
                <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
</section>
<!--显示标签云结束-->

Github效果：

主题设置 – 开发者设置 – 全局右侧广告位添加以下代码：

<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:240px; height:380px;"></iframe>

然后修改 handsome/component/sidebar.php 找到 ，将”广告”二字修改为“P站每日热门”

代码放置 开发者设置-文章页脚广告位：

<small class="text-muted letterspacing indexWords" style="font-family:monaco;text-align:center;">
<div >
<br>
<font style="font-size:20px;font-family:YouYuan;opacity:0.8;">◈</font>
<br>
<script type="text/javascript" src="https://api.xygeng.cn/one/get/" >
</script>
</div>
</small>

代码放置 开发者设置-全局右侧边栏广告位：

<small class="text-muted letterspacing indexWords" style="font-family:monaco;text-align:center;">
<div>
<font style="font-size:20px;font-family:YouYuan;opacity:0.8;">◈</font>
<br><br>
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8">
</script>
</div>
</small>

之后去 /usr/themes/handsome/component/sidebar.php大约在 162行左右：

将 <h5 class="widget-title m-t-none"><?php _me("广告") ?></h5>

替换成：<!--<h5 class="widget-title m-t-none"><?php _me("广告") ?></h5>-->

也就是将这一行代码注释掉就行了。

在当前文章内容尾部添加该文章的标签，在主题目录下的 /usr/themes/handsome/post.php文件中的适当地方加入以下代码。

<!--文章底部添加标签-->
标签：<?php $this->tags('，', true, 'no tag'); ?>

方法：进入 handsome后台，选择 “更换外观--设置外观--开发者设置--全局右侧边栏广告位”，将复制的代码粘贴即可

<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5wrl2mbvawy&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&rs=80" async="async"></script>

替换广告字：打开 “/usr/themes/handsome/component/sidebar.php”文件，搜索“广告”二字，改为“位置地球”。

将以下代码放在主题的 handsome/component/footer.php中的 </body>之前即可。 或者直接在 后台外观设置→开发者设置→自定义输出body尾部的HTML代码处粘贴即可

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

文件路径：/handsome/component/headnav.php

删除源代码

<?php if (!$hideTalkItem): ?>
            <!--闲言碎语-->
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle">
                    <i data-feather="twitch"></i>
                    <span class="visible-xs-inline">
              <?php _me("闲言碎语") ?>
              </span>
                    <span class="badge badge-sm up bg-danger pull-right-xs"><?php
                        $read_id = Typecho_Cookie::get('user_read_id');
                        $latest_time_id = Typecho_Cookie::get('latest_time_id');
                        //$latest_time_id赋值应该在列表加载的后面
//                        if (empty($latest_time_id)){
//                            $latest_time_id = 999999;
//                        }
                        if (empty($read_id)){
                            $read_id = -1;
                        }
                        if (!empty($read_id) && !empty($latest_time_id)){
                            $not_read = $latest_time_id - $read_id;
                            if ($not_read > 0){
                                _me("新");
                            }
                        }
                        ?></span>
                </a>
                <!-- dropdown -->
                <div class="dropdown-menu w-xl animated fadeInUp">
                    <div class="panel bg-white">
                        <div class="panel-heading b-light bg-light">
                            <strong>
                                <?php _me("闲言碎语") ?>
                            </strong>
                        </div>
                        <div class="list-group" id="smallRecording">
                            <?php
                            $slug = "cross";    //页面缩略名
                            $limit = 3;    //调用数量
                            $length = 140;    //截取长度
                            $ispage = true;    //true 输出slug页面评论，false输出其它所有评论
                            $isGuestbook = $ispage ? " = " : " <> ";

                            $db = $this->db;    //Typecho_Db::get();
                            $options = $this->options;    //Typecho_Widget::widget('Widget_Options');

                            $page = $db->fetchRow($db->select()->from('table.contents')
                                ->where('table.contents.created < ?', $options->gmtTime)
                                ->where('table.contents.slug = ?', $slug));

                            if ($page) {
                                $type = $page['type'];
                                $routeExists = (NULL != Typecho_Router::get($type));
                                $page['pathinfo'] = $routeExists ? Typecho_Router::url($type, $page) : '#';
                                $page['permalink'] = Typecho_Common::url($page['pathinfo'], $options->index);

                                $comments = $db->fetchAll($db->select()->from('table.comments')
                                    ->where('table.comments.status = ?', 'approved')
                                    ->where('table.comments.created < ?', $options->gmtTime)
                                    ->where('table.comments.type = ?', 'comment')
                                    ->where('table.comments.parent = ?', '0')
                                    ->where('table.comments.cid ' . $isGuestbook . ' ?', $page['cid'])
                                    ->order('table.comments.created', Typecho_Db::SORT_DESC)
                                    ->limit($limit));
                                $index = 0;
                                foreach ($comments AS $comment) {
                                    if ($index == 0){
                                        Typecho_Cookie::set('latest_time_id', $comment['coid']);
                                    }
                                    $index ++;
                                    $content = Content::postCommentContent(Markdown::convert($comment['text']),$this->user->hasLogin(),"","","",true);
                                    $content = Content::returnExceptShortCodeContent(trim(strip_tags($content)));
                                    if ($content == ""){
                                        $content = _mt("点击查看详情");
                                    }

                                    echo '<a href="'.BLOG_URL_PHP.'cross.html" class="list-group-item"><span class="clear block m-b-none words_contents">'.Content::excerpt($content,200).'<br><small class="text-muted">'.Utils::formatDate($comments,$comment['created'],
                                            $this->options->commentDateFormat).'</small></span></a>';
                                }
                            } else {
                                echo '<a target="_blank" href="'.BLOG_URL.'admin/write-page.php" class="list-group-item"><span class="clear block m-b-none">这是一条默认的说说，如果你看到这条动态，请去后台新建独立页面，地址填写cross,自定义模板选择时光机。具体说明请参见主题的使用攻略。<br><small class="text-muted">'.date("F jS, Y \a\t h:i a",time()+($this->options->timezone - idate("Z"))).'</small></span></a>';
                            }
                            ?>
                        </div>
                    </div>
                </div>
            </li>
            <!--/闲言碎语-->
        <?php endif; ?>

• 文件路径：/handsome/component/headnav.php
• 源代码：

<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-left shift" method="post"
        role="search">

• 修改为：

<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-right shift" method="post"
          role="search">

Handsome主题的搜索框按钮一直有问题，按不下去不能正常使用，可以按以下方法修复 打开/usr/themes/handsome/component/headnav.php文件 搜索search_submit然后将整行替换成如下代码：

<span id="search_submit" class="transparent input-group-btn" onclick=jumpForSearch(search_input.value)>

然后在文件的最后面添加如下代码后保存即可

<!--/开始修复搜索按钮-->
<script type="text/javascript">
function jumpForSearch(search_ct){
  if(search_ct.length>0){
    $.pjax({ 
    url: "https://"+document.domain+'/search/'+search_ct, 
    container: '#content',
    fragment: '#content',
    timeout: 8000
    });
  }
}
</script>
<!--/修复搜索按钮结束-->

首先打开在网站在目录下找到handsome主题里的component/comments.php文件， 大概在65行左右，将以下代码：

<a class="pull-left thumb-sm" rel="nofollow">
…
</a>

替换为：

 <a class="pull-left thumb-sm" rel="nofollow">
          <?php if ($comments->authorId == $comments->ownerId): ?>
          <img nogallery src="自己的头像链接" class="avatar-40 photo img-circle" style="height:40px!important; width: 40px!important;">
          <?php else: ?>
          <img nogallery src="用户的头像链接" class="avatar-40 photo img-circle" style="height:40px!important; width: 40px!important;">
          <?php endif; ?>
      </a>