Handsome添加底部徽章

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

1. 看看前后对比
   

   

   效果就出来了

2.控制台 - 外观 - 设置外观 - 开发者设置 - 自定义CSS 将我们自己的CSS代码贴进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

.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标签

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

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

   1 2 3 4 5 6 7 8 9 10 11

   <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>

   新文件内容：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <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>

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