美化记录
本小破站建站的时候用的是WordPress,当初看到handsome就非常喜欢,于是就趁前段时间比较闲,把建站程序改成了Typecho。当然美化这种事情就看个人喜好了,以下是handsome底部版权和字体美化的教程。
底部版权
底部版权美化之前去看了很多handsome博主的美化记录,但是都没生效,或者有问题,不出意外的是版本问题,因为我主题版本是最新的,那天闲逛其他博友博主,在Tujun's Blog看到美化记录,显示出来还是挺不错。另外,博主美化记录挺多的,有兴趣的可以通过上述链接快速访问。
美化步骤
以下内容部分信息需要改成自己站点的,本站转载仅供自己记录,详细记录,大家可以去上方站点
左侧底部放在 后台-开发者设置-博客底部左侧信息
<!--左侧底部-->
<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>
右侧底部放在 后台-开发者设置-博客底部右侧信息
<!--右侧底部-->
<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>
css放在 主题设置-自定义css内
/*底部页脚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
}
把下面代码放在主题目录usr/themes/handsome/component/footer.php内大概在177行,覆盖原来的即可
<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>
字体美化
字体美化是在小屁的博客上面看到的,因为我装的有AliceStyle插件,所以直接就复制字体,小屁已经做好了大家可以直接使用。当然这个插件是handsome专用的,其他的主题未知。
- 小屁的博客
- 萌卜兔的AliceStyle插件
- 插件功能还是挺多了,如果你是handsome主题使用博主,可以下载适用。
字体美化配置以下:
https://cdn.jsdelivr.net/gh/Xpblog666/cdn@1.0/HarmonyOS_Sans_SC_Medium.ttf
结语
以上教程均来自其他博主,本站转载教程仅供个人记录,有兴趣的博友可以访问以上博主站点
21 条评论
博主你好,请问首页样式怎么改变的呀?发现你的主题比原版的大气很多呢!
你的字体是不是霞鹜字体??怎么设置的??
这次我是从百度来的。。。
没想到吧,我文章竟然收录的挺靠前。
这个博客好看 求分享源码
这个主题的话88。可以去作者站点购买 需要授权的 https://www.ihewro.com/archives/489/
你博客夜间模式下的代码块,背景颜色,还可以再暗下,要不还是刺眼。
好滴好滴
越来越高级了
不高级啊! 适当美化一下。