此篇用来记录博客美化，防止遗忘，随时补充更新，部分内容来自网络，只是收藏整合。

有什么不懂的+我V ： creater8888

一丶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       文章输出

二、正文结束并添加版权信息

在handsome/post.php内php echo Content::exportPayForAuthors(); ?>(大概在95行左右)添加以下内容

<!--版权声明开始-->
<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代码添加到[font color="red"]开发者设置→自定义CSS[/font] 保存就可以了。也可以添加到[font color="red"]handsome/assets/css/handsome.min.css[/font] 文件最后面保存，开了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 美化插件，插件设置-字体美化，输入想要的字体链接。

  • 打开Handsome主题设置界面，找到“开发者设置”选项在以下两项中加入对应内容即可，字体效果见本站。

    • 自定义CSS

      body {font-family: 'ZCOOL XiaoWei';}

    • 自定义输出head头部的HTML代码

      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" />

另一种【站酷快乐体】

自定义CSS：font-family: 'ZCOOL XiaoWei';
Google Fonts API：https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe

五丶网站加载完成提示 

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

六丶页脚备案美化

删除/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>

添加一下代码到开发者设置 ->自定义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;
}

将下列代码修改成自己的，分别填写到handsome设置外观 -> 开发者设置 ->博客底部左/右侧信息中即可。

<div class="github-badge">
<a href="./" title="©2021 Creater">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">Creater</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://www.beian.miit.gov.cn" target="_blank" title="渝ICP备 2021002293号">
<span class="badge-subject">渝ICP备</span><span class="badge-value bg-green">2021002293号</span>
</a>
</div>
<!-- 博客底部右侧信息 -->
<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>

七丶左侧分类、页面和友链显示在导航

本站效果只展示了分类

找到主题目录下的componet/aside.php文件，找到如下分类、页面及友链的代码，剪切至图四中红框位置，之后去博客后台管理，外观设置 -> 页面元素设置 ->左侧边栏元素控制 -> 不显示即可。

image.png
image.png
image.png
image.png

八丶复制文字提示以及禁止F12

以下代码复制粘贴到开发者设置 -> 自定义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> 本文作者：Creater<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}}
/* 复制成功提示代码结束 */

/*防止12*/
document.onkeydown = function() {
    if (window.event && window.event.keyCode == 123) {
        layer.msg("o(*Q▽Q*)o求求惹，不要在扒孩子惹呜呜呜...");
        event.keyCode = 0;
        event.returnValue = false
    }
};

九丶复制带版权信息

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

十丶自定义文章头图

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

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

十一丶在线客服Crisp

  • Crisp账户

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

  • 获取Crisp代码

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

  • 代码插入

开发者设置--自定义输出head头部的HTML代码

十二丶自定义后台路径

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

  • 修改根目录admin文件夹名称为自定义的。
  • 打开根目录下的config.inc.php文件，找到以下代码
  • 修改admin为自己想要的名称。

image.png

十三丶博客介绍彩色打字特效

复制一下代码到初级设置 -> 博主介绍

修改o = ["www.creater.ltd" ]为你想要展示内容即可。

<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 = ["www.creater.ltd" ].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>

十四丶首页文章圆角化

复制一下代码到开发者设置 ->之定义css

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

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

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

十五丶热门文章左侧小图替换

更换/usr/themes/handsome/usr/img/sj2/中的图片即可

十五丶右键自定义

  • 效果

image.png

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

十六丶恋爱记录

  • 右下广告位效果

image.png

  • 复制以下代码到开发者设置 -> 自定义JavaScript：
<!--恋爱记时-->
function lovexhjSitetime() {
                window.setTimeout("lovexhjSitetime()", 1000);
                var seconds = 1000
                var minutes = seconds * 60
                var hours = minutes * 60
                var days = hours * 24
                var years = days * 365
                var today = new Date()
                var todayYear = today.getFullYear()
                var todayMonth = today.getMonth()+1
                var todayDate = today.getDate()
                var todayHour = today.getHours()
                var todayMinute = today.getMinutes()
                var todaySecond = today.getSeconds()
                // 时间设置
                var t1 = Date.UTC(2017, 04, 29, 0, 0, 00)
                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
                var diff = t2 - t1
                var diffYears = Math.floor(diff / years)
                var diffDays = Math.floor((diff / days) - diffYears * 365)
                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                    diffMinutes * minutes) / seconds)
                document.getElementById("lovexhjSitetime").innerHTML = "我们已经在一起<br />" + diffYears + "年" + diffDays + "天" +
                    diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
            }
            lovexhjSitetime()
  • 复制以下代码到开发者设置 -> 全局右侧边栏广告位：
<aside class="widget_text sidebar-widget widget_custom_html fadeInUp">
<div class="textwidget custom-html-widget">
<div id="lovexhj" style="width: 100%; height: 100px; text-align: center; font-size: 1rem;">   
<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
<!-- 左边的头像 -->
<img src="http://www.creater.ltd:8888/down/GSETwuw8qSZA" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 中间的图片 -->
<img src="https://cdn.jsdelivr.net/gh/L-20021213/picture@latest/2020/09/18/lovelogo%20.gif" alt="love" style="width: 60px; border-radius: 50%;">
<!-- 右边的头像 -->
<img src="http://www.creater.ltd:8888/down/AfrRVVqoHHYF" alt="love" style="width: 60px; border-radius: 50%;">
</div>
<p id="lovexhjSitetime" style="font-size: 0.8rem;    margin-top: 16px;  background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;">我们相恋了104天14小时47分钟19秒啦</p>  </div>
</div>
</aside>

十七丶鼠标点击文字特效

将以下代码放在主题的handsome/component/footer.php中的之前即可。

  • 效果

image.png

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

十八丶给文章尾部加标签

  • 效果

image.png

主题目录下的post.php文件中的适当地方加入以下代码。


<!--生成当前文章标签-->
        标签：<?php $this->tags('，', true, 'no tag'); ?>

比如我是放在第86行：

image.png

十九丶文章标题美化，聚焦滑动条

  • 效果

image.png

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

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#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}

二十丶有趣文案-舔狗日记

  • 下载源码，放在网站根目录，然后直接访问即可

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

有什么不懂的+我V ： creater8888

最后修改：2021 年 12 月 13 日 11 : 38 AM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏