非本站原创,本站仅为记录和分享。
由于修改了很多地方,目前只整理了部分代码。
部分教程已做权限处理,如需查看请评论后刷新即可。
有问题请留言,若有侵权,请评论告知我!

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:红色

博客LOGO更换

此处内容需要评论回复后(审核通过)方可阅读。

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

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

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

正文结束并添加版权声明

此处内容需要评论回复后(审核通过)方可阅读。

<!--版权声明开始-->
<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
}

网站加载完成提示

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

修改为:

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

左侧导航栏修改

设置外观-->主题设置-->左侧边栏导航,添加以下代码:

{"name":"朋友","class":"glyphicon glyphicon-heart","link":"/links.html"},
{"name":"留言","class":"glyphicon glyphicon-comment","link":"/message.html"},
{"name":"关于","class":"glyphicon glyphicon-asterisk","link":"/about.html","target":"_self"}

去除首页顶部博客名称

修改/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; ?>

首页文章列表悬停上浮

在 后台-->设置外观-->开发者设置-->自定义CSS添加以下代码:

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

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

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

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

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

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

正文结束
本文作者:
文章标题:Handsome主题美化记录(最新)
本文地址:https://www.ihaim.cn/archives/898.html
版权说明:若无注明,本文皆活溢流 - Live Over Flow原创,转载请保留文章出处。
最后修改:2021 年 05 月 05 日 10 : 49 PM
如果觉得我的文章对你有用,请随意赞赏