教程：基于Butterfly主题（去jquery）的gitcalendar3.0

如果您尚未使用过 gitcalendar 及相关魔改配置，

https://akilar.top/posts/1f9c68c9/

获取更加详细的教程指导。

序言：效果展示

因为用之前的 gitcalendar 服务器失效了~~（最近这个于 2021 年 1 月 18 日出现 502，我打算近期找办法修复替代）~~，于是找 api 自己手写了一个。

旧项目用到了GitHub Contribution Calendar API
新项目使用我自己写的python_github_calendar_api
你可以 fork 后使用 vercel 部署，然后修改 app 的链接在后面加上’/api?’
避免公共 api 使用过多带来的问题（其实也没啥问题，至少现在没有）

通过 vuejs 进行编码。

资源包地址：https://github.com/Zfour/Butterfly-gitcalendar

资源包下载

废话不多说了，开始教学。

更新日志。
-2021/01/18- 因为 api 出现了稳定性波动,所以我用 Python 自己写了个 api。
因为这个 api 是实时获取的 github 的数据会稍许有点卡。但自己写的就不怕他挂就是了。
目前默认使用的我自己写的 api，如果想切换为以前的 api 可以打开注释。然后注释掉默认的 api 即可。
-2021/01/12- 3.0 更新，去 jquery 实现，改变了容器 id 为 gitcalendar，运用 fetch 实现了网络请求。
-2020/11/28- 新增 simplemode 配置，打开时使用 canvas 绘制 gitcalendar，关闭时使用 svg 绘制 gitcalendar。
-2020/11/02- 修复月份算法的逻辑错误问题以及月份出现不加载的问题。
-2020/11/01- 将部分全局声明变量转换为了 vue 实例变量，关闭了 console.log。
-2020/11/01- 修复了 PUG 中当最新月份为 11 月时，标签显示不完全的问题。
-2020/11/01- 修复了一周前时间不显示的 bug，请更换 js 文件。
-2020/10/31- 修复了 PUG 中信息来源无法动态切换的 bug,请更换 pug。

步骤 1：修改 pug 代码

如果你配置过 1.0 版本请先将 inject 中的引入删除。

下载资源包

资源包下载

增加、替换代码

前往”根目录\themes\butterfly\layout”文件夹

将资源包中的”gitcalendar.pug”复制到文件夹中。

将”index.pug”复制并重命名为”index-re.pug”作为备份。

将资源包 pug 文件夹的 Original 中的”index.pug”覆盖进行替换，如果你使用磁贴请使用 Magnet Plus 文件夹的”index.pug”。

或者打开”index.pug”按照以下代码进行修改。修改的起始点为”#recent-posts.recent-posts”。

extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    .recent-post-item(style='width:100%')
       include gitcalendar.pug
    .recent-post-item(style='height:0px;clear:both;margin-top: 0px;')
    +postUI
    include includes/pagination.pug

步骤 2：添加引入 js、css 代码

放置资源包

将下载包中的 gitcalendar 文件夹放入根目录的”source”文件夹下。

引入 js 和 css

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”inject:”设置处

添加以下代码：

若已有 vue 引入，请确保 vue 的版本为 2.6 以上。

如果你使用 aplayer 出现不能正常加载。
多半是 aplayer 在渲染时给 js 中添加了一些奇怪的东西。
方案一：
将下载包中的 gitcalendar 文件夹放入放入主题的 source 文件夹。
方案二：
请在 github 上单独建一个仓库，把 gitcalendar.css 和 gitcalendar.js 存入其中。
使用 release 功能发布一个版本。
用 cdn 的方式进行引入。引入的链接按照如下格式修改。
https://cdn.jsdelivr.net/gh/用户名/新仓库名@版本号/gitcalendar.css
https://cdn.jsdelivr.net/gh/用户名/新仓库名@版本号/gitcalendar.js
具体方法参考
https://jingyan.baidu.com/article/5bbb5a1b4fd62652eaa17958.html

inject:
  head:
    - <link rel="stylesheet" href="/gitcalendar/css/gitcalendar.css"/>

  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    - <script src="/gitcalendar/js/gitcalendar.js"></script>

步骤 3：填写自定义属性的 js 配置

本日历通过 gitcalendar.js 的配置项实现以下自定义属性。

配置数据源

因为 api 出现了稳定性波动，所以我用 Python 自己写了个 api。因为这个 api 是实时获取的 github 的数据会稍许有点卡。
但自己写的就不怕他挂就是了。
目前默认使用的我自己写的 api，如果想切换为以前的 api 可以打开注释。
然后注释掉默认的 api 即可。

let githubapiurl =
  "https://python-github-calendar-api.vercel.app/api?" + gitcalendar.user;
//let githubapiurl = "https://githubapi.ryanchristian.dev/user/" + gitcalendar.user;
//旧的api策略

配置用户信息

填写 github 用户名，配置用户信息。

data: {
        simplemode: true, //打开时使用canvas绘制gitcalendar，关闭时使用svg绘制gitcalendar
                          //canvas：dom数少，但图像会发生模糊，自适应一般  svg：dom数多，图像清晰，自适应更佳
        user:'Zfour',     //用户名称
        fixed:'fixed',
        px:'px',
        x:'',
           y:'',
           span1:'',
           span2:'',

配置颜色主题

修改颜色配置。

color: [
  //这里是颜色配置，当前为蓝色，若需更换请对应数组内容进行替换
  "#ebedf0",
  "#f1f8ff",
  "#dbedff",
  "#c8e1ff",
  "#79b8ff",
  "#2188ff",
  "#0366d6",
  "#005cc5",
  "#044289",
  "#032f62",
  "#05264c",
];