Handsome添加底部徽章

博主： admin
发布时间：2022 年 01 月 26 日
451 次浏览
1 条评论
2261字数
分类： Tools

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

1. 看看前后对比
   ![](https://image.log1992.com/blog/typecho/20220126101715.jpg)
   
   ![](https://image.log1992.com/blog/typecho/20220126101757.png)
   
   效果就出来了

2.`控制台` - `外观` - `设置外观` - `开发者设置` - `自定义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-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`标签
   
   ```PHP
   <footer id="footer" class="app-footer" role="footer">
    </footer>
   ```
   
   将其中内容替换为咱们需要的
   原文件内容：
   
   ```PHP
   <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>
   ```
   
   新文件内容：
   
   ```PHP
   <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>
   ```
   
   根据自己的需求定义其中的内容，最后将改好的文件内容覆盖到服务器上即可。

最后修改：2022 年 01 月 26 日

如果觉得我的文章对你有用，请随意赞赏

1 条评论

admin
February 18th, 2022 at 02:38 pm

样式显示还行

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Handsome添加底部徽章

admin • 2022 年 01 月 26 日

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

1. 看看前后对比
   ![](https://image.log1992.com/blog/typecho/20220126101715.jpg)
   
   ![](https://image.log1992.com/blog/typecho/20220126101757.png)
   
   效果就出来了

2.`控制台` - `外观` - `设置外观` - `开发者设置` - `自定义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;
}

Handsome添加底部徽章

1 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Android相机使用问题

APP动态切换字体的实现

正确使用FIleProvider

mac下SVN的设置

Android多渠道之自定义apk输出

AndroidStudio3.0+,新的依赖关系,不要弄错!!!

一个APP如何显示多个后台任务

ContextCompat和ResourcesCompat的区别

Android相机使用问题

当前APP跳转第三方应用

Handsome添加底部徽章

1 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Handsome添加底部徽章

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款