博主正在使用handsome主题版本v9.0.2

如果本站GIF图片加载不出来请鼠标右键刷新网页即可.

有不懂问题可以留言！博主会的话一定解答。

本网站正在使用的插件

typecho插件

  1. AliceStyle------一款非常强大的美化插件
  2. baiduseo------自动帮你提交文章给百度收录
  3. SmartSpam------智能评论过滤器，让机器人彻底远离你！

handsome美化修改文件名称

美化文件名称

footer.php       最底部版权、音乐播放器之类
sidebar.php      右侧栏目
aside.php        左边导航栏
post.php       文章输出
comments.php     评论区
header.php       页面头，没啥要改的
headnav.php      顶部导航
say.php          时光机动态
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合

网站加载完成提示

网站加载完成提示代码

↓效果演示GIF图片↓
效果演示GIF图片

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

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

复制成功提示

复制成功提示代码

↓效果演示GIF图片↓
效果演示GIF图片
使用方法： 复制下面代码到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> 本文作者：瑞哲ovo<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}}
/* 复制成功提示代码结束 */

复制文章自动带版权信息

复制文章带文章版权

ps：效果图就不给了！想想自己复制文章还要删除后面版权信息的感受吧！个人不建议使用挺招人烦的。
使用方法： 复制下面代码到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>'
            + '作者：瑞哲ovo QQ:2290294443<br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：http://www.ruizheovo.com/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：瑞哲ovo QQ:2290294443\n'
            + '链接：' + window.location.href + '\n'
            + '来源：http://www.ruizheovo.com/\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
/* 复制文章自动带版权结束 */

添加文章最后版权信息

添加文章版权信息

↓效果演示图片↓
效果演示图片
使用方法： 复制下面代码到你服务器文件路径usr/themes/handsome/post.php文件里面看下面图片代码放置的地方放置代码即可.
修改目录地址

<!--版权声明开始-->
                 <div class="entry-content l-h-2x">
                   <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里面.

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

自定义文章默认头图片

自定义文章头图

使用方法： 到你服务器文件路径usr/themes/handsome/assets/img/sj文件夹里面的图片都可以替换

自定义右侧热门文章图标

自定义右侧图标

使用方法： 到你服务器文件路径usr/themes/handsome/assets/img/sj2文件夹里面的图标都可以替换

自定义添加左侧导航

自定义添加左侧导航

使用方法： 复制下面代码到handsome主题，设置外观，高级设置，左侧边框导航里面添加即可。
ps：具体使用方法可以官方文档查看

{"name":"动态","class":"glyphicon glyphicon-hdd","link":"http://ruizheovo.com/index.php/10.html","target":"_blank"}
{"name":"留言","class":"glyphicon glyphicon-cloud","link":"http://ruizheovo.com/index.php/11.html","target":"_blank"}

添加在线客服Crisp

添加在线客服

  1. 注册Crisp账户，并添加网站信息，注册地址https://app.crisp.chat/
  2. 在crisp后台点击网站设置，设置说明，聊天框设置说明，html，就会获取到html代码
  3. 拿到代码以后去服务器文件usr/themes/handsome/component/footer.php文件最后</body>上面添加代码

GIF图片教程演示：
GIF图片教程

开启网站Gzip压缩

开启网站gzip压缩

使用说明： 在根目录index.php文件中，任意地方加入以下代码

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

屏蔽禁用F12键

禁用F12键

效果图就不放了没时间搞！具体效果在本站按F12即可看到效果！

使用方法： 1.事先引入以下layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码

<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

2.将以下代码添加至后台-开发者设置-自定义JavaScript

document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        layer.msg("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }
}

右键美化自定义菜单

右键自定义菜单

效果图就不放了没时间搞！具体效果在本站右键即可看到效果！

使用方法： 1.事先引入以下layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码

<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

2.将以下代码添加至后台-开发者设置-自定义输出body 尾部的HTML代码

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

外部视频插入到文章里面

文章内挂载视频

使用方法 1.将以下代码添加到主题的自定义CSS里Handsome主题外观--设置外观--开发者设置--自定义CSS里面.

/*视频挂载*/

.iframe_video {
position: relative;
width: 100%;
}

@media only screen and (max-width: 767px) {
.iframe_video {
height: 15em;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.iframe_video {
height: 20em;
}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.iframe_video {
height: 30em;
}
}

@media only screen and (min-width: 1200px) {
.iframe_video {
height: 40em;
}
}

.iframe_cross {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%
}

.iframe_cross iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0
}

2.在文章中插入视频链接，请看下方GIF教程图片

文章中插入外部视频GIF图片教程

一定要记住在iframe 这个地方后面添加 class="iframe_video"

404自动返回

404自动返回

1：打开/usr/themes/handsome/404.php，在第89行左右，在<h1 class="text-shadow text-white">404</h1>后面添加：

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

2:然后把下面这段放到最后的</body>前

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

鼠标点击特效

鼠标点击特效

使用方法： 主题设置 - 开发者设置 - 自定义输出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>

开启全站灰色(黑白模式)

开启全站灰色(黑白模式)

使用方法： 设置外观--开发者设置--自定义CSS 添加以下代码

<!--开启黑白模式-->
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);}
<!--黑白模式结束-->

也可以给加个判断到国家公祭日自动变黑白
将以下代码放在主题后台，设置外观->开发者设置->自定义输出head头部的HTML代码中即可

<!-- 国家公祭日网站变灰开始 -->
<script type="text/javascript">
    // 判断是国家公祭日12.13，加载css样式
    (function() {
        var date = new Date();
        var month = date.getMonth(); //0~11
        var day = date.getDate(); //1-31

        if (month === 11 && day === 13) {
            var styleNode = document.createElement('style');
            styleNode['type'] = 'text/css';
            var cssText = `
                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,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><filter id=\\'grayscale\\'><feColorMatrix type=\\'matrix\\' values=\\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\\'/></filter></svg>#grayscale");
                    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
                    -webkit-filter: grayscale(1);
                }
                code {
                    color: #ccc!important;
                }
            `;

            if (styleNode.styleSheet) {
                styleNode.styleSheet.cssText = cssText;
            } else {
                styleNode.appendChild(document.createTextNode(cssText));
            }

            var head = document.getElementsByTagName('head')[0];
            head.appendChild(styleNode);
        }
    })();
</script>
<!-- 国家公祭日网站变灰结束 -->

最后修改：2023 年 01 月 01 日
© 允许规范转载
本文作者：
 文章标题：handsome主题简易美化教学
 本文地址：https://ruizheovo.com/index.php/archives/28/
 版权说明：若无注明，本文皆瑞哲vlog原创，转载请保留文章出处。
呐，都看到这里了，如果您觉得我的文章对您有用，欢迎点赞随意打赏。