美化记录

本小破站建站的时候用的是WordPress，当初看到handsome就非常喜欢，于是就趁前段时间比较闲，把建站程序改成了Typecho。当然美化这种事情就看个人喜好了，以下是handsome底部版权和字体美化的教程。

底部版权

底部版权美化之前去看了很多handsome博主的美化记录，但是都没生效，或者有问题，不出意外的是版本问题，因为我主题版本是最新的，那天闲逛其他博友博主，在Tujun's Blog看到美化记录，显示出来还是挺不错。另外，博主美化记录挺多的，有兴趣的可以通过上述链接快速访问。

Handsome底部版权.png

美化步骤

以下内容部分信息需要改成自己站点的，本站转载仅供自己记录，详细记录，大家可以去上方站点

左侧底部放在 后台-开发者设置-博客底部左侧信息

<!--左侧底部-->
<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行，覆盖原来的即可

123.png

<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专用的，其他的主题未知。

字体美化配置以下：

https://cdn.jsdelivr.net/gh/Xpblog666/cdn@1.0/HarmonyOS_Sans_SC_Medium.ttf

结语

以上教程均来自其他博主，本站转载教程仅供个人记录，有兴趣的博友可以访问以上博主站点

版权声明 ▶ 本网站名称：网友小宋
▶ 本文链接：https://xyzbz.cn/archives/830/
▶ 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行核实删除。
▶ 转载本站文章需要遵守：商业转载请联系站长，非商业转载请注明出处！！

最后修改：2022 年 12 月 21 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏