主题样式模板修改记录

Author：许建华
发布时间：May 20, 2018
16011 views
25 comments
4673 字数
Categories：站点记录

本站建立之初，曾经考虑、对比过多个Php博客程序，相比之下wordpress过于臃肿，Zblog用不习惯，最终选定用“Typecho”作为博客程序。由于技术受限，主题选定“友人C”的“handsome”模板，也经过对比，算是目前功能比较全面的主题，毕竟是我大手笔55元买来的。同时也根据我自己的习惯，对一些细微处调整成自己想要的样式，比如关闭了不适合我这个年纪的“音乐播放器” 和已为网站选定配色而关闭的“右侧设置按钮”，开启了首页标题栏下“一言”，主要是不知道写什么才能显得我足够个性，不如让它每次刷新都不同。此处将对模板的修改做个记录，方便程序或模板升级时修改。

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模板设置左侧边栏导航。

{"name":"关于本博","class":"glyphicon glyphicon-file","link":"about.html","target":"_self"},
{"name":"文章归档","class":"glyphicon glyphicon-th-list icon text-md","link":"archives.html","target":"_self"},
{"name":"域名铺子","class":"glyphicon glyphicon-shopping-cart icon text-md","link":"domain.html","target":"_self"},
{"name":"站点访客","class":"glyphicon glyphicon-user icon text-md","link":"readers.html","target":"_self"},
{"name":"友情链接","class":"iconfont icon-links","link":"links.html","target":"_self"},
{"name":"给我留言","class":"glyphicon glyphicon-envelope icon text-md","link":"guestbook.html","target":"_self"},
{"name":"打了个赏","class":"glyphicon glyphicon-scale icon text-md","link":"dashang.html","target":"_self"}

如果你想要跟我博客一样的效果的话，需要在handsome/component/aside.php中删除相关代码。

转载请向作者获得授权，并注明转载地址：https://www.xujianhua.com/1.html

Last modification：September 22nd, 2019 at 10:52 pm

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

25 comments

沙扬娜拉
December 24th, 2018 at 01:09 am

先收藏了，以后来用~

Reply
1. 许建华Author
  December 24th, 2018 at 06:22 pm
  
  @沙扬娜拉
  欢迎常来
  
  Reply
黑桃三
December 21st, 2018 at 10:07 pm

刚买了这主题，现在本地折腾一下，功能太多了，看晕了

Reply
1. 许建华Author
  December 24th, 2018 at 06:22 pm
  
  @黑桃三
  我也停留在简单修改，复杂的我就弄不来了
  
  Reply
思迁
November 16th, 2018 at 10:51 am

来膜拜一下

Reply
1. 许建华Author
  November 16th, 2018 at 02:55 pm
  
  @思迁
  老板亲自来啊 |´・ω・)ノ
  
  Reply
pink
November 7th, 2018 at 05:15 pm

这几个特效都很好看诶

Reply
1. 许建华Author
  November 8th, 2018 at 10:37 am
  
  @pink
  这几个都是我自己觉得可以的~
  
  Reply
林三
September 30th, 2018 at 10:45 am

成长的挺快，这里面有些代码我也需要学习。

Reply
1. 许建华Author
  September 30th, 2018 at 04:34 pm
  
  @林三
  这可能是我懂的建站知识的最上限啦~
  
  Reply
cess
September 20th, 2018 at 01:35 pm

头像旋转放大是最上面的多啦A梦啊

Reply
1. 许建华Author
  September 20th, 2018 at 03:10 pm
  
  @cess
  是的 |´・ω・)ノ具体效果就看那个位置。
  
  Reply
jack
August 17th, 2018 at 05:04 pm

很喜欢这个八大特质的鼠标特效，哈哈哈

Reply
1. 许建华Author
  August 27th, 2018 at 11:36 am
  
  @jack
  ୧(๑•̀⌄•́๑)૭ 也是在网上搜寻了好多，觉得好才用的
  
  Reply
老白
June 13th, 2018 at 02:24 pm

我也不太喜欢播放音乐，另外打算也买这套主题

Reply
1. 许建华Author
  June 13th, 2018 at 02:49 pm
  
  @老白
  ⌇●﹏●⌇感觉音乐播放是年轻人用的
  
  Reply
  1. 老白
    June 13th, 2018 at 08:12 pm
    
    @许建华
    我也才16，是不是过早脱离了年轻人的行列
    
    Reply
    
    许建华Author
    June 13th, 2018 at 08:35 pm
    
    @老白
    说好听点是心智成熟
    
    Reply
    
    老白
    June 13th, 2018 at 09:14 pm
    
    @许建华
    哈哈，应该是吧
    
    Reply
沉默是金
June 13th, 2018 at 09:51 am

等我有空了，也慢慢研究研究，我的主题是原版，自己都懒得修改了，你真有心。虽然我也是处女座(๑•̀ㅁ•́ฅ)

Reply
1. 许建华Author
  June 13th, 2018 at 10:14 am
  
  @沉默是金
  哈哈，以前做dz、pw 模板出身，ヾ(´･･｀｡)ノ" 习惯将网站改成自己习惯的样子。Typecho这个刚接触，争取尽快能自己研究出模板。φ(￣∇￣o)
  
  Reply
  1. 沉默是金
    June 13th, 2018 at 10:20 am
    
    @许建华
    大佬模板做出来了发我一份看看
    
    Reply
    
    许建华Author
    June 13th, 2018 at 10:22 am
    
    @沉默是金
    这个应该要一一一一小小小小段段段段时时时时间间间间你知道我是慢工出细活的~
    
    Reply
Typecho
June 3rd, 2018 at 08:16 pm

欢迎加入 Typecho 大家族

Reply
1. 许建华Author
  June 13th, 2018 at 10:13 am
  
  @Typecho
  (ノ°ο°)ノ joyqi你这是强制植入广告~ ୧(๑•̀⌄•́๑)૭
  
  Reply

子苓°
估计是他QQ号被屏蔽了，加他老是收不到验证，要不你帮忙叫他加一...
飞刀说
博主咋把我的友情链接拿掉了呀？
苏建报
名副其实的大佬前辈！膜拜。
Aлександр
Привет, хочу купить auto.click
推广网
ge.ge 这个域名多少钱收的

主题样式模板修改记录

许建华 • 2019 年 10 月 22 日

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、修改首页标题栏及自定义文字

<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、博客模板左侧边栏代码

效果见我博客左侧导航，具体的操作方法是将如下代码添加到handsome模板设置左侧边栏导航。

{"name":"关于本博","class":"glyphicon glyphicon-file","link":"about.html","target":"_self"},
{"name":"文章归档","class":"glyphicon glyphicon-th-list icon text-md","link":"archives.html","target":"_self"},
{"name":"域名铺子","class":"glyphicon glyphicon-shopping-cart icon text-md","link":"domain.html","target":"_self"},
{"name":"站点访客","class":"glyphicon glyphicon-user icon text-md","link":"readers.html","target":"_self"},
{"name":"友情链接","class":"iconfont icon-links","link":"links.html","target":"_self"},
{"name":"给我留言","class":"glyphicon glyphicon-envelope icon text-md","link":"guestbook.html","target":"_self"},
{"name":"打了个赏","class":"glyphicon glyphicon-scale icon text-md","link":"dashang.html","target":"_self"}

如果你想要跟我博客一样的效果的话，需要在handsome/component/aside.php中删除相关代码。

转载请向作者获得授权，并注明转载地址：https://www.xujianhua.com/1.html

主题样式模板修改记录

1、增加鼠标特效

2、首页头像转动转动放大

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

4、底部版权处修改

5、博客模板左侧边栏代码

Leave a Comment Cancel reply

25 comments

十余年来域名投资心得

最秀Typecho主题 Love

撸到了一只世界级的猫

网站插件配置使用记录

近期正在做的一些事情

最秀Typecho主题 Love

撸到了一只世界级的猫

近期正在做的一些事情

十余年来域名投资心得

网站插件配置使用记录

主题样式模板修改记录

1、增加鼠标特效

2、首页头像转动转动放大

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

4、底部版权处修改

5、博客模板左侧边栏代码

1、 增加鼠标特效

2、 首页头像转动转动放大

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

4、底部版权处修改

5、博客模板左侧边栏代码

Leave a Comment Cancel reply

25 comments

主题样式模板修改记录

1、 增加鼠标特效

2、 首页头像转动转动放大

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

4、底部版权处修改

5、博客模板左侧边栏代码

1、增加鼠标特效

2、首页头像转动转动放大

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

1、增加鼠标特效

2、首页头像转动转动放大

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