本站建立之初,曾经考虑、对比过多个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> | Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a>
</span>
© <?php echo date("Y");?> Copyright <?php $this->options->BottomleftInfo(); ?>
</div>
我修改后的是这样的,请自行替换修改↓
<div class="wrapper b-t bg-light">
<span class="pull-right hidden-xs">
<?php $this->options->BottomInfo(); ?>
[ 驱动:<a href="http://www.typecho.org" target="blank">Typecho</a> | 模板:<a href="https://www.ihewro.com/archives/489/" target="blank">友人C</a> | 站点地图:<a href="/sitemap.xml" target="blank">1</a> \ <a href="/baidu_sitemap.xml" target="blank">2</a> | 备案:<a href="http://www.miibeian.gov.cn" target="blank">闽ICP备14017081号</a> ]
</span>
[ 本站已安全运行<?php echo floor((time()-strtotime('2018-05-20'))/86400);?>天<?php $this->options->BottomleftInfo(); ?> ]
</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
先收藏了,以后来用~
刚买了这主题,现在本地折腾一下,功能太多了,看晕了
我也停留在简单修改,复杂的我就弄不来了
来膜拜一下
老板亲自来啊 |´・ω・)ノ
这几个特效都很好看诶
成长的挺快,这里面有些代码我也需要学习。
这可能是我懂的建站知识的最上限啦~
头像旋转放大是最上面的多啦A梦啊
是的 |´・ω・)ノ 具体效果就看那个位置。
很喜欢这个八大特质的鼠标特效,哈哈哈
୧(๑•̀⌄•́๑)૭ 也是在网上搜寻了好多,觉得好才用的
我也不太喜欢播放音乐,另外打算也买这套主题
⌇●﹏●⌇感觉音乐播放是年轻人用的
我也才16,是不是过早脱离了年轻人的行列
哈哈,应该是吧
等我有空了,也慢慢研究研究,我的主题是原版,自己都懒得修改了,你真有心。虽然我也是处女座(๑•̀ㅁ•́ฅ)
哈哈,以前做dz、pw 模板出身,ヾ(´・ ・`。)ノ" 习惯将网站改成自己习惯的样子。Typecho这个刚接触,争取尽快能自己研究出模板。φ( ̄∇ ̄o)
大佬
模板做出来了发我一份看看
欢迎加入 Typecho 大家族
(ノ°ο°)ノ joyqi你这是强制植入广告~ ୧(๑•̀⌄•́๑)૭