Butterfly主题魔改教程，添加GitHub提交日历。


我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：小冰博客的《教程：hexo-githubcalendar 插件 1.0》和Akilarの糖果屋的《Gitcalendar》。本博客使用冰老师的hexo-githubcalendar 插件 1.2.2版本。

1.步骤

  1. 执行 npm 安装操作：

    npm i hexo-githubcalendar --save

    # 或者

    cnpm i hexo-githubcalendar --save

    注意，一定要加 --save，不然本地预览的时候可能不会显示！

  2. 新增网站根目录_config 配置项 (不是主题的)：

    # Ice Kano Plus_in
    # Hexo Github Canlendar
    # Author: Ice Kano
    # Modify: Lete乐特
    # 小冰博客教程
    githubcalendar:
      enable: true
      enable_page: /
      user: zfour
      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']"
      # color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
      # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
      # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
      # color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
      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: ""

  3. 参数释义

参数 备选值/类型 释义
enable true/false 是否开启插件
enable_page path/all 填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
user text 你的 github 或者 gitee 用户名
layout.type id/class 挂载容器类型，填写id或class，不填则默认为id
layout.name text 挂载容器名称
layout.index 0和正整数 前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
githubcalendar_html html 模板字段 包含 loading，和挂载容器
pc_minheight 280px 电脑端插件的最小高度，减少加载带来的视觉偏移
mobile_minheight 0px 手机端插件的最小高度，减少加载带来的视觉偏移
color “[‘#ebedf0’, ‘#fdcdec’, ‘#fc9bd9’, ‘#fa6ac5’, ‘#f838b2’, ‘#f5089f’, ‘#c4067e’, ‘#92055e’, ‘#540336’, ‘#48022f’, ‘#30021f’]” calendar 的主题色,一个包含11个色值的数组，文档给出了四款预设值
api https://python-github-calendar-api.vercel.app/api
或 https://python-gitee-calendar-api.vercel.app/api		 这里提供的是公用的 api，仅供日常使用，请不要滥用。如果想搭建自用 api，具体的部署方案可看考 python_github_calendar_api 及 python_gitee_calendar_api 的文档说明，这里不多加赘述。
calendar_js https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js jsd 加速的 js，将 github calendar 挂载入容器中
plus_style “ ” 提供可自定义的 style

2.预览

执行 hexo 三连，即可发现已经成功部署。

hexo clean && hexo g && hexo s

3.可能出现的Bug及建议

2021年2月4日，因为github本身的dom变动，导致原有api爬取不到信息，冰老师已经加急修复。请发现日历失效的读者重新fork 上述的python_github_calendar_api项目并采用自建API方案。

自建API方案请参考：Akilarの糖果屋的《Gitcalendar》教程贴的自建API部署章节。

如有错误，欢迎评论区留言！