添加 "Fork me on GitHub"丝带_foke me on github-CSDN博客

本文介绍了如何使用纯CSS在博客或网站上自定义显示一个“Fork me on GitHub”丝带图标，不仅减少了额外的图片请求，还提高了高清设备上的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处: https://www.haomwei.com/technology/fork-me-on-github.html
在原文基础上做了小修改:
改变丝带在右上方显示

今天发现很多人的博客左上角或者右上角都有一个“Fork me on GitHub”的丝带，感觉还挺好看的，对于一些在GitHub比较活跃的程序员朋友来说，简直是装逼利器——虽然我不是程序员，但我也爱装逼。于是google了一下，大部分人都是从GitHub Blog中得到的方法，只需要在网页头部添加一段代码即可，简便易行。

然而，这种直接调用一个图片的方法会增加网页加载时的请求数，图片的大小大约是8KB；而且，要是不够高清的图片在一个高分辨率的设备上显示效果也得不到保证。

于是发现国外的一个人给出了直接用div+css的方法来自己创造一个长得一样的图标，学习总结了一下以后，在此将他用的方法简单粗暴地转载过来，省略了一些知识介绍和中间过程。（原文链接在此）

首先在需要丝带出现的地方添加如下代码，对于Hexo程序，可以直接在主题目录的/layout/_partial下创建一个ribbon.ejs然后输入进去。

<div class="ribbon">
<a href="https://github.com/your username">Fork me on GitHub</a>
</div>

接着要在/layout/_partial/after_footer.ejs中加入一行：

<%- partial('ribbon') %>

确保这个div块将来能在我们的网页中出现。

然后就是添加CSS了，hexo可以在主题目录的/source/css/_partial下创建一个ribbon.styl，然后把下面的代码复制进去。

.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  /* top right corner */
  position: absolute;
  right: -50px;
  top: 40px;
  /* 45 deg ccw rotation */
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  /* shadow */
  -webkit-box-shadow: 0 0 10px #888;
     -moz-box-shadow: 0 0 10px #888;
          box-shadow: 0 0 10px #888;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}