点击查看更新记录

更新记录

2021-01-19:正式版v3.1

  1. 基于冰老师的gitcalendar方案进行微调(1.0,2.0,2.1,3.0为冰老师编写)
  2. 修改了样式,转为styl,使用配置项开关样式引入
  3. 新增配置项,直接通过主题配置文件控制各个变量参数
  4. 适配pjax,删除冗余代码
  5. 根据@卓越科技提示,新增判断机制,避免因为切换simplemode导致反复报错。
  6. 补全自建API的部署教程。

2021-01-22:正式版v3.2

  1. @Nesxc建议进行优化。
  2. 提取apiurl配置项,不想自建API的默认使用公共API
  3. 改动了gitcalendar-js.pug
    - var githubapiurl = "https://python-github-calendar-api.vercel.app/api?" + gitcalendar.user;
    + var apiurl = '!{theme.gitcalendar.apiurl}' ? 'https://!{theme.gitcalendar.apiurl}/api?' : 'https://githubapi.ryanchristian.dev/user/'
    + var githubapiurl = apiurl + gitcalendar.user;
  4. 新增配置项apiurl
      gitcalendar:
    enable: true
    simplemode: true
    user: Akilarlxh
    + apiurl: github-calendar-api.vercel.app
    color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"

2021-1-31:正式版v3.2.1

  1. 更新butterfly_v3.6.0适配方案提示

2021-02-04:正式版v3.2.2

  1. 源码无变动。针对2021-02-04当天,gitcalendar大面积失效的问题进行统一回复
  2. 因为github calendar本身dom结构变动,api爬取不到信息。冰老师已经修复,请2021-02-04前配置的读者重新fork冰老师的python_github_calendar_api项目并重新构建。

2021-06-24:插件版1.0.4

  1. 已发布插件版
  2. 移除了vue依赖,现已成为完全独立的脚本
  3. 新增了多主题适配方案,理论上可以适配任何主题
点击查看参考教程
参考方向教程原贴
基于冰老师方案的售后配置教程:基于Butterfly主题的gitcalendar3.0
冰老师编写的api项目
站内教程:Vercel部署教程使用Vercel来加速Hexo博客

新版插件方案

安装

  1. 安装插件,在博客根目录[Blogroot]下打开终端,运行以下指令:

    npm install hexo-filter-gitcalendar --save
  2. 添加配置信息,以下为写法示例
    在站点配置文件_config.yml或者主题配置文件如_config.butterfly.yml中添加

    # hexo-filter-gitcalendar
    # see https://akilar.top/posts/1f9c68c9/
    gitcalendar:
    enable: true # 开关
    priority: 5 #过滤器优先权
    enable_page: / # 应用页面
    # butterfly挂载容器
    layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
    # volantis挂载容器
    # layout:
    # type: class
    # name: l_main
    # index: 0
    # matery挂载容器
    # layout:
    # type: id
    # name: indexCard
    # index: 0
    # mengd挂载容器
    # layout:
    # type: class
    # name: content
    # index: 0
    user: Akilarlxh #git用户名
    apiurl: 'https://gitcalendar.akilar.top'
    minheight:
    pc: 280px #桌面端最小高度
    mibile: 0px #移动端最小高度
    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']" #天青色调
    container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器,需要使用pug语法
  3. 参数释义
参数备选值/类型释义
prioritynumber【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enabletrue/false【必选】控制开关
enable_pagepath/all【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为’/‘
layout.typeid/class【可选】挂载容器类型,填写id或class,不填则默认为id
layout.nametext【必选】挂载容器名称
layout.index0和正整数【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
usertext【必选】git用户名
apiurlurl【可选】默认使用提供文档提供的api,但还是建议自建api,参考教程:自建API部署
minheight.pc280px【可选】桌面端最小高度,默认为280px
minheight.mobile0px【可选】移动端最小高度,默认为0px
colorlist【可选】一个包含11个色值的数组,文档给出了四款预设值
containerpug【可选】预留的父元素容器,用以适配多主题,需要用pug语法填写,目前已适配butterflyvolantismaterymengd主题,这四个主题,插件会自自动识别_config.yml内填写的theme配置项。其余主题需要自己填写父元素容器。
旧版源码修改配置方案

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

魔改步骤

  1. 新建[Blogroot]\themes\butterfly\layout\includes\gitcalendar.pug:
    #gitcalendar.gitcalendar
    #gitmessage(:style='{top:y+px,left:x+px,position: fixed,zIndex:9999}')
    .angle-wrapper
    span {{span1}}  
    span {{span2}} 次上传
    .position-relative
    .border.py-2.graph-before-activity-overview
    .js-gitcalendar-graph.mx-md-2.mx-3.d-flex.flex-column.flex-items-end.flex-xl-items-center.overflow-hidden.pt-1.is-graph-loading.graph-canvas.gitcalendar-graph.height-full.text-center
    #gitcalendarcanvasbox(v-if='simplemode')
    canvas#gitcanvas(style='animation: none;')
    svg.js-gitcalendar-graph-svg(width='100%', viewBox='0 0 770 128', v-if='!simplemode')
    text.month(:x='32 + monthindex*64', y='20', v-for='(month,monthindex) in monthchange') {{month}}
    text.wday(text-anchor='start', dx='0', dy='40') 日
    text.wday(text-anchor='start', dx='0', dy='65') 二
    text.wday(text-anchor='start', dx='0', dy='90') 四
    text.wday(text-anchor='start', dx='0', dy='115') 六
    g(v-for='(weekitem,weekIndex) in data', :transform='\'translate(\'+ (16 + weekIndex*14) + \',\' + \'0)\'')
    rect(@mouseover="selectStyle(dayitem,$event)" @mouseleave="outStyle()" v-for='(dayitem,dayIndex) in weekitem', :style='{fill:thiscolor(dayitem.count),shapeRendering:crispedges}', :data-score='dayitem.count', :data-date='dayitem.date', x='0', :y=' 30 + dayIndex*13 ', width='11', height='11')
    .contrib-footer.clearfix.mt-1.mx-3.px-3.pb-1
    .float-left.text-gray
    | 数据来源
    a(:href="'https://github.com/'+ user ", target='blank') @{{user}}
    .contrib-legend.text-gray
    | Less

    ul.legend
    li(:style='{backgroundColor:color[0]}')
    li(:style='{backgroundColor:color[2]}')
    li(:style='{backgroundColor:color[4]}')
    li(:style='{backgroundColor:color[6]}')
    li(:style='{backgroundColor:color[8]}')
    | More

    .contrib-column.contrib-column-first.table-column
    span.text-muted 过去一年提交
    span.contrib-number {{total}}
    span.text-muted {{oneyearbeforeday}} - {{thisday}}
    .contrib-column.table-column
    span.text-muted 最近一月提交
    span.contrib-number {{thisweekdatacore}}
    span.text-muted {{amonthago}} - {{thisday}}
    .contrib-column.table-column
    span.text-muted 最近一周提交
    span.contrib-number {{weekdatacore}}
    span.text-muted {{aweekago}} - {{thisday}}

  2. 新建[Blogroot]\themes\butterfly\layout\includes\gitcalendar-js.pug:
    script.
    var gitcalendar = new Vue({
    el: '#gitcalendar',
    data: {
    simplemode: !{theme.gitcalendar.simplemode},
    user: '!{theme.gitcalendar.user}',
    fixed: 'fixed',
    px: 'px',
    x: '',
    y: '',
    span1: '',
    span2: '',
    month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    monthchange: [],
    oneyearbeforeday: '',
    thisday: '',
    amonthago: '',
    aweekago: '',
    weekdatacore: 0,
    datacore: 0,
    total: 0,
    datadate: '',
    data: [],
    positionplusdata: [],
    firstweek: [],
    lastweek: [],
    beforeweek: [],
    thisweekdatacore: 0,
    mounthbeforeday: 0,
    mounthfirstindex: 0,
    crispedges: 'crispedges',
    thisdayindex: 0,
    amonthagoindex: 0,
    amonthagoweek: [],
    firstdate: [],
    first2date: [],
    montharrbefore: [],
    monthindex: 0,
    color: !{theme.gitcalendar.color}
    },
    methods: {
    selectStyle(data, event) {
    document.querySelector('.angle-wrapper').style.display = 'block'
    this.span1 = data.date;
    this.span2 = data.count;
    this.x = event.clientX - 100;
    this.y = event.clientY - 60
    },
    outStyle() {
    document.querySelector('.angle-wrapper').style.display = 'none'
    },
    thiscolor(x) {
    if (x === 0) {
    let i = parseInt(x / 2);
    return this.color[0]
    } else if (x < 2) {
    return this.color[1]
    } else if (x < 20) {
    let i = parseInt(x / 2);
    return this.color[i]
    } else {
    return this.color[9]
    }
    },
    }
    });
    var apiurl = '!{theme.gitcalendar.apiurl}' ? 'https://!{theme.gitcalendar.apiurl}/api?' : 'https://githubapi.ryanchristian.dev/user/'
    var githubapiurl = apiurl + gitcalendar.user;
    //canvas绘图
    function responsiveChart() {
    let c = document.getElementById("gitcanvas");
    if (c) {
    let cmessage = document.getElementById("gitmessage");
    let ctx = c.getContext("2d");
    c.width = document.getElementById("gitcalendarcanvasbox").offsetWidth;
    let linemaxwitdh = 0.96 * c.width / gitcalendar.data.length;
    c.height = 9 * linemaxwitdh;
    let lineminwitdh = 0.8 * linemaxwitdh;
    let setposition = {
    x: 0.02 * c.width,
    y: 0.025 * c.width
    };
    for (let week in gitcalendar.data) {
    weekdata = gitcalendar.data[week];
    for (let day in weekdata) {
    let dataitem = {
    date: "",
    count: "",
    x: 0,
    y: 0
    };
    gitcalendar.positionplusdata.push(dataitem);
    ctx.fillStyle = gitcalendar.thiscolor(weekdata[day].count);
    setposition.y = Math.round(setposition.y * 100) / 100;
    dataitem.date = weekdata[day].date;
    dataitem.count = weekdata[day].count;
    dataitem.x = setposition.x;
    dataitem.y = setposition.y;
    ctx.fillRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh);
    setposition.y = setposition.y + linemaxwitdh
    };
    setposition.y = 0.025 * c.width;
    setposition.x = setposition.x + linemaxwitdh
    };
    ctx.font = "600 Arial";
    ctx.fillStyle = '#aaa';
    ctx.fillText("日", 0, 1.9 * linemaxwitdh);
    ctx.fillText("二", 0, 3.9 * linemaxwitdh);
    ctx.fillText("四", 0, 5.9 * linemaxwitdh);
    ctx.fillText("六", 0, 7.9 * linemaxwitdh);
    let monthindexlist = c.width / 24;
    for (let index in gitcalendar.monthchange) {
    ctx.fillText(gitcalendar.monthchange[index], monthindexlist, 0.7 * linemaxwitdh);
    monthindexlist = monthindexlist + c.width / 12
    };
    cmessage.onmousemove = function(event) {
    document.querySelector('.angle-wrapper').style.display = 'none'
    };
    c.onmousemove = function(event) {
    document.querySelector('.angle-wrapper').style.display = 'none'
    getMousePos(c, event);
    };

    function getMousePos(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left * (canvas.width / rect.width);
    var y = event.clientY - rect.top * (canvas.height / rect.height);
    //console.log("x:"+x+",y:"+y);
    for (let item of gitcalendar.positionplusdata) {
    let lenthx = x - item.x;
    let lenthy = y - item.y;
    //console.log(lenthx,lenthy);
    if (0 < lenthx && lenthx < lineminwitdh) {
    if (0 < lenthy && lenthy < lineminwitdh) {
    //console.log(item.date,item.count)
    document.querySelector('.angle-wrapper').style.display = 'block'
    gitcalendar.span1 = item.date;
    gitcalendar.span2 = item.count;
    gitcalendar.x = event.clientX - 100;
    gitcalendar.y = event.clientY - 60
    }
    }
    //if(0< x - item.x <lineminwitdh&&0< y - item.y <lineminwitdh){
    //console.log(item.count,item.date);
    //}
    }
    }
    }
    }
    //数据统计算法
    function addlastmonth() {
    if (gitcalendar.thisdayindex === 0) {
    thisweekcore(52);
    thisweekcore(51);
    thisweekcore(50);
    thisweekcore(49);
    thisweekcore(48);
    gitcalendar.thisweekdatacore += gitcalendar.firstdate[6].count;
    gitcalendar.amonthago = gitcalendar.firstdate[6].date
    } else {
    thisweekcore(52);
    thisweekcore(51);
    thisweekcore(50);
    thisweekcore(49);
    thisweek2core();
    gitcalendar.amonthago = gitcalendar.first2date[gitcalendar.thisdayindex - 1].date
    }
    };

    function thisweek2core() {
    for (let i = gitcalendar.thisdayindex - 1; i < gitcalendar.first2date.length; i++) {
    gitcalendar.thisweekdatacore += gitcalendar.first2date[i].count
    }
    };

    function thisweekcore(index) {
    for (let item of gitcalendar.data[index]) {
    gitcalendar.thisweekdatacore += item.count
    }
    };

    function addlastweek() {
    for (let item of gitcalendar.lastweek) {
    gitcalendar.weekdatacore += item.count
    }
    };

    function addbeforeweek() {
    for (let i = gitcalendar.thisdayindex; i < gitcalendar.beforeweek.length; i++) {
    gitcalendar.weekdatacore += gitcalendar.beforeweek[i].count
    }
    };

    function addweek(data) {
    if (gitcalendar.thisdayindex === 6) {
    gitcalendar.aweekago = gitcalendar.lastweek[0].date;
    addlastweek()
    } else {
    lastweek = data.contributions[51];
    gitcalendar.aweekago = lastweek[gitcalendar.thisdayindex + 1].date;
    addlastweek();
    addbeforeweek()
    }
    }

    fetch(githubapiurl)
    .then(data => data.json())
    .then(data => {
    gitcalendar.data = data.contributions;
    gitcalendar.total = data.total;
    gitcalendar.first2date = gitcalendar.data[48];
    gitcalendar.firstdate = gitcalendar.data[47];
    gitcalendar.firstweek = data.contributions[0];
    gitcalendar.lastweek = data.contributions[52];
    gitcalendar.beforeweek = data.contributions[51];
    gitcalendar.thisdayindex = gitcalendar.lastweek.length - 1;
    gitcalendar.thisday = gitcalendar.lastweek[gitcalendar.thisdayindex].date;
    gitcalendar.oneyearbeforeday = gitcalendar.firstweek[0].date;
    gitcalendar.monthindex = gitcalendar.thisday.substring(5, 7) * 1;
    gitcalendar.montharrbefore = gitcalendar.month.splice(gitcalendar.monthindex, 12 - gitcalendar.monthindex);
    gitcalendar.monthchange = gitcalendar.montharrbefore.concat(gitcalendar.month);
    addweek(data);
    addlastmonth();
    responsiveChart();
    })
    .catch(function(error) {
    console.log(error);
    });

    //手机版更换为svg绘制
    if (document.getElementById("gitcalendarcanvasbox").offsetWidth < 500) {
    gitcalendar.simplemode = false
    }

    //当改变窗口大小时重新绘制canvas
    window.onresize = function() {
    if (gitcalendar.simplemode) responsiveChart()
    }

    //解决滚动滑轮时出现的标签显示
    window.onscroll = function() {
    if (document.querySelector('.angle-wrapper')) {
    document.querySelector('.angle-wrapper').style.display = 'none'
    }
    };
  3. 新建[Blogroot]\themes\butterfly\source\css\_layout\gitcalendar.styl:
    if hexo-config('gitcalendar.enable')
    .gitcalendar
    font-family SourceHanSans-Medium
    border 1px solid #DDDDDD
    border-radius 3px
    min-height 120px
    text-align center
    margin 0 auto
    border-width 0px
    width 100%
    display flex
    display -webkit-flex
    justify-content center
    align-items center
    flex-wrap wrap
    img
    &.spinner
    width 70px
    margin-top 50px
    min-height 70px

    .gitcalendar-graph text.wday,
    .gitcalendar-graph text.month
    font-size 10px
    fill #aaa

    .contrib-legend
    text-align right
    padding 0 14px 10px 0
    display inline-block
    float right
    .legend
    display inline-block
    list-style none
    margin 0 5px
    position relative
    bottom -1px
    padding 0
    li
    display inline-block
    width 10px
    height 10px

    .text-small
    font-size 12px
    color #767676

    .gitcalendar-graph
    padding 15px 0 0
    text-align center

    .contrib-column
    text-align center
    border-left 1px solid #ddd
    border-top 1px solid #ddd
    font-size 11px

    .contrib-column-first
    border-left 0

    .table-column
    padding 10px
    display table-cell
    width 33%
    vertical-align top

    .contrib-number
    font-weight 300
    line-height 1.3em
    font-size 24px
    display block

    .monospace
    text-align center
    color #000
    font-family monospace
    a
    color #1D75AB
    text-decoration none

    .contrib-footer
    font-size 11px
    padding 0 10px 12px
    text-align left
    width 100%
    box-sizing border-box
    height 26px

    .left
    &.text-muted
    float left
    margin-left 9px
    color #767676
    a
    color #4078c0
    text-decoration none

    .left.text-muted a:hover,
    .monospace a:hover
    text-decoration underline

    h2
    &.f4
    &.text-normal
    &.mb-3
    display none

    .float-left
    &.text-gray
    float left

    #user-activity-overview
    display none

    .day-tooltip
    white-space nowrap
    position absolute
    z-index 99999
    padding 10px
    font-size 12px
    color #959da5
    text-align center
    background rgba(0,0,0,.85)
    border-radius 3px
    display none
    pointer-events none
    strong
    color #dfe2e5
    &.is-visible
    display block
    &:after
    position absolute
    bottom -10px
    left 50%
    width 5px
    height 5px
    box-sizing border-box
    margin 0 0 0 -5px
    content " "
    border 5px solid transparent
    border-top-color rgba(0,0,0,.85)

    .position-relative
    width 100%
    padding-left 20px
    padding-right 20px

    @media screen and (max-width: 650px)
    .contrib-column
    display none

    .angle-wrapper
    z-index 9999
    display inline
    display none
    width 200px
    height 40px
    position relative
    padding 5px 0
    background rgba(0, 0, 0, 0.8)
    border-radius 8px
    text-align center
    color white
    span
    padding-bottom 1em
    &:before
    content ''
    width 0
    height 0
    border 10px solid transparent
    border-top-color rgba(0, 0, 0, 0.8)
    position absolute
    left 47.5%
    top 100%

    .angle-box
    position fixed
    padding 10px
  4. 修改[Blogroot]\themes\butterfly\layout\index.pug,引入gitcalendar结构,注意butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}
      extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    + if theme.gitcalendar.enable
    + .recent-post-item(style='width:100%;overflow:hidden;')
    + !=partial('includes/gitcalendar', {}, {cache:theme.fragment_cache})
    +postUI
    include includes/pagination.pug

    为了整体美观,如果你还添加了其他首页魔改,需要调整卡片之间的间隔。此处以gitcalendar为例。需要添加margin-bottom:20px;样式属性。(也可能不需要,视情况而定)


    extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    if theme.gitcalendar.enable
    .recent-post-item(style='width:100%;margin-bottom:20px;overflow:hidden;')
    !=partial('includes/gitcalendar', {}, {cache:theme.fragment_cache})
    if theme.catalogMagnet.enable
    .recent-post-item.photo-tag(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row;margin-bottom:20px;')
    !=partial('includes/catalogMagnet', {}, {cache:theme.fragment_cache})
    +postUI
    include includes/pagination.pug

  5. 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,引入vue依赖和gitcalendar脚本,这里为了保证依赖顺序,必须把vue放在gitcalendar-js之前。同时这里为了便于适配pjax重载,需要把gitcalendar-js.pug放到js-pjax下。
    • vue引入项配置(butterfly_v3.4.0+版本没有jquery这行,无需在意):
        div
      script(src=url_for(theme.CDN.jquery))
      + script(src=url_for(theme.CDN.vue))
      script(src=url_for(theme.CDN.utils))
      script(src=url_for(theme.CDN.main))
    • gitcalendar-js引入项配置:
        .js-pjax
      if theme.subtitle.enable && is_home() && theme.index_img !== false
      include ./third-party/subtitle.pug

      include ./third-party/math/index.pug

      if commentsJsLoad
      include ./third-party/comments/js.pug

      if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
      script(defer src=url_for(theme.CDN.busuanzi))
      + if theme.gitcalendar.enable
      + !=partial('includes/gitcalendar-js', {}, {cache:theme.fragment_cache})
  6. 修改[Blogroot]\_config.butterfly.yml添加gitcalendar配置项和vueCDN链接:
    • 添加gitcalendar配置项:
      #gitcalendar
      gitcalendar:
      enable: true
      simplemode: true
      #设为true时使用canvas绘制gitgitcalendar,
      #设为false时使用svg绘制gitgitcalendar
      #canvas:dom数少,但图像会发生模糊,自适应一般
      #svg:dom数多,图像清晰,自适应更佳
      user: Akilarlxh #这里填写你的github用户名
      apiurl: # 留空为默认公共API,自建api内容详见下节
      # 以下色调选择喜欢的一行保留即可。其余注释。
      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']" #天青色调
    • 添加vueCDN链接
        # CDN
      # Don't modify the following settings unless you know how they work
      # 非必要請不要修改
      CDN:
      # main
      main_css: /css/index.css
      jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      # custom
      + vue: https://cdn.jsdelivr.net/npm/vue@2.6.11 # vue.js依赖
  7. hexo clean && hexo g && hexo s即可查看预览。

自建API部署

点击查看自建API部署

虽然Vercel的访问应当没有次数限制,但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建API。使用Vercel部署,完全免费。且无需服务器。

以下是具体部署教程。与部署静态网站基本一致。因此配图沿用了站内教程使用Vercel来加速Hexo博客的内容。

  1. 访问Vercel官网,点击右上角的sign up进行注册
    极有可能遇到的bug

    若注册时提示Error:This user account is blocked.Contact support@vercel.com for more information.

    这是由于Vercel不支持大部分国内邮箱。可以将github账号主邮箱改为Gmail邮箱。
    但是根据群友反应,将github账号主邮箱切换为Gmail以后,Vercel又会提示需要使用手机号码验证。然而github并没有提供手机号码绑定的内容。
    综上,建议一开始注册github账号时就使用Gmail等国外邮箱进行注册。

    1. 国内访问Gmail的方案:
      • 直接使用QQ邮箱手机版,它提供Gmail的访问路线,可以直接注册并使用。
      • 使用Ghelper等浏览器插件访问。详情可以参考这篇文章:玩转Microsoft-Edge
    2. 若是执着于当前Github账号,可以参考以下方案进行尝试:
      • 完成了Gmail等国外邮箱的注册,打开github->头像->settings->Emails->Add email address,并完成邮箱验证。
      • Add email address下方的Primary email address选项中将Gmail设置为主邮箱。
  2. 注册完成后选择新建一个项目

  3. 填入@冰老师提供的自建API项目地址

    https://github.com/Zfour/python_github_calendar_api.git


    此时会提示这是否是你的仓库。

    NoVercel会自动帮你fork这个仓库到你的Github账号里。

  4. 导入静态页面仓库之前,需要为你的Github安装Vercel,此处建议选择All repositories,意为为所有仓库安装,当然,你也可以选择只为当前仓库安装,也就是Only select repositories

    如果哪天反悔了,可以在github->头像(右上角)->settings->Applications(列表下数上第四个)->Installed Github Apps里修改。


  5. 之后会识别出项目文件,单击Continue

    VercelPROJECT NAME可以自定义,不用太过在意,但是之后不支持修改,若要改名,只能删除PROJECT以后重建一个了。下方三个选项保持默认就好。

  6. 到此时,Vercel的部署已经完成,可以使用Vercel提供的默认域名来访问api链接。例如我获取到的默认域名为github-calendar-api.vercel.app,则用它来替换冰老师教程中的自建API,填写到[Blogroot]\_config.butterfly.yml中关于gitcalendarapiurl中。注意源码修改版不要带协议,不要带后缀。就填写给你的默认域名就好。而插件版需要带协议

    gitcalendar:
    enable: true
    simplemode: true
    user: Akilarlxh
    apiurl: github-calendar-api.vercel.app
    color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"

可能遇到的BUG

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