一个另类的页脚信息

发布于 2022-03-27  453 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

先来看看演示

然后需要的可以根据下面复制代码,放置在footer.php 中想要显示的地方,或者主题内的页脚信息内

 <div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://cbbkk.com/" target="_blank" title="由 wordpress 强力驱动" data-pjax-state=""><span class="badge-subject"><i class="fa fa-superpowers" style="color:#7de61d"></i>  Powered</span><span class="badge-value bg-blue"><i class="fa-brands fa-wordpress"></i> wordpress</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://github.com/mirai-mamori/Sakurairo" target="_blank" title="sakurairo主题" data-pjax-state=""><span class="badge-subject"> Theme</span><span class="badge-value bg-red"><img src="https://cdn.jsdelivr.net/gh/flurrychan/Sakura/asuhe.jp.webp" alt="图片" style="width:12px;height:11px" data-ll-status="loading" class="entered loading">sakurairo</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://www.namecheap.com/" target="_blank" title="namecheap提供域名相关服务" data-pjax-state=""><span class="badge-subject"> DNS</span><span class="badge-value bg-DNS"><img src="https://cdn.jsdelivr.net/gh/flurrychan/Sakura//download.svg" alt="图片" style="width:12px;height:11px" data-ll-status="loading" class="entered loading">NameCheap</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://idc.wiki/aff.php?aff=956" target="_blank" title="微基主机服务" data-pjax-state=""><span class="badge-subject">主机</span><span class="badge-value bg-blueviolet"><img src="https://cdn.jsdelivr.net/gh/flurrychan/Sakura/wiki.webp" alt="图片" style="height:11px" data-ll-status="loading" class="entered loading"></span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://cbbkk.com" target="_blank" title="CDN加速" data-pjax-state=""><span class="badge-subject"> CDN</span><span class="badge-value bg-orange"><i class="fa fa-github" style="color:#fff"></i>加速</span></a></div>

上面的图片,地址,文字都可自行修改为你想要的.

最后 添加CSS

      /*底部信息*/

.github-badge {
  margin-left: 5px;
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px;
  font-size: 12px;
}

.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: linear-gradient(to right, #3a6186, #89253e);
}
.github-badge .bg-red {
  background: linear-gradient(to right, #ac0a5b, #00ff22);
}

.github-badge .bg-brightgreen {
  background: linear-gradient(to right, #fc5c7d, #6a82fb);
}

.github-badge .bg-orange {
  background: linear-gradient(to right, #f0c27b, #4b1248);
}

.github-badge .bg-gradient {
  background: linear-gradient(to right, #3ca5f6, #a86af9);
}

.github-badge .bg-blueviolet {
  background: linear-gradient(to right,#a86af9, #ffadad);
}

.github-badge .bg-DNS {
background: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
}

完成。