给Hexo添加Github贡献日历图

发表于 |

图示

样式一

Zfour's github stats

样式二

样式三

小冰的插件效果

接下来给大家介绍它们的实现方法

代码实现

第一种

只需将username的值设置为你的github用户名即可:

1
https://github-readme-stats.vercel.app/api?username=github用户名

然后以图片的形式进行加载:

1
![](https://github-readme-stats.vercel.app/api?username=github用户名)

如果是放置在html中, 替换用户名后 拷贝以下代码:

1
<img src="https://github-readme-stats.vercel.app/api?username=github用户名" referrerpolicy="no-referrer" ">

项目GitHub: github-readme-stats

第二种

和第一种类似, 尾部改成github用户名即可

1
https://ghchart.rshah.org/github用户名

然后以图片的形式进行加载:

1
![](https://ghchart.rshah.org/github用户名)

如果是放置在html中, 替换用户名后 拷贝以下代码:

1
<img src="https://ghchart.rshah.org/github用户名"  referrerpolicy="no-referrer" ">

项目GitHub: githubchart-api

第三种

这种是以hexo插件的形式实现, 具体步骤如下:

  1. 安装插件

    1
    npm i hexo-githubcalendar --save

  2. hexo根目录下的config文件添加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # Ice Kano Plus_in
    # Hexo Github Canlendar
    # Author: Ice Kano
    # Modify: Lete乐特
    githubcalendar:
      enable: true
      enable_page: /
      user: 你的github用户名
      layout:
        type: id
        name: recent-posts
        index: 0
      githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
      pc_minheight: 280px
      mobile_minheight: 0px
      color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
      api: https://python-github-calendar-api.vercel.app/api
      # api: https://python-gitee-calendar-api.vercel.app/api
      calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
      plus_style: ""

    将user属性修改为你的github用户名即可,

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%