在右上角添加github图标链接的方法

直接拷贝代码

http://tholman.com/github-corners/ 在这个网站可以直接生成图标

js插件

使用：

1	<script data-href="https://www.baidu.com" data-target="_blank" src="https://unpkg.com/github-corners/dist/embed.min.js"></script>

修改样式：

body .github-corner > svg {
  fill: red; //背景色
  color:green; //章鱼猫的颜色
}

【在线查看效果】

vue插件

vue-gh-corners

https://www.npmjs.com/package/vue-gh-corners

安装：

1	npm i vue-gh-corners

使用：

import Vue from 'vue';
import VueGitHubCorners from 'vue-gh-corners';
import 'vue-gh-corners/dist/vue-github-corners.css';
 
Vue.use(VueGitHubCorners);

1
2
3

<div id="app">
    <github-corners repo="gluons/vue-gh-corners"></github-corners>
</div>

API:
相关api点此查看

【在线查看效果】

vue2-github-corners

https://www.npmjs.com/package/vue2-github-corners

安装：

1	npm i vue2-github-corners

使用：

1
2
3

import Vue from 'vue';
import { VueGithubCorners } from 'vue2-github-corners'
Vue.component('VueGithubCorners', VueGithubCorners)

1
2
3

<div id="app">
<VueGithubCorners repoUrl="repoUrl" catColor="catColor" bgColor="bgColor"></VueGithubCorners>
</div>

演示地址：https://weichiachang.github.io/vue-github-corners/dist/