vuepress（四）给vuepress加入githubcalendar贡献日历

vuepress（四）给vuepress加入githubcalendar贡献日历

文章目录 vuepress（四）给vuepress加入githubcalendar贡献日历前言系列文章一、给vuepress加入githubcalendar贡献日历效果展示：1.最终呈现2.使用插件

前言

这里是一个关于vuepress搭建的系列教程，里面也包括了我自己对博客的一些优化

我的博客👉：一枚前端程序媛的blog

因为域名备案还没下来，所以只能IP地址裸奔了😂

上面的没有使用SSL加密，所以访问有可能报错

所以目前还使用的是Github Pages👉: 一枚前端程序媛的blog

系列文章

vuepress博客搭建（一）导航栏与侧边栏

vuepress（二）插件安装推荐

vuepress（三）博客页面自定义布局

vuepress（四）给vuepress加入githubcalendar贡献日历

vuepress（五）部署到github.io

一、给vuepress加入githubcalendar贡献日历 效果展示：

我放在了首页，效果展示：贡献日历

1.最终呈现

这个博客美化，起初是应为自己在搭建 hexo+butterfly 时，可以使用插件来显示贡献日历，但vuepress好像官方并没有找到类似的插件。

所以后来我在github上找到了类似的插件👉：贡献日历

2.使用插件

这个插件最终是以一个图片的形式进行展示，所以我们可以将这张图片放在任何位置，并且这个插件直接使用即可，不需要下载。

直接将下面的代码放到自己的博客中：

我们其实也可以更改贡献的颜色，官网上有解释。

我放在了首页，效果展示：贡献日历

---
home: true
heroImage: 'http://www.kaotop.com/file/tupian/20220606/xxxxx.jpg'
actionText: 快速上手 →
actionLink: /js/
features:
- title: XXXXXX
  details: XXXXX
- title: XXXXX
  details: XXXXX
- title: XXXXX
  details: XXXXX
footer: MIT Licensed | Copyright © xxxxxxx
---

<img src="https://ghchart.rshah.org/mengqiuleo" 
  alt="2016rshah's Github chart" 
  style="width:100%"/>