Handsome主题的修改教程

Author： Bluerain
发布时间：November 18, 2020
1234views
No comments
11835字数
Categories： Typecho美化

1、首页文章版式圆角化

本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置自定义CSS。
圆角大小可修改15px数值

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

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

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

2、首页文章图片获取焦点放大

本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置自定义CSS。
放大的时间和大小自行修改以下数值

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

3、首页文章列表悬停上浮

主题设置 - 开发者设置 - 自定义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);
}

4、文章内头图和图片悬停放大并超出范围

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

5、首页头像转动并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置自定义CSS。
转动快慢和头像大小自行修改数值

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

6、首页头图悬停放大并超出范围

主题设置 - 开发者设置 - 自定义CSS添加以下代码。

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

7、文章标题居中

本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置自定义CSS。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

8、首页文章版式阴影化

本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置自定义CSS。

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

/*如果也想使盒子四周也有阴影，加上以下代码*/
.app.container {
    box-shadow: 0 0 30px rgba(51, 51, 51, 0.35);
}

9、自定义滚动条滑块

本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置自定义CSS。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

10、鼠标点击特效

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

#字体自行修改
<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>

11、复制弹窗提示

在模板目录的header.php文件中引入layer资源文件代码

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

主题设置 - 开发者设置 - 自定义JavaScript 中添加以下代码

document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};

12、底部页脚版权美化

将以下添加至自定义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
}

将以下内容添加至开发者设置-博客底部左侧信息,将内容改成自己的

<div class="github-badge">
<a href="./" title="©2019&nbsp;Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;Alvin</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://beian.miit.gov.cn/" target="_blank" title="苏ICP备 xxx号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">苏ICP备</span><span class="badge-value bg-green">xxx号</span>
</a>
</div>

将以下内容添加至开发者设置-博客底部右侧信息

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

修改handsome\component\footer.php文件
删除代码以下代码（大概第八行左右）：

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

继续删除以下代码

&copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;

保存设置后刷新你的博客

13、复制代码自带版权说明

将以下JS代码放在post.php的文章内页php

<!--复制代码自带版权说明-->
<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>
<!--复制代码自带版权说明-->

14、背景云雾特效

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

<!--背景云雾特效-->
{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}figure{margin:0}.absolute-bg{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}.fog{position:relative;height:100vh;width:100%;position:fixed;top:0;z-index:-1}.fog__container{position:absolute;height:100%;width:100%;overflow:hidden}.fog__img{position:absolute;height:100vh;width:300vw}.fog__img--first{background:url("https://ae01.alicdn.com/kf/Ud713fee99c5d4f2bac69dd0469a95b13e.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 60s linear infinite;animation:marquee 60s linear infinite}.fog__img--second{background:url("https://ae01.alicdn.com/kf/Ub5631e112d7742cbb3cab47a304b80f4T.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 40s linear infinite;animation:marquee 40s linear infinite}@media screen and (max-width:767px){.fog__img--first{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}.fog__img--second{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}}@-webkit-keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}@keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}
<!--云雾特效结束-->

编辑/usr/themes/handsome/component/footer.php文件
在<?php $this->footer(); ?>上面添加以下代码

<!--背景云雾特效-->
    <section class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>
<!--云雾特效结束-->

15、春节倒计时代码

主题设置 - 开发者设置 - 首页列表最前方广告位添加以下代码。

<!--倒计时开始-->
<div class="gn_box">
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>1</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">157 天</span>
<span id="t_h">9 时</span>
<span id="t_m">7 分</span>
<span id="t_s">42 秒</span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2021/02/11 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
<!--倒计时结束-->

Last modification：January 8th, 2021 at 08:45 pm

如果觉得我的文章对你有用，请随意赞赏

Handsome主题的修改教程

Bluerain • 2020 年 11 月 18 日

1、首页文章版式圆角化

本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置自定义CSS。
圆角大小可修改15px数值

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

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

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

2、首页文章图片获取焦点放大

本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置自定义CSS。
放大的时间和大小自行修改以下数值

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

3、首页文章列表悬停上浮

主题设置 - 开发者设置 - 自定义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);
}

4、文章内头图和图片悬停放大并超出范围

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

5、首页头像转动并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置自定义CSS。
转动快慢和头像大小自行修改数值

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

6、首页头图悬停放大并超出范围

主题设置 - 开发者设置 - 自定义CSS添加以下代码。

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

7、文章标题居中

本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置自定义CSS。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

8、首页文章版式阴影化

本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置自定义CSS。

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(223, 223, 223, 0.35);
}

/*如果也想使盒子四周也有阴影，加上以下代码*/
.app.container {
    box-shadow: 0 0 30px rgba(51, 51, 51, 0.35);
}

9、自定义滚动条滑块

本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置自定义CSS。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

10、鼠标点击特效

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

#字体自行修改
<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>

11、复制弹窗提示

在模板目录的header.php文件中引入layer资源文件代码

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

主题设置 - 开发者设置 - 自定义JavaScript 中添加以下代码

document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};

12、底部页脚版权美化

将以下添加至自定义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
}

将以下内容添加至开发者设置-博客底部左侧信息,将内容改成自己的

<div class="github-badge">
<a href="./" title="©2019&nbsp;Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;Alvin</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://beian.miit.gov.cn/" target="_blank" title="苏ICP备 xxx号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">苏ICP备</span><span class="badge-value bg-green">xxx号</span>
</a>
</div>

将以下内容添加至开发者设置-博客底部右侧信息

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

修改handsome\component\footer.php文件
删除代码以下代码（大概第八行左右）：

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

继续删除以下代码

&copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;

保存设置后刷新你的博客

13、复制代码自带版权说明

将以下JS代码放在post.php的文章内页php

<!--复制代码自带版权说明-->
<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>
<!--复制代码自带版权说明-->

14、背景云雾特效

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

<!--背景云雾特效-->
{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}figure{margin:0}.absolute-bg{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}.fog{position:relative;height:100vh;width:100%;position:fixed;top:0;z-index:-1}.fog__container{position:absolute;height:100%;width:100%;overflow:hidden}.fog__img{position:absolute;height:100vh;width:300vw}.fog__img--first{background:url("https://ae01.alicdn.com/kf/Ud713fee99c5d4f2bac69dd0469a95b13e.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 60s linear infinite;animation:marquee 60s linear infinite}.fog__img--second{background:url("https://ae01.alicdn.com/kf/Ub5631e112d7742cbb3cab47a304b80f4T.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 40s linear infinite;animation:marquee 40s linear infinite}@media screen and (max-width:767px){.fog__img--first{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}.fog__img--second{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}}@-webkit-keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}@keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}
<!--云雾特效结束-->

编辑/usr/themes/handsome/component/footer.php文件
在<?php $this->footer(); ?>上面添加以下代码

<!--背景云雾特效-->
    <section class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>
<!--云雾特效结束-->

15、春节倒计时代码

主题设置 - 开发者设置 - 首页列表最前方广告位添加以下代码。

<!--倒计时开始-->
<div class="gn_box">
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>1</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">157 天</span>
<span id="t_h">9 时</span>
<span id="t_m">7 分</span>
<span id="t_s">42 秒</span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2021/02/11 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
<!--倒计时结束-->

1、首页文章版式圆角化

2、首页文章图片获取焦点放大

3、首页文章列表悬停上浮

4、文章内头图和图片悬停放大并超出范围

5、首页头像转动并放大

6、首页头图悬停放大并超出范围

7、文章标题居中

8、首页文章版式阴影化

9、自定义滚动条滑块

10、鼠标点击特效

11、复制弹窗提示

12、底部页脚版权美化

13、复制代码自带版权说明

14、背景云雾特效

15、春节倒计时代码