本站建立之初，曾经考虑、对比过多个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、 修改首页网站名称和文章内页标题字体大小

近日升级到handsome6.0模板后发现首页网站标题和文章内页标题的字体变大了，个人比较习惯原来的大小样式，参照着旧版改了首页站名字体大小和文章内页中文章标题字体大小。（具体字体大小根据自己需要进行修改，具体演示请返回顶部查看文章标题字体）

PC版修改方法：
查找/usr/themes/handsome/assets/libs/bootstrap/bootstrap.min.css，在代码中查找h1{font-size:36px改为24。

手机端修改办法：
查找/usr/themes/handsome/assets/css/handsome.min.css，在代码中查找entry-title{font-size:30px 改为24。

另外，本站去除了首页站点名称的显示，仅显示一言鸡汤，具体方法：后台设置外观 → 主题增强功能 → 增强功能开关 → 勾选首页的标题栏下启用一言接口。接着去除此处的标题显示，修改方法为将下框中的代码在主题的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/component/aside.php，现演示样式是将原来的页面修改为域名，将原来的友链修改为项目，功能直接使用页面和友链的功能，其中友链直接后台设置全站友链即为本站样式。贴出代码供参考，此段放在最后一个<?php endif; ?>前面。

                                          <!--归档页面pages-->
              <li>
                <a href="<?php $this->options->rootUrl(); ?>/archives.html" target="blank" class="auto">
                  <i class="glyphicon glyphicon-th-list"></i>
                  <span>归档</span>
                </a>
              </li>
                                                        <!--访客页面pages-->
              <li>
                <a href="<?php $this->options->rootUrl(); ?>/readers.html" target="blank" class="auto">
                  <i class="glyphicon glyphicon-th-list"></i>
                  <span>访客</span>
                </a>
              </li>
                                          <!--留言pages-->
                            <li>
                <a href="<?php $this->options->rootUrl(); ?>/guestbook.html" target="blank" class="auto">
                  <i class="lyphicon glyphicon-envelope"></i>
                  <span>留言</span>
                </a>
              </li>
                            <!--友链pages-->
              <li>
                <a href="<?php $this->options->rootUrl(); ?>/links.html" target="blank" class="auto">
                  <i class="iconfont icon-links"></i>
                  <span>友链</span>
                </a>
              </li>

下面是旧版方法，留存备用，演示效果已无，具体的操作方法是将如下代码添加到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"}

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

Last modification：December 17th, 2019 at 05:08 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏