Handsome 添加底部徽章

看到别人的博客底部标签挺好看的，再看看自己的，丑到爆了。

1. 看看前后对比
   

   效果就出来了

2. 控制台 - 外观 - 设置外观 - 开发者设置 - 自定义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-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-yellowgreen {
    background-color: #a4a61d !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

3. 使用文件管理工具连接服务器，打开 usr - theme - handsome - component - footer.php , 最好是能先将旧的文件备份。
   找到 footer 标签

   <footer id="footer" class="app-footer" role="footer">
    </footer>
   

   将其中内容替换为咱们需要的
   原文件内容：

   <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?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>
        <span class="text-ellipsis">&copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;<?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
   

   新文件内容：

   <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
        <div class="github-badge">
            <a target="_blank" href="http://www.typecho.org"> <span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Typecho</span></a> 
        </div>
        <div class="github-badge">
           <a target="_blank" href="https://www.ihewro.com/archives/489/"> <span class="badge-subject">Theme by</span><span class="badge-value bg-red">handsome</span></a>
        </div>
   
        </span>
        <div class="github-badge">
        <span class="badge-subject">Copyright</span><span class="badge-value bg-brightgreen">&copy;&nbsp;<?php echo date("Y");?></span> 
        </div>
        <div class="github-badge">
           <a target="_blank" href="https://beian.miit.gov.cn/"> <span class="badge-subject">鄂</span><span class="badge-value bg-orange">ICP备18012958号-1</span></a>
        </div>
        <?php $this->options->BottomleftInfo(); ?>
    </div>
   

   根据自己的需求定义其中的内容，最后将改好的文件内容覆盖到服务器上即可。