基于handsome主题的Typecho博客美化记录

博主： jacksonlee
发布时间：2024 年 04 月 26 日
1482 次浏览
7 条评论
8687字数
分类：博客美化

<div class="tip share">请注意，本文编写于 424 天前，最后修改于 422 天前，其中某些信息可能已经过时。</div>

# 前言

本博客采用的是typecho平台，并且基于handsome主题进行改造美化
<button class=" btn m-b-xs btn-light btn-addon" onclick="window.open('https://www.ihewro.com/archives/489/','_blank')"><i><i data-feather="sandbox"></i></i>handsome主题链接</button>

# 美化效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-73de9fa0ae1c312fc2aec3797ea5ad5226" aria-expanded="true"><div class="accordion-toggle"><span style="">背景图片PPT展示加樱花效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-73de9fa0ae1c312fc2aec3797ea5ad5226" class="collapse in collapse-content"><p></p><div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div><p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-deb2b3b9128ce056cfa7533ad88026e49" aria-expanded="true"><div class="accordion-toggle"><span style="">复制提示+复制版权信息添加</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-deb2b3b9128ce056cfa7533ad88026e49" class="collapse collapse-content"><p></p>

在自定义JavaScript下添加以下代码：

```javascript
/* 复制文章自动带版权开始 */ 
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 10) {
        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>'
            + '作者：Jackson QQ:1834487247<br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：https://www.jacksonlee.work/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
            + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：Jackson QQ:1834487247\n'
            + '链接：' + window.location.href + '\n'
            + '来源：https://www.jacksonlee.work/\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
/* 复制文章自动带版权结束 */
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-da8a4adb049545bdb049eec28bd5a7d823" aria-expanded="true"><div class="accordion-toggle"><span style="">添加在一起倒计时</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-da8a4adb049545bdb049eec28bd5a7d823" class="collapse collapse-content"><p></p>

首先在自定义JavaScript下添加以下代码：

```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, 06, 08, 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()
```

然后在全局右侧边栏广告栏处添加以下代码：

```html
<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="https://www.jacksonlee.work/img/touxiang1.jpg" alt="love" style="width: 60px; border-radius: 50%;" style="">

<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%;" style="">

<img src="https://www.jacksonlee.work/img/touxiang2.jpg" alt="love" style="width: 60px; border-radius: 50%;" style="">
</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>
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-61fff11ee87eb02dd315de9d7fe6db7185" aria-expanded="true"><div class="accordion-toggle"><span style="">修改复制、F12和打印权限</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-61fff11ee87eb02dd315de9d7fe6db7185" class="collapse collapse-content"><p></p>

在自定义JavaScript处添加以下代码：

```javascript
window.onkeydown = function (e) {
            // 屏蔽ctrl+s 保存
            if (e.ctrlKey && e.keyCode == 83) {
                alert('禁止使用ctrl+s');
                e.preventDefault();
                e.returnValue = false;
                return false;
            }
            // 屏蔽ctrl+p 打印
            if (e.ctrlKey && e.keyCode == 80) {
                alert('禁止使用ctrl+p');
                e.preventDefault();
                e.returnValue = false;
                return false;
            }
}
/*防止12*/
document.onkeydown = function() {
    if (window.event && window.event.keyCode == 123) {
        layer.msg("o(*Q▽Q*)o求求惹，不要在扒孩子惹呜呜呜...");
        event.keyCode = 0;
        event.returnValue = false
    }
};
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4a52601f11c862b6bd8cf7bb917e834a64" aria-expanded="true"><div class="accordion-toggle"><span style="">修改右键菜单</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4a52601f11c862b6bd8cf7bb917e834a64" class="collapse collapse-content"><p></p>

在自定义输出body 尾部的HTML代码添加：

```html
<script src="https://cdn.jsdelivr.net/gh/WarHutXinSong/WarHut@1.0.0.1/assets/js/layer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <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="https://www.jacksonlee.work/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
            <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
            <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
            <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
            <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
            <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></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);

```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-cc2423075aa01bb77e818a58703b7ff910" aria-expanded="true"><div class="accordion-toggle"><span style="">添加SSL信息验证</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-cc2423075aa01bb77e818a58703b7ff910" class="collapse collapse-content"><p></p>

在自定义输出body 尾部的HTML代码添加：

```html
<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;">
    <span class="external-link"><a class="no-external-link" href="https://myssl.com/此处为你的网址?from=mysslid" target="_blank"><i data-feather="external-link"></i><img src="https://static.myssl.com/res/images/myssl-id.png" alt="" style="width:100%;height:100%" style=""></a></span>
</div>
```

# 参考链接

<button class=" btn m-b-xs btn-light  " onclick="window.open('https://zhuanlan.zhihu.com/p/669313234','_blank')">Typecho好看的后台主题FreshUi</button>

正文到此结束