handsome 主题魔改<一>

Author： Asdrt852
发布时间：July 24, 2018
4857views
7 comments
6640字数
Categories：主题魔改

1、增加鼠标特效

效果见我博客鼠标点击特效，具体的修改方法为：
将下框中的代码放在主题的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>

2、首页头像转动并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。效果参考我博客左侧头像。
仍为本主题使用，操作方式为：将以下代码添加至后台主题设置自定义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
}

3、修改首页标题栏及自定义文字

此处位于首页站点公告下方，文章上方。
首先后台“设置外观” → “主题增强功能” → “增强功能开关” → 勾选“首页的标题栏下启用一言接口”。
接着去除此处的标题显示，修改方法为将下框中的代码在主题的handsome/index.php中删除。

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

4、底部版权处修改

增加建站天数及备案信息、修改原版权样式。
以我的底部样式为例，此项在主题的handsome/component/footer.php替换修改即可。
建站天数代码为<?php echo floor((time()-strtotime('2018-05-20'))/86400);?>，
其中2018-05-20请按此日期格式修改建站时间。
底部右侧的站点地图：1/2是我添加了插件sitemap和baidu_sitemap，此链接可删除或替换。

原模板文件中是这样的↓

<div class="wrapper b-t bg-light">
  <span class="pull-right hidden-xs">
  <?php $this->options->BottomInfo(); ?>
  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>
  </span>
  &copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;<?php $this->options->BottomleftInfo(); ?>
</div>

修改后的是这样的，请自行替换修改↓

 <div class="wrapper b-t bg-light">
      <span class="pull-right hidden-xs">
      <?php $this->options->BottomInfo(); ?>
      [&nbsp;&nbsp;驱动：<a href="http://www.typecho.org" target="blank">Typecho</a>&nbsp;|&nbsp;模板：<a href="https://www.ihewro.com/archives/489/" target="blank">友人C</a>&nbsp;|&nbsp;站点地图：<a href="/sitemap.xml" target="blank">1</a>&nbsp;\&nbsp;<a href="/baidu_sitemap.xml" target="blank">2</a>&nbsp;|&nbsp;备案：<a href="http://www.miibeian.gov.cn" target="blank">闽ICP备14017081号</a>&nbsp;&nbsp;]
      </span>
      [&nbsp;&nbsp;本站已安全运行<?php echo floor((time()-strtotime('2018-05-20'))/86400);?>天<?php $this->options->BottomleftInfo(); ?>&nbsp;&nbsp;]
    </div>

5、留言墙样式修改

此处修改是在梁兴健个人博客整理过来的，我觉得此样式比原版的好看，所以就按照教程修改了。
因我现在使用的主题handsome，内置留言墙，所以只要替换代码就可以了，演示查看点击此处。
修改方法是在主题的handsome/functions.php中查找如下代码，可根据头尾处搜索选取替换。

//获得读者墙
function getFriendWall()
{   $options = Typecho_Widget::widget('Widget_Options');
    $db = Typecho_Db::get();
    $period = time() - 604800; // 单位: 秒, 时间范围: 7天

    $sql_7days = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail')
        ->from('table.comments')
        ->where('status = ?', 'approved')
        ->where('created > ?', $period )
        ->where('type = ?', 'comment')
        ->where('authorId = ?', '0')
        ->where('mail != ?', $options->socialemail)   //排除自己上墙
        ->group('author')
        ->order('cnt', Typecho_Db::SORT_DESC)
        ->limit('51');    //读取几位用户的信息

    $result_7days = $db->fetchAll($sql_7days);
    $html_7days = "<h4>本周评论排行榜（仅显示前51位）</h4><br>";
    if (count($result_7days) > 0) {
        $html_7days .= '<div class=\'row\'>';
        foreach ($result_7days as $value) {
            $html_7days .= '<div class="col-lg-4 col-md-6" style="margin-bottom:5px"><a class="list-group-item" target="_blank" rel="nofollow" href="' . $value['url'] . '">' . $value['author'] . '<span class="badge badge-secondary pull-right">' . $value['cnt'] . '</span></a></div>';
        }
        $html_7days .= '</div>';
        echo $html_7days;
    }else{

    }

    $sql = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail')
        ->from('table.comments')
        ->where('status = ?', 'approved')
        ->where('type = ?', 'comment')
        ->where('authorId = ?', '0')
        ->where('mail != ?', $options->socialemail)   //排除自己上墙
        ->group('author')
        ->order('cnt', Typecho_Db::SORT_DESC)
        ->limit('51');    //读取几位用户的信息

    $result = $db->fetchAll($sql);
    $html_7days = "";
    $mostactive = "<br><h4>总评论排行榜（仅显示前51位）</h4><br>";
    if (count($result) > 0) {
        $mostactive .= '<div class=\'row\'>';
        foreach ($result as $value) {
            $mostactive .= '<div class="col-lg-4 col-md-6" style="margin-bottom:5px"><a class="list-group-item" target="_blank" rel="nofollow" href="' . $value['url'] . '">' . $value['author'] . '<span class="badge badge-secondary float-right">' . $value['cnt'] . '</span></a></div>';
        }
        $mostactive .= '</div>';
        echo $mostactive;
    }
}

这个修改也可以运用到其他模板上，修改方法：
将上面的代码加入模板文件夹的handsome/functions.php文件中，然后在模板文件中的当位置加入如下调用代码，此处需要一定的基础知识。

<?php getFriendWall(); ?>

然后需要引入bootstrap的核心css文件：

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

如果你不想用bootstrapCDN的话，可以自己写样式，只要修改handsome/functions.php里面getFriendWall()的函数输出格式即可。

版权属于：本文为原创文章，版权归 Asdrt 所有
本文链接：https://asdrt666.com/index.php/archives/1/
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

Last modification：September 18th, 2018 at 07:01 pm

If you think my article is useful to you, please feel free to appreciate

7 comments

34
June 20th, 2019 at 11:39 am

efsdfsdfds

Reply
漠子荀
April 17th, 2019 at 03:52 pm

天气是上面搞的好奇

Reply
1. Asdrt852可爱的博主
  April 29th, 2019 at 02:29 am
  
  @漠子荀
  ？？？
  
  Reply
今天不聊天
September 4th, 2018 at 02:07 pm

路过支持一下主题

Reply
Geekln
August 26th, 2018 at 12:16 am

能给个主题吗？[email protected]谢谢

Reply
Mr.ChengPing博客
August 24th, 2018 at 11:08 am

例行互访，背景好花呀，都喜欢动漫嚒？

Reply
ACG资源
August 19th, 2018 at 10:48 pm

挺好的主题。。

Reply

望月空
不错不错，学习了。
4Rou
青春版的没有千兆端口啊
灯塔博客
嘿嘿！小站不错啊
无主无名
这个不错，前一段时间我也买了个路由器。。。。但是很不好用，早知...
sss
没懂

handsome 主题魔改<一>

Asdrt852 • 2018 年 07 月 24 日

1、增加鼠标特效

效果见我博客鼠标点击特效，具体的修改方法为：
将下框中的代码放在主题的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>

2、首页头像转动并放大

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.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
}

3、修改首页标题栏及自定义文字

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

4、底部版权处修改

原模板文件中是这样的↓

<div class="wrapper b-t bg-light">
  <span class="pull-right hidden-xs">
  <?php $this->options->BottomInfo(); ?>
  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>
  </span>
  &copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;<?php $this->options->BottomleftInfo(); ?>
</div>

修改后的是这样的，请自行替换修改↓

 <div class="wrapper b-t bg-light">
      <span class="pull-right hidden-xs">
      <?php $this->options->BottomInfo(); ?>
      [&nbsp;&nbsp;驱动：<a href="http://www.typecho.org" target="blank">Typecho</a>&nbsp;|&nbsp;模板：<a href="https://www.ihewro.com/archives/489/" target="blank">友人C</a>&nbsp;|&nbsp;站点地图：<a href="/sitemap.xml" target="blank">1</a>&nbsp;\&nbsp;<a href="/baidu_sitemap.xml" target="blank">2</a>&nbsp;|&nbsp;备案：<a href="http://www.miibeian.gov.cn" target="blank">闽ICP备14017081号</a>&nbsp;&nbsp;]
      </span>
      [&nbsp;&nbsp;本站已安全运行<?php echo floor((time()-strtotime('2018-05-20'))/86400);?>天<?php $this->options->BottomleftInfo(); ?>&nbsp;&nbsp;]
    </div>

5、留言墙样式修改

//获得读者墙
function getFriendWall()
{   $options = Typecho_Widget::widget('Widget_Options');
    $db = Typecho_Db::get();
    $period = time() - 604800; // 单位: 秒, 时间范围: 7天

    $sql_7days = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail')
        ->from('table.comments')
        ->where('status = ?', 'approved')
        ->where('created > ?', $period )
        ->where('type = ?', 'comment')
        ->where('authorId = ?', '0')
        ->where('mail != ?', $options->socialemail)   //排除自己上墙
        ->group('author')
        ->order('cnt', Typecho_Db::SORT_DESC)
        ->limit('51');    //读取几位用户的信息

    $result_7days = $db->fetchAll($sql_7days);
    $html_7days = "<h4>本周评论排行榜（仅显示前51位）</h4><br>";
    if (count($result_7days) > 0) {
        $html_7days .= '<div class=\'row\'>';
        foreach ($result_7days as $value) {
            $html_7days .= '<div class="col-lg-4 col-md-6" style="margin-bottom:5px"><a class="list-group-item" target="_blank" rel="nofollow" href="' . $value['url'] . '">' . $value['author'] . '<span class="badge badge-secondary pull-right">' . $value['cnt'] . '</span></a></div>';
        }
        $html_7days .= '</div>';
        echo $html_7days;
    }else{

    }

    $sql = $db->select('COUNT(author) AS cnt', 'author', 'url', 'mail')
        ->from('table.comments')
        ->where('status = ?', 'approved')
        ->where('type = ?', 'comment')
        ->where('authorId = ?', '0')
        ->where('mail != ?', $options->socialemail)   //排除自己上墙
        ->group('author')
        ->order('cnt', Typecho_Db::SORT_DESC)
        ->limit('51');    //读取几位用户的信息

    $result = $db->fetchAll($sql);
    $html_7days = "";
    $mostactive = "<br><h4>总评论排行榜（仅显示前51位）</h4><br>";
    if (count($result) > 0) {
        $mostactive .= '<div class=\'row\'>';
        foreach ($result as $value) {
            $mostactive .= '<div class="col-lg-4 col-md-6" style="margin-bottom:5px"><a class="list-group-item" target="_blank" rel="nofollow" href="' . $value['url'] . '">' . $value['author'] . '<span class="badge badge-secondary float-right">' . $value['cnt'] . '</span></a></div>';
        }
        $mostactive .= '</div>';
        echo $mostactive;
    }
}

<?php getFriendWall(); ?>

然后需要引入bootstrap的核心css文件：

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

如果你不想用bootstrapCDN的话，可以自己写样式，只要修改handsome/functions.php里面getFriendWall()的函数输出格式即可。

版权属于：本文为原创文章，版权归 Asdrt 所有
本文链接：https://asdrt666.com/index.php/archives/1/
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

handsome 主题魔改<一>

1、增加鼠标特效

2、首页头像转动并放大

3、修改首页标题栏及自定义文字

4、底部版权处修改

5、留言墙样式修改

Leave a Comment Cancel reply

7 comments

handsome 主题魔改<一>

基于微软OneDrive搭建的网盘共享~图床

小米路由器青春版刷潘多拉、华硕老毛子固件

handsome 主题魔改<二>

非常基础问题之Marmoset Toolbag3 八猴

Autodesk 3ds Max 2020新功能预览

剑网三九周年快乐！！！

苍云的阅兵真的像是在煮火锅，还是特辣那种

两个配色网站，中国和日本传统配色

【工作流】3D次世代标准制作流程 Preparation

handsome 主题魔改<一>

1、增加鼠标特效

2、首页头像转动并放大

3、修改首页标题栏及自定义文字

4、底部版权处修改

5、留言墙样式修改

1、 增加鼠标特效

2、 首页头像转动并放大

3、 修改首页标题栏及自定义文字

4、底部版权处修改

5、留言墙样式修改

Leave a Comment Cancel reply

7 comments

handsome 主题魔改<一>

1、 增加鼠标特效

2、 首页头像转动并放大

3、 修改首页标题栏及自定义文字

4、底部版权处修改

5、留言墙样式修改

1、增加鼠标特效

2、首页头像转动并放大

3、修改首页标题栏及自定义文字

1、增加鼠标特效

2、首页头像转动并放大

3、修改首页标题栏及自定义文字