把github贡献日历部署到博客上(二)

发表于 更新于 分类于 阅读次数： Waline：

前言

原教程已经说得很详细了，这里演示 简化版

原教程源自 Gainii 大佬

12thstan's Github Chart

效果展示

教程

直接部署

1
<img src="https://ghchart.rshah.org/github用户名" alt="github用户名's Github chart" />

  • 如我在当前页面下部署
12thstan's Github chart 
1
<img src="https://ghchart.rshah.org/12thstan" alt="12thstan's Github chart" />

自定义 颜色

  • 自定义 颜色 #000000 十六进制颜色代码 注意格式不带#
1
<img src="https://ghchart.rshah.org/000000/github用户名" alt="github用户名's Github Chart" />

  • 蓝色 #0000FF
12thstan's Github Chart 
1
<img src="https://ghchart.rshah.org/0000FF/12thstan" alt="12thstan's Github Chart" />
  • 红色 #ff0000
12thstan's Github Chart 
1
<img src="https://ghchart.rshah.org/ff0000/12thstan" alt="12thstan's Github Chart" />
  • 绿色 #00785D
12thstan's Github Chart 
1
<img src="https://ghchart.rshah.org/00785D/12thstan" alt="12thstan's Github Chart" />

部署到 Next 主题

  • 几乎全局 部署

  1. 修改 主题目录 [Blogroot]\themes\next\layout\ _layout.swig (其他版本可能叫 _layout.njk ) ，在 {% include '_partials/header/sub-menu.swig' %} (其他版本可能叫 sub-menu.njk ) 下 ， 添加以下内容 ， 注意格式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
              {% include '_partials/header/sub-menu.swig' %}
    +          <!-- Github Calendar -->
    +          {%- if page.type !== 'categories' and page.type !== 'tags' and page.type !== 'schedule' and page.type !== 'works' and page.type !== 'about' and page.type !== 'post'%}
    +            <div class="post-block animated fadeIn">
    +              <h5 class="post-title" itemprop="name headline">
    +                <!-- github用户名改自己的 -->
    +                <a href="https://github.com/github用户名" class="post-title-link" itemprop="url">Github Contribution Calendar</a>
    +              </h5>
    +              <div class="post-body animated fadeInDown" itemprop="articleBody">
    +                <!-- 颜色默认蓝色 -->
    +                <img style="width: 100%; margin-top: 30px;" src="https://ghchart.rshah.org/409ba5/github用户名" alt="github用户名's Github Chart" />
    +              </div>
    +            </div>
    +          {%- endif %}

  2. 修改 github用户为自己的 ，颜色默认蓝色 可自定义 ，修改完 如图 1 所示

图 1

  1. 三连 ，即可
    1
    hexo clean && hexo g && hexo s

部分自定义

不在 每篇文章顶部 显示

  • 需要在 每篇文章顶部都加上 type: "about" 即可， 注意格式
    1
    2
    3
    4
    5
    6
    ---
    title: test
    date: 2022-05-29 16:35:15
    tags:
    +   type: "post"
    ---

在 关于 显示

  • 修改 新增代码这行

    1
    {%- if page.type !== 'categories' and page.type !== 'tags' and page.type !== 'schedule' and page.type !== 'works' and page.type !== 'about' and page.type !== 'post'%}

    中，把 page.type !== 'about' and 这句代码删掉 ，然后保存，三连 即可

    1
    2
    <!-- 删除前 -->
    page.type !== 'works' and page.type !== 'about' and page.type !== 'post'
    1
    - page.type !== 'about' and
    1
    2
    <!-- 删除后 -->
    page.type !== 'works' and page.type !== 'post'

  • 同理 在 标签 和 分类 都显示，把 page.type !== 'categories' and page.type !== 'tags' and 这两句代码删除 即可
    1
    - page.type !== 'categories' and page.type !== 'tags' and

补充

如不能使用 HTML语句 可看另一种写法 把github贡献日历部署到博客上(二)

第一篇 把github贡献日历部署到博客上(一)