Handsome 主题大升级（五）修改文件

主题整体细节设置以及美化方案

Handsome主题这部分要小心哦，做好备份！！！！

修改文件

这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份~

首页新年倒计时

[collapse status=”false” title=”首页新年倒计时”]将如下代码加到 开发者设置-首页列表最前方广告位即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!-- 首页倒计时 -->
<style>
    .gn_box {
        border: none;
        border-radius: 15px;
    }

    .gn_box {
        padding: 10px 14px;
        margin: 10px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #fff;
    }

    #t_d {
        color: #982585;
        font-size: 18px;
    }

    #t_h {
        color: #8f79c1;
        font-size: 18px;
    }

    #t_m {
        color: #65b4b5;
        font-size: 18px;
    }

    #t_s {
        color: #83caa3;
        font-size: 18px;
    }
</style>
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>2</font>
        <font color=#A3005C>3</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"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span
                id="t_s"> 秒</span></div>
    </center>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2023/01/01 00:00:00');   // 这里是明年第一天时间
            var NowTime = new Date('2022/8/25 23:02:01');    // 这里是当前时间 自己修改
            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);
            var day = document.getElementById("t_d");
            if (day != null) {
                day.innerHTML = d + " 天";
            }
            var hour = document.getElementById("t_h");
            if (hour != null) {
                hour.innerHTML = h + " 时";
            }
            var min = document.getElementById("t_m");
            if (min != null) {
                min.innerHTML = m + " 分";
            }
            var sec = document.getElementById("t_s");
            if (sec != null) {
                sec.innerHTML = s + " 秒";
            }
        }
        setInterval(getRTime, 1000);   
    </script>
</div>

[/collapse]

左侧插入菜单自定义伸缩框列表

[collapse status=”false” title=”左侧插入菜单自定义伸缩框”]

打开 Handsome/componet/aside.php文件，在大概第126行代码的下面添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<li>
    <a data-no-instant class="auto">
        <span class="pull-right  text-muted">
            <i class="fa icon-fw fa-angle-right text"></i>
            <i class="fa icon-fw fa-angle-down text-active"></i>
        </span>
        <i class="iconfont icon-c-classification"></i>
        <span><?php _me("伸缩框标题") ?></span>
    </a>

    //需要几条这三行复制多少遍
       <ul class="nav nav-sub dk">
        <li><span class="external-link"><a class="no-external-link" href="https://example.com" target="_blank"><i data-feather="external-link"></i><span>XXXXX网站</span></a></span></li>
       </ul>

</li>

[/collapse]

左侧下拉框

[collapse status=”false” title=”左侧下拉框”]

修改/usr/themes/handsome/component/aside.php文件
在125行* >上面添加以下代码

[tabs]
[tab name=”示例一：” active=”true”]

默认打开下拉框并在本页面打开链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 <!--左侧下拉框-->
  <a class="auto">
  <li class="active">
  <span class="pull-right text-muted">
  <i class="fontello icon-fw fontello-angle-right text"></i>
  <i class="fontello icon-fw fontello-angle-down text-active"></i>
  </span>
  <i class="glyphicon glyphicon-link"></i>
  <span>工具</span></a>
  <ul class="nav nav-sub dk">
  <li class="nav-sub-header">
  <a data-no-instant="">
  <span>工具</span></a>
  </li>
 <!--网站-->
  <li>
  <a href="https://sunpma.com/other/douyin" class="auto" target="_blank">
  <i class="glyphicon glyphicon-link"></i>
  <span>抖音解析下载</span></a>
  </li>
  <li>
  <a href="https://sunpma.com/other/musicss" class="auto" target="_blank">
  <i class="glyphicon glyphicon-link"></i>
  <span>音乐解析下载</span></a>
  </li>
  </ul>
  </li>
<!--下拉框结束-->

[/tab]
[tab name=”示例二”]

默认关闭下拉框并在新页面打开链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--左侧下拉框-->
  <li>
  <a class="auto">
  <span class="pull-right text-muted">
  <i class="fontello icon-fw fontello-angle-right text"></i>
  <i class="fontello icon-fw fontello-angle-down text-active"></i>
  </span>
  <i class="glyphicon glyphicon-link"></i>
  <span>工具</span></a>
  <ul class="nav nav-sub dk">
  <li class="nav-sub-header">
  <a data-no-instant="">
  <span>工具</span></a>
  </li>
 <!--网站-->
  <li>
  <a href="https://sunpma.com/other/douyin" class="auto" target="_blank">
  <i class="glyphicon glyphicon-link"></i>
  <span>抖音解析下载</span></a>
  </li>
  <li>
  <a href="https://sunpma.com/other/musicss" class="auto" target="_blank">
  <i class="glyphicon glyphicon-link"></i>
  <span>音乐解析下载</span></a>
  </li>
  </ul>
  </li>
<!--下拉框结束-->

[/tab]
[/tabs]

[/collapse]

去除顶部博客名称

[collapse status=”false” title=”去除顶部博客名称”]

修改/usr/themes/handsome/index.php文件，位于公告位置下方
删除以下代码:

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

[/collapse]

心情文字居中

[collapse status=”false” title=”心情文字居中”]

修改 /usr/themes/handsome/index.php文件，位于公告位置下方:

1
2
3
<header class="bg-light lter b-b wrapper-md">
替换成
<header class="bg-light lter b-b wrapper-md" style="text-align:center">

[/collapse]

背景云雾特效

[collapse status=”false” title=”背景云雾特效”]

[tabs]
[tab name=”第一步” active=”true”]

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

1
2
3
<!--背景云雾特效-->
{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)}}
<!--云雾特效结束-->

[/tab]
[tab name=”第二步”]

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

1
2
3
4
5
6
7
8
<!--背景云雾特效-->
    <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>
<!--云雾特效结束-->

[/tab]
[/tabs]

[/collapse]

给正文添加结束标识

[collapse status=”false” title=”给正文添加结束标识”]

[tabs]
[tab name=”效果图” active=”true”]

效果就是像本博客的每篇博文正文下面有一个好看的END标识。

[/tab]

[tab name=”第二步”]

首先打开 网站根目录 /usr/themes/handsome的post.php文件
找到 options->adContentPost != ""): ?>这行代码，在其上方(紧贴着这行代码)的空白位置，添加以下代码：

1
2
3
4
5
<!--内容结束分割线-->
<div class="tt-fenge-end">
    <span>End</span>
</div>
<!--/ 内容结束分割线-->

[/tab]

[tab name=”第三步”]

并在改好保存后，在 自定义CSS处添加以下代码：

1
2
3
4
5
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}

[/tab]

[/tabs]

[/collapse]

后台登陆界面美化

[collapse status=”false” title=”后台登陆界面美化”]效果图：

方法：

  1. 用压缩包内的 login.php文件替换掉 /admin/login.php文件
  2. 将压缩包内的 style文件夹上传到 /admin/文件夹下
  3. 修改 login.php第 35行，把“TuJun’Blog”替换成自己的信息

[button color=”success” icon=”glyphicon glyphicon-arrow-down” url=”https://wwwc.lanzoue.com/i8EN628gdnpi“ type=””]后台登陆界面美化模板[/button]

[/collapse]

正文下方添加版权声明

[collapse status=”false” title=”正文下方添加版权声明”]

[tabs]
[tab name=”第一步” active=”true”]

打开 网站根目录 /usr/themes/handsome的post.php文件：

这个代码同样也是在 options->adContentPost != ""): ?>的上方
添加位置和上面正文结束功能的添加位置相同，找到后添加以下代码(你也可以添加到其他你认为合适的地方)：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--知识共享许可协议-->
    <div class="tt-license">
        <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：
            <?php $this->title() ?>
        </p>
        <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：
            <?php $this->permalink() ?>
        </p>
        <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用 <a rel="license"
                href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
        <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
    </div>
<!-- / 知识共享许可协议-->

[/tab]
[tab name=”第二步”]

添加好后，在 自定义CSS中添加以下代码：

1
2
3
4
5
6
/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}

[/tab]
[/tabs]

[/collapse]

右侧添加人生倒计时(岁月不待人)

[collapse status=”false” title=”右侧添加人生倒计时(岁月不待人)”]

[tabs]
[tab name=”第1步” active=”true”]

首先找到网站根目录 /usr/themes/handsome/component
打开 sidebar.php文件，找到 这一行内容。
在该内容向上两行找到 ，在该行紧接着下面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 时间倒计时代码开始 -->
<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none text-md">
        <?php _me("岁月不待人") ?>
    </h5>
    <div class="sidebar sidebar-count">
        <div class="content">
            <div class="item" id="dayProgress">
                <div class="title">今日已经过去<span></span>小时</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-1"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="weekProgress">
                <div class="title">这周已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-2"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="monthProgress">
                <div class="title">本月已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-3"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="yearProgress">
                <div class="title">今年已经过去<span></span>个月</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-4"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 时间倒计时代码结束 -->

改好后保存退出

[/tab]
[tab name=”第2步”]

进入网站根目录 /usr/themes/handsome/assets/js/的文件夹

创建一个名为 timeinfo.js的文件，并将以下代码放进该文件后，保存并退出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function init_life_time() {
function getAsideLifeTime() {
    /* 当前时间戳 */
    let nowDate = +new Date();
    /* 今天开始时间戳 */
    let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
    /* 今天已经过去的时间 */
    let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
    /* 今天已经过去的时间比 */
    let todayPassHoursPercent = (todayPassHours / 24) * 100;
    $('#dayProgress .title span').html(parseInt(todayPassHours));
    $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
    $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
    /* 当前周几 */
    let weeks = {
        0: 7,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6
        };
    let weekDay = weeks[new Date().getDay()];
    let weekDayPassPercent = (weekDay / 7) * 100;
    $('#weekProgress .title span').html(weekDay);
    $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
    $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
    let year = new Date().getFullYear();
    let date = new Date().getDate();
    let month = new Date().getMonth() + 1;
    let monthAll = new Date(year, month, 0).getDate();
    let monthPassPercent = (date / monthAll) * 100;
    $('#monthProgress .title span').html(date);
    $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
    $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
    let yearPass = (month / 12) * 100;
    $('#yearProgress .title span').html(month);
    $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
    $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
    }
    getAsideLifeTime();
    setInterval(() => {
        getAsideLifeTime();
    }, 1000);
    }
    init_life_time()

[/tab]

[tab name=”第3步”]

以下代码放在 后台-外观设置-开发者设置-自定义CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* 时间流逝 */
.sidebar-count .content {
    padding: 15px
}
 
.sidebar-count .content .item {
    margin-bottom: 15px
}
 
.sidebar-count .content .item:last-child {
    margin-bottom: 0
}
 
.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}

[/tab]

[tab name=”第4步”]

最后一步,将以下代码放在 后台-外观设置-开发者设置-自定义输出body尾部：

1
2
<!-- 时间流逝 -->  
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

步骤均完成后，即可去查看效果了~

[/tab]
[/tabs]

[/collapse]

信息统计增加全站字数、在线人数、响应耗时和访客总数

[collapse status=”false” title=”信息统计增加全站字数、在线人数、响应耗时和访客总数”]

[tabs]
[tab name=”第一步” active=”true”]

首先将以下代码加到 /usr/themes/handsome/libs/Content.php中，放在 class Content的上面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/*访问总量*/
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

    /*响应时间*/
    function timer_start() {
        global $timestart;
        $mtime = explode( ' ', microtime()  );
        $timestart = $mtime[1] + $mtime[0];
        return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
        global $timestart, $timeend;
        $mtime = explode( ' ', microtime()  );
        $timeend = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision  );
        $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display  ) {
            echo $r;
        }
        return $r;
    }
        /**
     * 全站字数
     */
    function allOfCharacters() {
        $chars = 0;
        $db = Typecho_Db::get();
        $select = $db ->select('text')->from('table.contents');
        $rows = $db->fetchAll($select);
        foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
        $unit = '';
        if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
        else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
        $out = sprintf('%.2lf %s',$chars, $unit);
        return $out;
    } 
/**
     * 在线人数
     */
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    }

[/tab]
[tab name=”第二步”]

然后在 /usr/themes/handsome/component/sidebar.php文件内，找到合适和位置添加以下代码： 注：处就是添加代码的地方，找到你想加的位置添加代码即可：

1
2
3
4
5
6
7
8
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
     <span class="badge
 pull-right"><?php echo theAllViews(); ?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
     <span class="badge
 pull-right"><?php echo timer_stop(); ?></span><?php _me("响应耗时") ?></li>

[/tab]
[/tabs]

[/collapse]

底部版权美化

[collapse status=”false” title=”底部版权美化”]

[tabs]
[tab name=”第一步” active=”true”]

左侧底部放在 后台-开发者设置-博客底部左侧信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--左侧底部-->
<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://www.5k5b.com" target="_blank">
        <span class="badge-value bg-blue">©2022 5k5b.</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">豫ICP备</span>
    <a href="http://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2020030958号</span></a>
</div>
<div class="github-badge">
    <img src="https: //cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png" style="float:left;" />
    <span class="badge-subject">豫公网安备</span>
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132" target="_blank">
        <span class="badge-value bg-green">41032602000132号</span></a>
</div>

[/tab]
[tab name=”第二步”]

右侧底部放在 后台-开发者设置-博客底部右侧信息：

1
2
3
4
5
6
7
8
9
10
11
<!--右侧底部-->
<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://www.95vps.com/aff/20" target="_blank">
        <span class="badge-value bg-blue">桔子数据提供服务</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://www.ihewro.com/" target="_blank">
        <span class="badge-value bg-orange">Handsome</span></a>
</div>

[/tab]

[tab name=”第三步”]

css放在 主题设置-自定义css内：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*底部页脚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-green {
  background-color: #3bca6e
}

[/tab]

[tab name=”第四步”]

把下面代码放在主题目录 usr/themes/handsome/component/footer.php内大概在 117行，覆盖原来的即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
        <span class="pull-right hidden-xs text-ellipsis">
            <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
        </span>
        <span class="text-ellipsis">
            <?php
            $this->options->BottomleftInfo(); ?>
        </span>
    </div>

</footer>

[/tab]
[/tabs]

[/collapse]

评论添加一键打卡功能

[collapse status=”false” title=”评论添加一键打卡功能”]

[tabs]
[tab name=”第一步” active=”true”]

找到 /usr/themes/handsome/component/comments.php

原代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="comment-form-comment form-group">
                            <label class="padder-v-sm" for="comment"><?php _me("评论") ?>
                                <span class="required text-danger">*</span></label>
                            <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                            <div class="OwO padder-v-sm"></div>
                            <?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
                            <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                            data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                                <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                                <div class="secret_comment_check">
                                    <label class="i-switch i-switch-sm bg-info m-b-ss m-r">
                                        <input type="checkbox" id="secret_comment_checkbox">
                                        <i></i>
                                    </label>
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>

替换为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="comment-form-comment form-group">
    <label for="comment"><?php _me("评论") ?>
        <span class="required text-danger">*</span></label>
        <span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
    <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
    <div class="OwO" style="display: inline;"></div>
    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
    <div class="secret_comment" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
        <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
        <div class="secret_comment_check">
            <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                <input type="checkbox" id="secret_comment_checkbox">
                <i></i>
            </label>
        </div>
    </div>
</div>

[/tab]
[tab name=”第二步”]

主题设置-自定义JavaScript加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--评论 打卡、赞、踩 功能-->
function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 文章写得不错，给你点个赞，继续加油哈！")
    },
    cai: function() {
        a(c, "骚年，我怀疑你写了一篇假的文章！")
    }
};

[/tab]

[tab name=”第三步”]

主题设置-自定义CSS加入如下代码：

1
2
3
4
5
6
7
/*评论一键打卡、赞、踩 */
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

完成后刷新网页就可以了。

[/tab]

[/tabs]

[/collapse]

评论一键赞、踩、语录、打卡

[collapse status=”false” title=”评论一键赞、踩、语录、打卡”]

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!--评论 打卡、赞、踩 功能-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED，用于存放编辑器功能

// ... (existing code)

// 定义一个函数 a，用于在文本框中插入文字
function a(a, b, c) {
  if (document.selection) {
    a.focus();
    sel = document.selection.createRange();
    c ? (sel.text = b + sel.text + c) : (sel.text = b);
    a.focus();
  } else if (a.selectionStart || "0" == a.selectionStart) {
    var l = a.selectionStart;
    var m = a.selectionEnd;
    var n = m;
    c
      ? (a.value =
          a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length))
      : (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length));
    c ? (n += b.length + c.length) : (n += b.length - m + l);
    l == m && c && (n -= c.length);
    a.focus();
    a.selectionStart = n;
    a.selectionEnd = n;
  } else {
    a.value += b + c;
    a.focus();
  }
}

window.SIMPALED.Editor = {
 daka: function() {
    var b = new Date().toLocaleTimeString();
    var c = document.getElementById("comment") || 0;
    a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~<br>");

    // 将光标移到文本最后
    if (c.setSelectionRange) {
      var len = c.value.length;
      c.setSelectionRange(len, len);
      c.focus();
    } else if (c.createTextRange) {
      var range = c.createTextRange();
      range.collapse(false);
      range.select();
      c.focus();
    }
  },

  zan: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 这篇文章展现了作者深邃的思想和独特的观点，令人赞叹不已。 ::coolapk:96:: <br>",
      " 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动，实在值得赞美。 ::coolapk:96:: <br>",
      " 作者以敏锐的洞察力和真挚的情感，将文字融为一体，这种写作技巧令人赞赏。 ::coolapk:96:: <br>",
      " 这篇文章展现了作者的才华和学识，无不让人对其赞美有加。 ::coolapk:96:: <br>",
      " 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。 ::coolapk:96:: <br> ",
      " 作者的文字流畅而富有节奏感，令人为之倾倒，实在是一篇令人赞美的佳作。 ::coolapk:96:: <br>",
      " 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ::coolapk:96:: <br>",
      " 这篇文章的独到见解和新颖观点，让人对作者的创意赞美有加。 ::coolapk:96:: <br>",
      " 作者运用生动的比喻和细腻的描写，让读者仿佛身临其境，实在是一种令人赞美的写作艺术。 ::coolapk:96:: <br>",
      " 这篇文章的深情笔触和真挚感受让人深深感叹，实在是一篇值得赞美的美文。 ::coolapk:96:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  cai: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 我是来替大家批评博主的，我是来批评的，这篇文章的结构有点混乱，需要更好地组织和展开内容。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，作者的表达能力有待提高，有些地方表述不够清晰，读者可能会感到困惑。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章的语法错误较多，建议仔细检查并进行修改。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，内容有些空洞，需要更多具体的例子或细节来支撑观点。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章缺乏逻辑，有些段落之间的衔接不够自然。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，作者的观点没有充分论证，需要更多的证据和理由来支持主张。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章中出现了一些拼写错误和用词不当的情况，建议进行仔细校对。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，语言表达过于简单，可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，这篇文章的主题不够突出，需要更好地明确中心思想。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章缺乏吸引人的开头，建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  yulu: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 有你在的日子才是我的日常。 ::dunjiao:302:: <br>",
      " 夹在我女友与前女友与青梅竹马间的果然是修罗场！ ::dunjiao:302:: <br>",
      " 既然如此，就再努力一次吧。别在这里愁眉不展，也不要再自欺欺人，重新来过！ ::dunjiao:302:: <br>",
      " 比自己,比梦想更重要的东西永远都存在着... ::dunjiao:302:: <br>",
      " 嘛，那又怎么样呢？ ::dunjiao:302:: <br>",
      " 自身不先改变的话，一切都不会改变。 ::dunjiao:302:: <br>",
      " 比起有一百个朋友，不如有个比一百人还要重要的真心朋友。 ::dunjiao:302:: <br>",
      " 我有在反省，但我不后悔。 ::dunjiao:302:: <br>",
      " 要超越过去与悲伤，用坚强和笑容去开拓明天。 ::dunjiao:302:: <br>",
      " 男人许下的诺言就一定要遵守。 ::dunjiao:302:: <br>",
      " 没有回忆就去创造回忆，没有道路就去开辟道路。 ::dunjiao:302:: <br>",
      " 我敬你是条汉子！ ::dunjiao:302:: <br>",
      " 不相信自己的人，连努力的价值都没有。 ::dunjiao:302:: <br>",
      " 微风摇曳着窗帘，夕阳斜射入教室，在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友，不行吗？」 ::dunjiao:302:: <br>",
      " 就算是沉落地面的太阳，只要夜晚过了一定会再度升起，不管有什么痛苦或难过的事，跟今天截然不同的明天也一定会到来。 ::dunjiao:302:: <br>",
      " 我的腿让我停下，可是心却不允许我那么做。 ::dunjiao:302:: <br>",
      " 生活就像超级女生，走到最后的都是纯爷们。 ::dunjiao:302:: <br>",
      " 我要拼，装上假牙也要拼！ ::dunjiao:302:: <br>",
      " 想要成为无论多么悲伤的时候，也能够漂亮微笑的人吧。 ::dunjiao:302:: <br>",
      " 人们只是用好人来称呼对自己有用的人而以，不存在对所有人都有用的人。 ::dunjiao:302:: <br>",
      " 烈焰中舞动的火花，将赐予邪恶异性交往以天罚。 ::dunjiao:302:: <br>",
      " 无论乌云有多浓厚，星星也一定还在，只是暂时看不到了而已。 ::dunjiao:302:: <br>",
      " 不相信人咬不到肚脐的，咬破肚脐去死如何？ ::dunjiao:302:: <br>",
      " 人一生会遇到约万人，两个人相爱的概率是.。所以你不爱我，我不怪你。 ::dunjiao:302:: <br>",
      " 不管看到什么样的过去，都请不要迷失自己，不管你变成什么样子，我都是你的同伴。 ::dunjiao:302:: <br>",
      " 心，可是很重的。 ::dunjiao:302:: <br>",
      " 我爱上的人，称我为怪叔叔 ::dunjiao:302:: <br>",
      " 慕君之心，至死方休。 ::dunjiao:302:: <br>",
      " 虚伪的眼泪，会伤害别人，虚伪的笑容，会伤害自己。 ::dunjiao:302:: <br>",
      " 若隐若现才是艺术！ ::dunjiao:302:: <br>",
      " 生我何用？不能欢笑。灭我何用？不减狂骄。 ::dunjiao:302:: <br>",
      " 就是因为你不好，才要留在你身边，给你幸福。 ::dunjiao:302:: <br>",
      " 呐，我们好像是，被宇宙和地球拆散的恋人似的。 ::dunjiao:302:: <br>",
      " 你会梦游，我会磨牙，我们晚上一起去吓人吧！ ::dunjiao:302:: <br>",
      " 或许只需一滴露水，便能守护这绽放的花朵。 ::dunjiao:302:: <br>",
      " 自己永远是孤单的，但你可以让其他人变得不孤单。 ::dunjiao:302:: <br>",
      " 和哥哥的便当比起来夜空的薯片就像大便一样！只会给我大便的大便夜空是笨蛋～笨蛋～ ::dunjiao:302:: <br>",
      " 我手中的魔法，是守护挚爱的力量，是坚定这个信念所必须的力量，我一定会拯救你的，无论在何时、何地。 ::dunjiao:302:: <br>",
      " 要改变别人的心真是件很难办的事，不过改变自己要容易一点。 ::dunjiao:302:: <br>",
      " 风筝的线你随时可以放开，只是别盼望我会回来。 ::dunjiao:302:: <br>",
      " 与你的生命等价的东西，这个世界上根本没有。 ::dunjiao:302:: <br>",
      " 君子可寓意于物，但不可留意于物。 ::dunjiao:302:: <br>",
      " 最好的感觉，是有人懂你的欲言又止。 ::dunjiao:302:: <br>",
      " 看似美好的东西，往往藏着陷阱。 ::dunjiao:302:: <br>",
      " 爱,其实很简单，困难的是去接受它。 ::dunjiao:302:: <br>",
      " 喜欢大胸只是本能，喜欢贫乳才是审美。 ::dunjiao:302:: <br>",
      " 二次元什么的我本来是不感冒的，直到我的膝盖中了一箭。 ::dunjiao:302:: <br>",
      " 你才是⑨！你全家都是⑨！ ::dunjiao:302:: <br>",
      " 努力是不会背叛自己的，虽然梦想有时会背叛自己。 ::dunjiao:302:: <br>",
      " 面对就好，去经历就好。 ::dunjiao:302:: <br>",
      " 我从小就害怕虫子 ::dunjiao:302:: <br>",
      " 做不到的话，不过就是一死 。但是，赢了就能活下去，要是不战斗就赢不了。 ::dunjiao:302:: <br>",
      " 既然认准这条路，何必去打听要走多久。 ::dunjiao:302:: <br>",
      " 研表究明，汉字的序顺并不定一能影阅响读，比如当你看完这句话后，才发这现里的字全是都乱的。 ::dunjiao:302:: <br>",
      " 少年心意，一如明月松间的青石流水，那些年里看到了，却不懂。 ::dunjiao:302:: <br>",
      " 明明只是活着，哀伤却无处不在⋯⋯ ::dunjiao:302:: <br>",
      " 少罗嗦，你还不如虫子呢！ ::dunjiao:302:: <br>",
      " 天空是连着的，如果我们也能各自发光的话，无论距离有多远，都能看到彼此努力的身影。 ::dunjiao:302:: <br>",
      " 别人恋爱不成功，你连暗恋都不成功！ ::dunjiao:302:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
};

代码内 ::dunjiao:302:: ::coolapk:96:: ::dunjiao:315::等是表情文件，根据自己的表情内容修改，文字内容是随机输出的，也可以根据自己喜欢更改。
打开 Handsome主题目录下的 component/comments.php文件,大概172行，找到并删除如下内容:

1
2
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                            <div class="OwO padder-v-sm"></div>

替换成如下代码：

1
2
3
4
5
6
7
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
  
    <div class="OwO" style="display: inline;"></div>
    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();"><div class="OwO-logo"><span class="smile-icons"><i class="iconfont icon-daohanglan-01"></i></span><span class="OwOlogotext">打卡</span></div></div>
    <div class="OwO" title="语录" style="display: inline;" onclick="javascript:SIMPALED.Editor.yulu();"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">语录</span></div></div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>

[/collapse]

页脚处添加网站运行时间

[collapse status=”false” title=”页脚处添加网站运行时间”]注意这个功能我是在上一个页脚美化的基础上添加的，如果没有添加页脚美化功能，该运行时间的排版会出现问题。当然你也可以改成你喜欢的样子~
代码放到 后台-开发者设置-博客底部左侧信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|  
<!-- 建站时间 -->
<div class="github-badge">
<span class="badge-subject">运行时间</span>
<span class="badge-value bg-green"><span id="span_dt_dt"></span></span>
<script>
    /*建站时间*/
    function show_date_time() {
        window.setTimeout("show_date_time()", 1e3);
        var BirthDay = new Date("2021/09/11 22:30:00"),
        today = new Date,
        timeold = today.getTime() - BirthDay.getTime(),
        msPerDay = 864e5,
        e_daysold = timeold / msPerDay,
        daysold = Math.floor(e_daysold),
        e_hrsold = 24 * (e_daysold - daysold),
        hrsold = Math.floor(e_hrsold),
        e_minsold = 60 * (e_hrsold - hrsold),
        minsold = Math.floor(60 * (e_hrsold - hrsold)),
        seconds = Math.floor(60 * (e_minsold - minsold));
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
    }
    show_date_time();
</script>

[/collapse]

右侧添加全屏显示按钮

[collapse status=”false” title=”右侧添加全屏显示按钮”]

/usr/themes/handsome/component/fotter.php文件，找到“返回顶部”这段代码 大概在96行左右，在下方开始添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div class="f10 panel panel-default" style="position:fixed;top:450px;right:-240px;z-index:99;width:240px;-webkit-transition:all .2s;transition:all .2s;">
    <button id="f10" class="fix-padding btn btn-default rightSettingBtn  pos-abt 
          border-radius-half-left"
            data-toggle="tooltip" data-placement="left" data-original-title="<?php _me("全屏切换") ?>" style="top:44px;border:none;box-shadow:-3px 0 2px 0 rgba(0,0,0,.02);background:rgba(255,255,255,.3) !important;color:#840606 !important;border-top-right-radius:0;border-bottom-right-radius:0;left:-43px;padding:10px 15px;position:absolute;">
        <span class="icon1"  id = "span1" style="display:;margin-left:1px;">
            <i width="13px" height="13px" data-feather="maximize"></i>
        </span>
        <span class="icon2" id="span2" style="display:none;">
            <i width="13px" height="13px" data-feather="minimize"></i>
        </span>
                      <!--<i class="fontello fontello-chevron-circle-up" aria-hidden="true"></i>-->
    </button>
    <style>
/*        .btn-default {*/
            /*所有按钮颜色*/
/*  color: #840606 !important*/
/*}*/
/*    </style>*/
    <script>
  
    var button = document.getElementById('f10');
    var myspan1 =document.getElementById('span1');
    var myspan2 = document.getElementById('span2');
    button.onclick = function(){
    document.fullscreen ? closeMyFullScreen() : myFullScreen();
    if(document.fullscreen )
    {
        // var name= document.getElementById('name');
        // name.style.cssText = "border: 1px solid #95FF00;padding: 3px;"
         myspan2.style.cssText="display:none;"
         myspan1.style.cssText="display:;"
    } else 
    {
         myspan1.style.cssText="display:none;"
         myspan2.style.cssText="display:;"
    }
};
// 全屏
function myFullScreen() {
    var docElm = document.documentElement;
    //W3C 
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox 
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等 
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11 
    else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}
 // 退出全屏
function closeMyFullScreen() {
 
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}
    </script>
</div>

[/collapse]

自定义字体

[collapse status=”false” title=”自定义字体”]首先我们去字体天下网站找到一款自己喜欢的字体，记得一定要是免费商用的，防止有版权问题~
下载好后会发现是一个 .tff扩展名的文件，我们再去字体转换网站里将 .tff转换为 .woff格式的文件
并将转换后的文件上传到你网站目录里的某个位置，默认是 usr/themes/handsome/assets/fonts文件夹里。
前往 外观设置-开发者设置-自定义css中添加以下代码：

1
2
3
/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}

后来发现有插件可以实现一键切换字体，很方便，放在最下面插件里了。

[/collapse]

超链接特效

[collapse status=”false” title=”超链接特效”]

[tabs]
[tab name=”第一步” active=”true”]

修改 /usr/themes/handsome/assets/css/handsome.min.css删掉下面的内容：

1
2
3
4
5
6
comment-content-true a:hover,.wrapper-lg .entry-content a:hover{
color:#222;border-bottom-color:#222
}
.comment-content-true a,.wrapper-lg .entry-content a{
color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all
}

[/tab]
[tab name=”第二步”]

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.comment-content-true a:not(.light-link),
.wrapper-lg .entry-content a:not(.light-link) {
    position: relative;
    margin: auto 4px;
    color: #23b7e5;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: inherit;
    width: inherit;
}
.comment-content-true a:not(.light-link):hover,
.comment-content-true a:not(.light-link):focus,
.wrapper-lg .entry-content a:not(.light-link):hover,
.wrapper-lg .entry-content a:not(.light-link):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link)::before,
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::after {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: -1;
    box-sizing: content-box;
    padding: 0 4px;
    width: 100%;
    height: 100%;
    content: '';
}
.comment-content-true a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::before {
    background-color: #23b7e5;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.comment-content-true a:not(.light-link):hover::before,
.comment-content-true a:not(.light-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::after {
    border-bottom: 1px solid #23b7e5;
}
.content-copyright {
    overflow: hidden;
}

[/tab]
[/tabs]

[/collapse]

在博客顶部添加心知天气

[collapse status=”false” title=”在博客顶部添加心知天气”]首先去心知天气官网注册账号并申请API
之后在 /usr/themes/handsome/component/headnav.php文件中的动态日历中 下方添加以下代码
注意将API信息改成自己的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 知心天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "公钥",
    "hash": "密钥"
});
tpwidget("show");</script>
<!-- 知心结束-->

[/collapse]

新年喝彩图

[collapse status=”false” title=”新年喝彩图”]代码添加到 自定义CSS中：

1
2
3
4
5
6
7
8
9
10
11
12
/*新年喝彩图*/
#new_year{
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    left: 0;
    right: 0;
    bottom: 0;
}
#post-panel header.wrapper-md.bg-light{
position:relative;
}

找到 usr/theme/handsome/index.php在以下图中位置（大概37行左右）添加如下代码：

1
<img id="new_year" src="https://img04.sogoucdn.com/app/a/200692/1315_138_feedback_f61e2617c522404ab4ee69b5cfba0657.png" draggable="false">

[/collapse]

更改一言接口

[collapse status=”false” title=”更改一言接口”]假如你是个古诗词爱好者，你可能希望将handsome自带的一言换为换成古诗词版的，刚好已经有人开发出这样的api了，我们直接调用即可。今日诗词官网

我比较喜欢的一点是，它会自动获取访客ip，然后根据ip所在地、访问时间等信息来推荐相关的古诗词（比如如果你在上海的晚上打开网站，它就会推送有关江南、夜雨的古诗词），很妙。

具体的推荐方式 点我查看。

主题根目录下打开 index.php，找到以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>

更改为以下代码：

1
2
3
<small class="text-muted letterspacing indexWords">
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></small>

当然，别忘了在主题后台启用 主题增强功能->增强功能开关->启用一言接口

[/collapse]

文章页面显示标签云

[collapse status=”false” title=”文章页面显示标签云”]

编辑/usr/themes/handsome/component/sidebar.php文件
在上面添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--文章显示标签云-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
    <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>
    <div class="tags l-h-2x">
        <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
        <?php if($tags->have()): ?>
             <?php while ($tags->next()): ?>
                <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
</section>
<!--显示标签云结束-->

[/collapse]

右侧栏加入每日pixiv热榜图片

[collapse status=”false” title=”右侧栏加入每日pixiv热榜图片”]

Github效果：

主题设置 – 开发者设置 – 全局右侧广告位添加以下代码：

1
<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:240px; height:380px;"></iframe>

然后修改 handsome/component/sidebar.php
找到 ，将”广告”二字修改为“P站每日热门”

[/collapse]

文章页面页脚插入one一言

[collapse status=”false” title=”文章页面页脚插入one一言”]

代码放置 开发者设置-文章页脚广告位：

1
2
3
4
5
6
7
8
9
<small class="text-muted letterspacing indexWords" style="font-family:monaco;text-align:center;">
<div >
<br>
<font style="font-size:20px;font-family:YouYuan;opacity:0.8;">◈</font>
<br>
<script type="text/javascript" src="https://api.xygeng.cn/one/get/" >
</script>
</div>
</small>

[/collapse]

文章底部添加相关文章推荐

[collapse status=”false” title=”文章底部添加相关文章推荐”]

[tabs]
[tab name=”效果图” active=”true”]

[/tab]
[tab name=”第一步”]

在 function.php底部新增一个函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getHotComments($limit = 5){
$db = Typecho_Db::get();
$result = $db->fetchAll($db->select()->from('table.contents')
->where('status = ?','publish')
->where('type = ?', 'post')
->where('created <= unix_timestamp(now())', 'post')
->limit($limit)
->order('commentsNum', Typecho_Db::SORT_DESC)
);
if($result){
foreach($result as $val){
$val = Typecho_Widget::widget('Widget_Abstract_Contents')->push($val);
$post_title = htmlspecialchars($val['title']);
$permalink = $val['permalink'];
echo '<li><a href="'.$permalink.'" title="'.$post_title.'" target="_blank">'.$post_title.'</a></li>';
}
}
}

[/tab]

[/tab]
[tab name=”第二步”]

在 post.php文件中的大概一百多行左右吧，上一篇下一篇内容下方，如图：

1
2
3
4
5
6
<!--上一篇&下一篇-->
       <nav class="m-t-lg m-b-lg">
        <ul class="pager">
        <?php thePrev($this); ?>   <?php theNext($this); ?>
        </ul>
       </nav>

在这段代码下方增加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!--相关文章推荐 + 热门文章推荐-->
<div class="smallscreen ellipsis" style="display:flex;padding-left:2px;"> 
 <!--相关文章推荐-->
     <div div class="tab-content ellipsis smallscreen" style="width:50%;flex:1;margin-right:1px">
     <!--<div class="tab-content clear"> -->
     <h4 class="widget-title m-t-none text-md"><?php _me("※相关文章推荐※ ") ?></h4>
     <div id="relatedPosts" >
     <ul class="list-group-item  nav nav-list">
         <?php $this->related(6)->to($relatedPosts); ?>
         <?php if ($relatedPosts->have()): ?>
             <?php while ($relatedPosts->next()): ?>
             <li >
                 <a href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?></a>
             </li>

             <?php endwhile; ?>
         <?php else : ?>
         <li>暂无相关推荐</li>
         <?php endif; ?>
     </ul>
     </div>
     </div>
     <br >
   
<!--热门文章推荐-->
     <div div class="tab-content ellipsis smallscreen" style="width:50%;flex:1;margin-right:1px">
     <!--<div class="tab-content clear"> -->
     <h4 class="widget-title m-t-none text-md"><?php _me("※热评文章推荐※") ?></h4>
     <div id="relatedPosts" >
     <ul class="list-group-item  nav nav-list myart ellipsis" style="width:100%">
     <li> <?php getHotComments('6');?>  </li>
     </ul>
     </div>
     </div> 
     <br >
 </div> 
 <br >
   
<!--最新文章推荐-->
     <div class="tab-content clear">
     <h4 class="widget-title m-t-none text-md"><?php _me("※最新文章推荐※") ?>
     </h4>
     <div id="relatedPosts" >
     <ul class="list-group-item  nav nav-list">
         <?php
         $recent = $this->widget('Widget_Contents_Post_Recent','pageSize=6');
         if($recent->have()):
         while($recent->next()):
         ?>
     <li><a href="<?php $recent->permalink();?>"><?php $recent->title();?></a></li>
     <?php endwhile; endif;?>

     </ul>
     </div>
     </div>

[/tab]

[/tabs]

[/collapse]

右侧广告位 插入今日诗词一言

[collapse status=”false” title=”右侧广告位 插入今日诗词一言”]

代码放置 开发者设置-全局右侧边栏广告位：

1
2
3
4
5
6
7
8
9
<small class="text-muted letterspacing indexWords" style="font-family:monaco;text-align:center;">
<div>
<font style="font-size:20px;font-family:YouYuan;opacity:0.8;">◈</font>
<br><br>
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8">
</script>
</div>
</small>

之后去 /usr/themes/handsome/component/sidebar.php大约在 162行左右：

将 <h5 class="widget-title m-t-none"><?php _me("广告") ?></h5>

替换成：<!--<h5 class="widget-title m-t-none"><?php _me("广告") ?></h5>-->

也就是将这一行代码注释掉就行了。

[/collapse]

文章底部添加标签

[collapse status=”false” title=”文章底部添加标签”]

在当前文章内容尾部添加该文章的标签，在主题目录下的 /usr/themes/handsome/post.php文件中的适当地方加入以下代码。

1
2
<!--文章底部添加标签-->
标签：<?php $this->tags('，', true, 'no tag'); ?>

[/collapse]

位置地球

[collapse status=”false” title=”位置地球”]

方法：进入 handsome后台，选择 “更换外观--设置外观--开发者设置--全局右侧边栏广告位”，将复制的代码粘贴即可

1
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5wrl2mbvawy&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&rs=80" async="async"></script>

替换广告字：打开 “/usr/themes/handsome/component/sidebar.php”文件，搜索“广告”二字，改为“位置地球”。

[/collapse]

鼠标点击特效-富强、民主文字样式

[collapse status=”false” title=”鼠标点击特效-富强、民主文字样式”]

将以下代码放在主题的 handsome/component/footer.php中的 </body>之前即可。
或者直接在 后台外观设置→开发者设置→自定义输出body尾部的HTML代码处粘贴即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--鼠标点击特效-->
<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>

[/collapse]

删除首页右上角闲言碎语

[collapse status=”false” title=”删除首页右上角闲言碎语（那个标识-新-）”]文件路径：/handsome/component/headnav.php

删除源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php if (!$hideTalkItem): ?>
            <!--闲言碎语-->
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle">
                    <i data-feather="twitch"></i>
                    <span class="visible-xs-inline">
              <?php _me("闲言碎语") ?>
              </span>
                    <span class="badge badge-sm up bg-danger pull-right-xs"><?php
                        $read_id = Typecho_Cookie::get('user_read_id');
                        $latest_time_id = Typecho_Cookie::get('latest_time_id');
                        //$latest_time_id赋值应该在列表加载的后面
//                        if (empty($latest_time_id)){
//                            $latest_time_id = 999999;
//                        }
                        if (empty($read_id)){
                            $read_id = -1;
                        }
                        if (!empty($read_id) && !empty($latest_time_id)){
                            $not_read = $latest_time_id - $read_id;
                            if ($not_read > 0){
                                _me("新");
                            }
                        }
                        ?></span>
                </a>
                <!-- dropdown -->
                <div class="dropdown-menu w-xl animated fadeInUp">
                    <div class="panel bg-white">
                        <div class="panel-heading b-light bg-light">
                            <strong>
                                <?php _me("闲言碎语") ?>
                            </strong>
                        </div>
                        <div class="list-group" id="smallRecording">
                            <?php
                            $slug = "cross";    //页面缩略名
                            $limit = 3;    //调用数量
                            $length = 140;    //截取长度
                            $ispage = true;    //true 输出slug页面评论，false输出其它所有评论
                            $isGuestbook = $ispage ? " = " : " <> ";

                            $db = $this->db;    //Typecho_Db::get();
                            $options = $this->options;    //Typecho_Widget::widget('Widget_Options');

                            $page = $db->fetchRow($db->select()->from('table.contents')
                                ->where('table.contents.created < ?', $options->gmtTime)
                                ->where('table.contents.slug = ?', $slug));

                            if ($page) {
                                $type = $page['type'];
                                $routeExists = (NULL != Typecho_Router::get($type));
                                $page['pathinfo'] = $routeExists ? Typecho_Router::url($type, $page) : '#';
                                $page['permalink'] = Typecho_Common::url($page['pathinfo'], $options->index);

                                $comments = $db->fetchAll($db->select()->from('table.comments')
                                    ->where('table.comments.status = ?', 'approved')
                                    ->where('table.comments.created < ?', $options->gmtTime)
                                    ->where('table.comments.type = ?', 'comment')
                                    ->where('table.comments.parent = ?', '0')
                                    ->where('table.comments.cid ' . $isGuestbook . ' ?', $page['cid'])
                                    ->order('table.comments.created', Typecho_Db::SORT_DESC)
                                    ->limit($limit));
                                $index = 0;
                                foreach ($comments AS $comment) {
                                    if ($index == 0){
                                        Typecho_Cookie::set('latest_time_id', $comment['coid']);
                                    }
                                    $index ++;
                                    $content = Content::postCommentContent(Markdown::convert($comment['text']),$this->user->hasLogin(),"","","",true);
                                    $content = Content::returnExceptShortCodeContent(trim(strip_tags($content)));
                                    if ($content == ""){
                                        $content = _mt("点击查看详情");
                                    }

                                    echo '<a href="'.BLOG_URL_PHP.'cross.html" class="list-group-item"><span class="clear block m-b-none words_contents">'.Content::excerpt($content,200).'<br><small class="text-muted">'.Utils::formatDate($comments,$comment['created'],
                                            $this->options->commentDateFormat).'</small></span></a>';
                                }
                            } else {
                                echo '<a target="_blank" href="'.BLOG_URL.'admin/write-page.php" class="list-group-item"><span class="clear block m-b-none">这是一条默认的说说，如果你看到这条动态，请去后台新建独立页面，地址填写cross,自定义模板选择时光机。具体说明请参见主题的使用攻略。<br><small class="text-muted">'.date("F jS, Y \a\t h:i a",time()+($this->options->timezone - idate("Z"))).'</small></span></a>';
                            }
                            ?>
                        </div>
                    </div>
                </div>
            </li>
            <!--/闲言碎语-->
        <?php endif; ?>

[/collapse]

将搜索框移动到右侧

[collapse status=”false” title=”将搜索框移动到右侧”]

  • 文件路径：/handsome/component/headnav.php
  • 源代码：
1
2
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-left shift" method="post"
        role="search">
  • 修改为：
1
2
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-right shift" method="post"
          role="search">

[/collapse]

修复搜索框按钮

[collapse status=”false” title=”修复搜索框按钮”]

Handsome主题的搜索框按钮一直有问题，按不下去不能正常使用，可以按以下方法修复
打开/usr/themes/handsome/component/headnav.php文件
搜索search_submit然后将整行替换成如下代码：

<span id="search_submit" class="transparent input-group-btn" onclick=jumpForSearch(search_input.value)>

然后在文件的最后面添加如下代码后保存即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--/开始修复搜索按钮-->
<script type="text/javascript">
function jumpForSearch(search_ct){
  if(search_ct.length>0){
    $.pjax({ 
    url: "https://"+document.domain+'/search/'+search_ct, 
    container: '#content',
    fragment: '#content',
    timeout: 8000
    });
  }
}
</script>
<!--/修复搜索按钮结束-->

[/collapse]

修改游客评论头像

[collapse status=”false” title=”修改游客评论头像”]

首先打开在网站在目录下找到handsome主题里的component/comments.php文件，
大概在65行左右，将以下代码：

1
2
3
<a class="pull-left thumb-sm" rel="nofollow">
…
</a>

替换为：

1
2
3
4
5
6
7
<a class="pull-left thumb-sm" rel="nofollow">
         <?php if ($comments->authorId == $comments->ownerId): ?>
         <img nogallery src="自己的头像链接" class="avatar-40 photo img-circle" style="height:40px!important; width: 40px!important;">
         <?php else: ?>
         <img nogallery src="用户的头像链接" class="avatar-40 photo img-circle" style="height:40px!important; width: 40px!important;">
         <?php endif; ?>
     </a>

[/collapse]

404页面添加自动返回首页功能

[collapse status=”false” title=”404页面添加自动返回首页功能”]

找到 /usr/themes/handsome文件夹内的 404.php文件并打开。
在 h1 class="text-shadow text-white">404这一行下面加入以下代码：

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

再把下面的代码加入 404.php文件内最底下的 </body>前面：

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

[/collapse]

在文章顶部添加百度是否收录

[collapse status=”false” title=”在文章顶部添加百度是否收录”]

使用方法
在 handsome/functions.php最底部添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1){
    echo "百度已收录";
}
else{
    echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
        return 1;
    } else {
        return -1;
    }
}

然后在 handsome/post.php在63行左右，即这个分类li标签的下方：

1
2
<!--分类-->
             <li class="meta-categories"><span class="post-icons"><i data-feather="hash"></i></span><span class="sr-only"><?php _me("分类") ?>：</span> <span class="meta-value" id="post_category"><?php $this->category(' '); ?></span></li>

添加代码：

1
2
<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>

[/collapse]

网页悬浮二维码

[collapse status=”false” title=”网页悬浮二维码”]

首先在 /usr/themes/handsome/assets/js目录内创建一个 qrcode.min.js文件，将以下代码加入

1
var QRCode;!function(){function t(t){this.mode=r.MODE_8BIT_BYTE,this.data=t,this.parsedData=[];for(var e=0,o=this.data.length;e<o;e++){var i=[],n=this.data.charCodeAt(e);n>65536?(i[0]=240|(1835008&n)>>>18,i[1]=128|(258048&n)>>>12,i[2]=128|(4032&n)>>>6,i[3]=128|63&n):n>2048?(i[0]=224|(61440&n)>>>12,i[1]=128|(4032&n)>>>6,i[2]=128|63&n):n>128?(i[0]=192|(1984&n)>>>6,i[1]=128|63&n):i[0]=n,this.parsedData.push(i)}this.parsedData=Array.prototype.concat.apply([],this.parsedData),this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function e(t,e){this.typeNumber=t,this.errorCorrectLevel=e,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}t.prototype={getLength:function(t){return this.parsedData.length},write:function(t){for(var e=0,r=this.parsedData.length;e<r;e++)t.put(this.parsedData[e],8)}},e.prototype={addData:function(e){var r=new t(e);this.dataList.push(r),this.dataCache=null},isDark:function(t,e){if(t<0||this.moduleCount<=t||e<0||this.moduleCount<=e)throw new Error(t+","+e);return this.modules[t][e]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(t,r){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var o=0;o<this.moduleCount;o++){this.modules[o]=new Array(this.moduleCount);for(var i=0;i<this.moduleCount;i++)this.modules[o][i]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(t,r),this.typeNumber>=7&&this.setupTypeNumber(t),null==this.dataCache&&(this.dataCache=e.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,r)},setupPositionProbePattern:function(t,e){for(var r=-1;r<=7;r++)if(!(t+r<=-1||this.moduleCount<=t+r))for(var o=-1;o<=7;o++)e+o<=-1||this.moduleCount<=e+o||(this.modules[t+r][e+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var t=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=g.getLostPoint(this);(0==r||t>o)&&(t=o,e=r)}return e},createMovieClip:function(t,e,r){var o=t.createEmptyMovieClip(e,r);this.make();for(var i=0;i<this.modules.length;i++)for(var n=1*i,a=0;a<this.modules[i].length;a++){var s=1*a;this.modules[i][a]&&(o.beginFill(0,100),o.moveTo(s,n),o.lineTo(s+1,n),o.lineTo(s+1,n+1),o.lineTo(s,n+1),o.endFill())}return o},setupTimingPattern:function(){for(var t=8;t<this.moduleCount-8;t++)null==this.modules[t][36]&&(this.modules[t][37]=t%2==0);for(var e=8;e<this.moduleCount-8;e++)null==this.modules[6][e]&&(this.modules[6][e]=e%2==0)},setupPositionAdjustPattern:function(){for(var t=g.getPatternPosition(this.typeNumber),e=0;e<t.length;e++)for(var r=0;r<t.length;r++){var o=t[e],i=t[r];if(null==this.modules[o][i])for(var n=-2;n<=2;n++)for(var a=-2;a<=2;a++)this.modules[o+n][i+a]=-2==n||2==n||-2==a||2==a||0==n&&0==a}},setupTypeNumber:function(t){for(var e=g.getBCHTypeNumber(this.typeNumber),r=0;r<18;r++){var o=!t&&1==(e>>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(r=0;r<18;r++){o=!t&&1==(e>>r&1);this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=o}},setupTypeInfo:function(t,e){for(var r=this.errorCorrectLevel<<3|e,o=g.getBCHTypeInfo(r),i=0;i<15;i++){var n=!t&&1==(o>>i&1);i<6?this.modules[i][38]=n:i<8?this.modules[i+1][39]=n:this.modules[this.moduleCount-15+i][40]=n}for(i=0;i<15;i++){n=!t&&1==(o>>i&1);i<8?this.modules[8][this.moduleCount-i-1]=n:i<9?this.modules[8][15-i-1+1]=n:this.modules[8][15-i-1]=n}this.modules[this.moduleCount-8][41]=!t},mapData:function(t,e){for(var r=-1,o=this.moduleCount-1,i=7,n=0,a=this.moduleCount-1;a>0;a-=2)for(6==a&&a--;;){for(var s=0;s<2;s++)if(null==this.modules[o][a-s]){var h=!1;n<t.length&&(h=1==(t[n]>>>i&1)),g.getMask(e,o,a-s)&&(h=!h),this.modules[o][a-s]=h,-1==--i&&(n++,i=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},e.PAD0=236,e.PAD1=17,e.createData=function(t,r,o){for(var i=m.getRSBlocks(t,r),n=new _,a=0;a<o.length;a++){var s=o[a];n.put(s.mode,4),n.put(s.getLength(),g.getLengthInBits(s.mode,t)),s.write(n)}var h=0;for(a=0;a<i.length;a++)h+=i[a].dataCount;if(n.getLengthInBits()>8*h)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*h+")");for(n.getLengthInBits()+4<=8*h&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*h||(n.put(e.PAD0,8),n.getLengthInBits()>=8*h));)n.put(e.PAD1,8);return e.createBytes(n,i)},e.createBytes=function(t,e){for(var r=0,o=0,i=0,n=new Array(e.length),a=new Array(e.length),s=0;s<e.length;s++){var h=e[s].dataCount,l=e[s].totalCount-h;o=Math.max(o,h),i=Math.max(i,l),n[s]=new Array(h);for(var u=0;u<n[s].length;u++)n[s][u]=255&t.buffer[u+r];r+=h;var f=g.getErrorCorrectPolynomial(l),d=new p(n[s],f.getLength()-1).mod(f);a[s]=new Array(f.getLength()-1);for(u=0;u<a[s].length;u++){var c=u+d.getLength()-a[s].length;a[s][u]=c>=0?d.get(c):0}}var m=0;for(u=0;u<e.length;u++)m+=e[u].totalCount;var _=new Array(m),v=0;for(u=0;u<o;u++)for(s=0;s<e.length;s++)u<n[s].length&&(_[v++]=n[s][u]);for(u=0;u<i;u++)for(s=0;s<e.length;s++)u<a[s].length&&(_[v++]=a[s][u]);return _};for(var r={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},o={L:1,M:0,Q:3,H:2},i=0,n=1,a=2,s=3,h=4,l=5,u=6,f=7,g={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(t){for(var e=t<<10;g.getBCHDigit(e)-g.getBCHDigit(g.G15)>=0;)e^=g.G15<<g.getBCHDigit(e)-g.getBCHDigit(g.G15);return(t<<10|e)^g.G15_MASK},getBCHTypeNumber:function(t){for(var e=t<<12;g.getBCHDigit(e)-g.getBCHDigit(g.G18)>=0;)e^=g.G18<<g.getBCHDigit(e)-g.getBCHDigit(g.G18);return t<<12|e},getBCHDigit:function(t){for(var e=0;0!=t;)e++,t>>>=1;return e},getPatternPosition:function(t){return g.PATTERN_POSITION_TABLE[t-1]},getMask:function(t,e,r){switch(t){case i:return(e+r)%2==0;case n:return e%2==0;case a:return r%3==0;case s:return(e+r)%3==0;case h:return(Math.floor(e/2)+Math.floor(r/3))%2==0;case l:return e*r%2+e*r%3==0;case u:return(e*r%2+e*r%3)%2==0;case f:return(e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}},getErrorCorrectPolynomial:function(t){for(var e=new p([1],0),r=0;r<t;r++)e=e.multiply(new p([1,d.gexp(r)],0));return e},getLengthInBits:function(t,e){if(1<=e&&e<10)switch(t){case r.MODE_NUMBER:return 10;case r.MODE_ALPHA_NUM:return 9;case r.MODE_8BIT_BYTE:case r.MODE_KANJI:return 8;default:throw new Error("mode:"+t)}else if(e<27)switch(t){case r.MODE_NUMBER:return 12;case r.MODE_ALPHA_NUM:return 11;case r.MODE_8BIT_BYTE:return 16;case r.MODE_KANJI:return 10;default:throw new Error("mode:"+t)}else{if(!(e<41))throw new Error("type:"+e);switch(t){case r.MODE_NUMBER:return 14;case r.MODE_ALPHA_NUM:return 13;case r.MODE_8BIT_BYTE:return 16;case r.MODE_KANJI:return 12;default:throw new Error("mode:"+t)}}},getLostPoint:function(t){for(var e=t.getModuleCount(),r=0,o=0;o<e;o++)for(var i=0;i<e;i++){for(var n=0,a=t.isDark(o,i),s=-1;s<=1;s++)if(!(o+s<0||e<=o+s))for(var h=-1;h<=1;h++)i+h<0||e<=i+h||0==s&&0==h||a==t.isDark(o+s,i+h)&&n++;n>5&&(r+=3+n-5)}for(o=0;o<e-1;o++)for(i=0;i<e-1;i++){var l=0;t.isDark(o,i)&&l++,t.isDark(o+1,i)&&l++,t.isDark(o,i+1)&&l++,t.isDark(o+1,i+1)&&l++,0!=l&&4!=l||(r+=3)}for(o=0;o<e;o++)for(i=0;i<e-6;i++)t.isDark(o,i)&&!t.isDark(o,i+1)&&t.isDark(o,i+2)&&t.isDark(o,i+3)&&t.isDark(o,i+4)&&!t.isDark(o,i+5)&&t.isDark(o,i+6)&&(r+=40);for(i=0;i<e;i++)for(o=0;o<e-6;o++)t.isDark(o,i)&&!t.isDark(o+1,i)&&t.isDark(o+2,i)&&t.isDark(o+3,i)&&t.isDark(o+4,i)&&!t.isDark(o+5,i)&&t.isDark(o+6,i)&&(r+=40);var u=0;for(i=0;i<e;i++)for(o=0;o<e;o++)t.isDark(o,i)&&u++;return r+=10*(Math.abs(100*u/e/e-50)/5)}},d={glog:function(t){if(t<1)throw new Error("glog("+t+")");return d.LOG_TABLE[t]},gexp:function(t){for(;t<0;)t+=255;for(;t>=256;)t-=255;return d.EXP_TABLE[t]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},c=0;c<8;c++)d.EXP_TABLE[c]=1<<c;for(c=8;c<256;c++)d.EXP_TABLE[c]=d.EXP_TABLE[c-4]^d.EXP_TABLE[c-5]^d.EXP_TABLE[c-6]^d.EXP_TABLE[c-8];for(c=0;c<255;c++)d.LOG_TABLE[d.EXP_TABLE[c]]=c;function p(t,e){if(void 0==t.length)throw new Error(t.length+"/"+e);for(var r=0;r<t.length&&0==t[r];)r++;this.num=new Array(t.length-r+e);for(var o=0;o<t.length-r;o++)this.num[o]=t[o+r]}function m(t,e){this.totalCount=t,this.dataCount=e}function _(){this.buffer=[],this.length=0}p.prototype={get:function(t){return this.num[t]},getLength:function(){return this.num.length},multiply:function(t){for(var e=new Array(this.getLength()+t.getLength()-1),r=0;r<this.getLength();r++)for(var o=0;o<t.getLength();o++)e[r+o]^=d.gexp(d.glog(this.get(r))+d.glog(t.get(o)));return new p(e,0)},mod:function(t){if(this.getLength()-t.getLength()<0)return this;for(var e=d.glog(this.get(0))-d.glog(t.get(0)),r=new Array(this.getLength()),o=0;o<this.getLength();o++)r[o]=this.get(o);for(o=0;o<t.getLength();o++)r[o]^=d.gexp(d.glog(t.get(o))+e);return new p(r,0).mod(t)}},m.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12,7,37,13],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],m.getRSBlocks=function(t,e){var r=m.getRsBlockTable(t,e);if(void 0==r)throw new Error("bad rs block @ typeNumber:"+t+"/errorCorrectLevel:"+e);for(var o=r.length/3,i=[],n=0;n<o;n++)for(var a=r[3*n+0],s=r[3*n+1],h=r[3*n+2],l=0;l<a;l++)i.push(new m(s,h));return i},m.getRsBlockTable=function(t,e){switch(e){case o.L:return m.RS_BLOCK_TABLE[4*(t-1)+0];case o.M:return m.RS_BLOCK_TABLE[4*(t-1)+1];case o.Q:return m.RS_BLOCK_TABLE[4*(t-1)+2];case o.H:return m.RS_BLOCK_TABLE[4*(t-1)+3];default:return}},_.prototype={get:function(t){var e=Math.floor(t/8);return 1==(this.buffer[e]>>>7-t%8&1)},put:function(t,e){for(var r=0;r<e;r++)this.putBit(1==(t>>>e-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(t){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),t&&(this.buffer[e]|=128>>>this.length%8),this.length++}};var v=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];function C(){var t=!1,e=navigator.userAgent;if(/android/i.test(e)){t=!0;var r=e.toString().match(/android ([0-9]\.[0-9])/i);r&&r[1]&&(t=parseFloat(r[1]))}return t}var w=function(){var t=function(t,e){this._el=t,this._htOption=e};return t.prototype.draw=function(t){var e=this._htOption,r=this._el,o=t.getModuleCount();Math.floor(e.width/o),Math.floor(e.height/o);function i(t,e){var r=document.createElementNS("http://www.w3.org/2000/svg",t);for(var o in e)e.hasOwnProperty(o)&&r.setAttribute(o,e[o]);return r}this.clear();var n=i("svg",{viewBox:"0 0 "+String(o)+" "+String(o),width:"100%",height:"100%",fill:e.colorLight});n.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),r.appendChild(n),n.appendChild(i("rect",{fill:e.colorLight,width:"100%",height:"100%"})),n.appendChild(i("rect",{fill:e.colorDark,width:"1",height:"1",id:"template"}));for(var a=0;a<o;a++)for(var s=0;s<o;s++)if(t.isDark(a,s)){var h=i("use",{x:String(s),y:String(a)});h.setAttributeNS("http://www.w3.org/1999/xlink","href","#template"),n.appendChild(h)}},t.prototype.clear=function(){for(;this._el.hasChildNodes();)this._el.removeChild(this._el.lastChild)},t}(),D="svg"===document.documentElement.tagName.toLowerCase()?w:"undefined"==typeof CanvasRenderingContext2D?function(){var t=function(t,e){this._el=t,this._htOption=e};return t.prototype.draw=function(t){for(var e=this._htOption,r=this._el,o=t.getModuleCount(),i=Math.floor(e.width/o),n=Math.floor(e.height/o),a=['<table style="border:0;border-collapse:collapse;">'],s=0;s<o;s++){a.push("<tr>");for(var h=0;h<o;h++)a.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:'+i+"px;height:"+n+"px;background-color:"+(t.isDark(s,h)?e.colorDark:e.colorLight)+';"></td>');a.push("</tr>")}a.push("</table>"),r.innerHTML=a.join("");var l=r.childNodes[0],u=(e.width-l.offsetWidth)/2,f=(e.height-l.offsetHeight)/2;u>0&&f>0&&(l.style.margin=f+"px "+u+"px")},t.prototype.clear=function(){this._el.innerHTML=""},t}():function(){function t(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}if(this._android&&this._android<=2.1){var e=1/window.devicePixelRatio,r=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(t,o,i,n,a,s,h,l,u){if("nodeName"in t&&/img/i.test(t.nodeName))for(var f=arguments.length-1;f>=1;f--)arguments[f]=arguments[f]*e;else void 0===l&&(arguments[1]*=e,arguments[2]*=e,arguments[3]*=e,arguments[4]*=e);r.apply(this,arguments)}}var o=function(t,e){this._bIsPainted=!1,this._android=C(),this._htOption=e,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=e.width,this._elCanvas.height=e.height,t.appendChild(this._elCanvas),this._el=t,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.alt="Scan me!",this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return o.prototype.draw=function(t){var e=this._elImage,r=this._oContext,o=this._htOption,i=t.getModuleCount(),n=o.width/i,a=o.height/i,s=Math.round(n),h=Math.round(a);e.style.display="none",this.clear();for(var l=0;l<i;l++)for(var u=0;u<i;u++){var f=t.isDark(l,u),g=u*n,d=l*a;r.strokeStyle=f?o.colorDark:o.colorLight,r.lineWidth=1,r.fillStyle=f?o.colorDark:o.colorLight,r.fillRect(g,d,n,a),r.strokeRect(Math.floor(g)+.5,Math.floor(d)+.5,s,h),r.strokeRect(Math.ceil(g)-.5,Math.ceil(d)-.5,s,h)}this._bIsPainted=!0},o.prototype.makeImage=function(){this._bIsPainted&&function(t,e){var r=this;if(r._fFail=e,r._fSuccess=t,null===r._bSupportDataURI){var o=document.createElement("img"),i=function(){r._bSupportDataURI=!1,r._fFail&&r._fFail.call(r)};return o.onabort=i,o.onerror=i,o.onload=function(){r._bSupportDataURI=!0,r._fSuccess&&r._fSuccess.call(r)},void(o.src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==")}!0===r._bSupportDataURI&&r._fSuccess?r._fSuccess.call(r):!1===r._bSupportDataURI&&r._fFail&&r._fFail.call(r)}.call(this,t)},o.prototype.isPainted=function(){return this._bIsPainted},o.prototype.clear=function(){this._oContext.clearRect(0,0,this._elCanvas.width,this._elCanvas.height),this._bIsPainted=!1},o.prototype.round=function(t){return t?Math.floor(1e3*t)/1e3:t},o}();function A(t,e){for(var r=1,i=function(t){var e=encodeURI(t).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return e.length+(e.length!=t?3:0)}(t),n=0,a=v.length;n<=a;n++){var s=0;switch(e){case o.L:s=v[n][0];break;case o.M:s=v[n][42];break;case o.Q:s=v[n][43];break;case o.H:s=v[n][44]}if(i<=s)break;r++}if(r>v.length)throw new Error("Too long data");return r}(QRCode=function(t,e){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:o.H},"string"==typeof e&&(e={text:e}),e)for(var r in e)this._htOption[r]=e[r];"string"==typeof t&&(t=document.getElementById(t)),this._htOption.useSVG&&(D=w),this._android=C(),this._el=t,this._oQRCode=null,this._oDrawing=new D(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)}).prototype.makeCode=function(t){this._oQRCode=new e(A(t,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(t),this._oQRCode.make(),this._el.title=t,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=o}(),"undefined"!=typeof module&&(module.exports=QRCode);

打开 /Handsome/compents/sidebar.php文件, 找到 <? php if (IS_TOC): ?>(140行左右)字样，在此行前面添加以下代码

1
2
3
4
<div id="qrcode" style="color:white;" class="tools-item" title="阅读转移"><span>手机观看</span><br />
    <div id="qrcode-img"></div><i style="font-size:32px;bottom:20px" class="glyphicon glyphicon-phone"
        aria-hidden="false"></i>
</div>

在 sidebar.php的最后 <? php endif; ?> 前添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style>
    /* 工具栏 - start */
    .tools-item {
        position: fixed;
        bottom: 20px;
        right: 247px;
        width: 56px;
        height: 45px;
        text-align: center;
    }

    .tools-item > i {
        display: inline;
        line-height: 45px;
    }

    #qrcode-img {
        position: fixed;
        bottom: 70px;
        right: 280px;
        display: none;
        box-shadow: 0 0 20px #B6DFE9;
        padding:25px;
        background: #fff;
    }
</style>
<script type="text/javascript" src="你自己的qrcode.min.js路径"></script>
<script type="text/javascript">
    $(function(){
        var system = { 
            win: false, 
            mac: false, 
            xll: false
        }; 
        //检测平台 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        if (system.win || system.mac || system.xll) { 
        } else {
            $("#qrcode").attr("hidden","hidden");
        } 
        var url = encodeURI(location.href);
        var select = true;
        $('#qrcode').hover(function() {
            if(select) {
                $('#qrcode-img').empty();
                new QRCode(document.getElementById("qrcode-img"), {
                    text: url,
                    width: 180,
                    height: 180,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.L
                });
                $('#qrcode-img').show();
                select = false;
            } else {
                $('#qrcode-img').hide();
                select = true;
            }
        });
    });
</script>

将 qrcode.min.js文件上传到合适位置后将以上代码中的链接修改即可

[/collapse]