添加 "Fork me on GitHub"丝带
来源:互联网 发布:java转义字符的使用 编辑:程序博客网 时间:2024/04/28 09:30
原文出处: 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;}
如果想要丝带悬浮在顶部,可以把上面一段中position的属性设置为:
position: fixed;
复制进去后别忘了在style.styl的最后添加一行(针对Hexo博客用户):
if ribbon @import '_partial/ribbon'
效果见 个人网站
iDancy
- 添加 "Fork me on GitHub"丝带
- Hexo博客添加Fork me on GitHub
- Fork me on GitHub
- 【GitHub】如何在自己的项目中添加"Fork me on GitHub"标识
- Github之“会说话”丝带
- clone & fork, origin & upstream on GitHub
- github添加fork的别人的仓库
- Eye on me
- Follow me on Twitter !
- hdu5533Dancing Stars on Me
- github的fork功能
- github fork项目
- 【github】Syncing a fork
- github 同步一个 fork
- Github删除fork项目
- github---watch、fork、star
- github 同步 fork
- GitHub fork更新
- Java实现-逆波兰表达式求值
- 2017 后端面试经历分享
- Java 泛型
- pythonIDe比较
- 37%定律
- 添加 "Fork me on GitHub"丝带
- pxe&全自动化安装
- 并查集(题解)
- <hadoop学习历程>--笔记心得8-HA环境搭建试验
- G-POJ-3984 迷宫问题
- java自学-数据类型转换及注释
- vue中promise和axios 同步爬坑小记
- 数据分析学习
- 嵌入式linux 内核启动时动态加载驱动模块的方法