写此篇用来记录博客美化修改过程，会随时补充更新，部分内容转自网络，若有不妥之处，请联系博主删除！

handsome文件目录说明

handsome文件目录说明

component/aside.php        左边导航栏
    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及伪静态配置

https及伪静态配置

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:From-Https} !^on$ [NC]
RewriteCond %{HTTP_HOST} ^(www.)?ravo.top$ [NC]
RewriteRule ^(.*)$ https://www.ravo.top/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^http://oss.ravo.top$ [NC]
RewriteRule ^(.*)$ https://oss.ravo.top$1 [R=301,L]
# 下面是在根目录，文件夹要修改路径
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>

开启gzip压缩

开启gzip压缩

在根目录index.php文件中，加入以下代码

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

正文结束并添加版权声明

在 handsome/post.php内 <?php echo Content::exportPayForAuthors(); ?>下面添加以下内容

<!--版权声明开始-->
<div class="entry-content l-h-2x">
                   <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
                     <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
                   </div>
                   <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
                     <span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
                     <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
                     <span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
                     <span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
                   </div>
                 </div>
<!--版权声明结束-->

美化网站右侧滚动条样式

handsome主题直接把下面的CSS代码添加到主题设置→自定义CSS保存就可以了。也可以添加到handsome/assets/css/handsome.min.css文件最后面保存，开了CDN的记得刷新缓存。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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: #30B07F;
    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
}

网站字体更改

使用AliceStyle美化插件，插件设置-字体美化，输入想要的字体链接。

网站加载完成提示 

/* 网站加载完成提示开始 */ 
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"
})
/* 网站加载完成提示结束 */

复制成功提示代码图 

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

复制文章自动带版权

复制文章自动带版权

将以下代码插入后台开发者设置--自定义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>'
            + '作者：Ravo QQ:837957996<br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：https://www.ravo.top/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
            + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：Ravo QQ:837957996\n'
            + '链接：' + window.location.href + '\n'
            + '来源：https://www.ravo.top/\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
/* 复制文章自动带版权结束 */

页脚美化

一、去 /usr/theme/handsome/component/footer.php删除原来的底部版权，也就是删除如下代码：

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
                                                                                                     href="https://www.ihewro.com/archives/489/">handsome</a>

二、修改以下代码（大概在第14行）

<span class="text-ellipsis">© <?php echo date("Y");?> Copyright <?php
            $this->options->BottomleftInfo(); ?></span>

修改为：

<span class="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>

三、添加以下代码到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-red {
  background-color: #f00
}

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

.github-badge .bg-purple {
  background-color: #ab34e9
}

/*这是优化底部栏的css，应该不会影响没开启炫酷透明功能时候的主题，如果有问题就删除下面这行即可*/
.wrapper {
  padding: 11px;
}

四、按照博客信息来修改以下代码，修改完分别填写到 主题设置-开发者设置-博客底部左/右侧信息即可。

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="https://www.ravo.top/" arget="_blank" rel="noopener noreferrer" title="©2021 Ravo">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 Ravo</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn" target="_blank" title="陇ICP备2021000372号">
<span class="badge-subject">陇ICP备</span><span class="badge-value bg-green">2021000372号</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://www.ravo.top/sitemap.xml" target="_blank" title="网站地图">
<span class="badge-subject">地图</span><span class="badge-value bg-orange">Sitemap</span>
</a>
</div>
<!-- 博客底部右侧信息 -->
<script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1279677219&web_id=1279677219"></script>
 |  
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

添加文章版权信息

在handsome/post.php内 <?php echo Content::exportPayForAuthors(); ?>下面添加以下内容

<!--文章版权信息-->
                 <div class="entry-content l-h-2x">
                   <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
                     <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
                   </div>
                   <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
                     <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
                     <span>本文链接：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
                     <span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。<br></span>
                     <span>作品采用：<a class="link" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》</a>许可协议授权。</span>   
                   </div>
                 </div>

自定义文章头图

替换主题默认下的sj文件里的图片，路径为：

usr --> themes --> handsome --> assets --> img --> sj 替换之后，清除一下浏览器的缓存文件。

导航栏修改

设置外观-->主题设置-->左侧边栏导航，添加以下代码，加入OSS及云盘外链。

{"name":"OSS","class":"glyphicon glyphicon-hdd","link":"http://oss.ravo.top/","target":"_blank"}
{"name":"云盘","class":"glyphicon glyphicon-cloud","link":"https://cloud.189.cn/","target":"_blank"}

去除首页顶部博客名称

修改 /usr/themes/handsome/index.php文件，位于公告位置下方（41-43行）
删除以下代码

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

第三方登录

下载GmOauth插件，FTP上传插件至plugins目录，确保文件名为GmOauth，后台启动之后将以下代码放在要输出登录按钮位置,本博客在themes/handsome/component/comments.php中187行

<!--第三方登录接口开始--><?php GmOauth_Plugin::GmOauth(); ?><!--第三方登录接口结束-->

在线客服Crisp

  • Crisp账户

注册Crisp账户，并添加网站信息，注册地址https://app.crisp.chat/

  • 获取Crisp代码

后台--网站设置--显示整合--HTML中复制代码

  • 代码插入

博客后台--主题--开发者设置--自定义输出head头部的HTML代码

<!--在线客服Crlsp-->
<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="b7cc9d5c-61da-4fd0-b916-b61ee4c62a7a";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>

自定义后台路径

前言

Typecho安装完后，默认后台路径为 xxx.com/admin，存在安全隐患，为了提高博客安全，将默认路径修改为自己的。

  • 修改根目录 admin文件夹名称为自定义的。
  • 打开根目录下的 config.inc.php文件，找到以下代码
/** 后台路径(相对路径) */
define('__TYPECHO_ADMIN_DIR__', '/admin/');
  • 修改admin为自己想要的名称。

附

也可以在网站根目录重新建立个 admin文件夹，然后里面放个 index.html，内容想写成什么样就写成什么样，甚至可以写个假的登录框，然后随便个密码就登录成功，然后显示个嘲讽页面。

添加百度收录量

添加百度收录量

文件目录：sidebar.php

  • 在sidebar.php中大约106行添加以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="bar-chart"></i></span> <span
                       class="badge
           pull-right" id="bd_ct_result"></span><?php _me("百度收录") ?></li>
  • 在下面任意位置添加以下代码
<script>
    function bd_ct_check(){
        $.getJSON("https://www.qiln.cn/api/bd_ct.php?domain=填写自己的站点",function(result){ 
            if (result.code == 1) {
                $('#bd_ct_result').text(result.data);
            }else{
                $('#bd_ct_result').text('0');
            }
        });
    }
    bd_ct_check();
</script>

新年红灯笼

新年红灯笼

文件目录：header.php

在/usr/themes/handsome/component下header.php最后面添加以下代码，实现新年红灯笼特效。

<!-- 四个红灯笼开始 -->

<style>
.deng-box {
position: fixed;
top: -40px;
right: -20px;
z-index: 999;
    pointer-events:none;  
} 
.deng-box1 {
position: fixed;
top: -30px;
right: 30px;
z-index: 999;
    pointer-events:none;  
}
.deng-box2 {
position: fixed;
top: -30px;
left: 30px;
z-index: 999;
    pointer-events:none;  
}
.deng-box3 {
position: fixed;
top: -30px;
left: -20px;
z-index: 999;
    pointer-events:none;  
}
.deng-box3 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}


.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 8px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}

.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}

.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}

.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}

.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}

.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}

.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: bold;
line-height: 85px;
text-align: center;
}

.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
background: transparent !important;
}

@-moz-keyframes swing {
0% {
    -moz-transform: rotate(-10deg)
}

50% {
    -moz-transform: rotate(10deg)
}

100% {
    -moz-transform: rotate(-10deg)
}
} 
@-webkit-keyframes swing {
0% {
    -webkit-transform: rotate(-10deg)
}

50% {
    -webkit-transform: rotate(10deg)
}

100% {
    -webkit-transform: rotate(-10deg)
}
}
@media screen and (max-width: 700px) {
.deng-box {
right: 55px;
zoom:0.45
}
.deng-box1 {
right: 190px;
zoom:0.45
}
.deng-box2 {
left: 190px;
zoom:0.45
}
.deng-box3 {
left: 55px;
zoom:0.45
}
} 

</style>
<body>
<!-- 灯笼1 -->

<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">乐</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

<!-- 灯笼2 -->

<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">快</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

<!-- 灯笼3 -->

<div class="deng-box2">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">年</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

<!-- 灯笼4 -->

<div class="deng-box3">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">新</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

</body>
<!-- 四个红灯笼结束 -->

侧栏头像羽毛背景

开发者设置➡自定义CSS

/*羽毛_css*/
.dropdown.wrapper {
    background:url(//www.ravo.top/usr/uploads/auto_save_image/67c7a35981c70278202ff70c16892b20.webp) right bottom no-repeat;
}

网站右下角悬浮小国旗

将如下代码放入开发者设置/自定义输出body 尾部的HTML代码中

 <!-- 国旗开始 -->
<a target="_blank" href="http://www.gov.cn/" rel="nofollow">
<img src="/image/PAFSROhP_China.svg" style="width:60px;right:60px;position:fixed;bottom:0px;" />
<!-- 国旗结束 -->

预留占位

预留占位

预留占位

最后修改：2022 年 02 月 27 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏鼓励！