这是一篇很常见的教学内容,我也是借鉴了前人所写,如有雷同请不要介意!

效果图

导读

本教程内容取决于typecho系统handsome模板,其他地方使用请自行测试!


教学步骤

  • 1、博客底部左侧信息(设置外观>开发者设置>博客底部左侧信息)
以下内容默认使用本站信息,请自行更改!
<div class="github-badge">
  <span class="badge-subject">Copyright</span>
  <a href="./" target="_blank">
    <span class="badge-value bg-blue">©2022 昨日有清风</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">2021014930号-1</span></a>
</div>
  • 2、博客底部右侧信息(设置外观>开发者设置>博客底部右侧信息)
<div class="github-badge">
  <span class="badge-subject">Powered by</span>
  <a href="/" target="_blank">
    <span class="badge-value bg-blue">Typecho</span></a>
</div> | 
<div class="github-badge">
  <span class="badge-subject">Theme by</span>
  <a href="/" 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
}
  • 4、修改footer.php文件(模板文件>component>footer.php)
修改前请做好备份准备,以防修改失误误删文件!

删除内容:打开文件上图位置

内容一: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>

内容二:&copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;

到这里本次的教程就结束了,刷新页面即可看见效果!

END
本文作者:
文章标题:typecho系统handsome模板页脚美化教程(大自然的搬运工)
本文地址:https://imxcy.cn/index.php/wlfx/19.html
版权说明:若无注明,本文皆昨日有清风原创,转载请保留文章出处。
最后修改:2022 年 04 月 28 日
如果觉得我的文章对你有用,请随意赞赏