hexo插件汇总
1 github热图日历
参考内容
正常步骤
1. 执行 npm 安装操作
| POWERSHELL
复制成功npm i hexo-githubcalendar
cnpm i hexo-githubcalendar
|
注意，一定要加 --save，不然本地预览的时候可能不会显示！！！
2. 新增网站根目录_config 配置项 (不是主题的)：
参考https://github.com/Zfour/hexo-github-calendar/issues 找到不同主题的配置（下方为Fluid主题）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
githubcalendar:
enable: true
priority: 0
enable_page: /
user: tsuiwade
layout:
type: class
name: container
index: 1
githubcalendar_html: '<div id="github-calendar" style="width:100%;height:auto;padding:10px;margin-bottom:20px"><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: 200px
mobile_minheight: 0px
color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']"
api: https://python-github-calendar-api.vercel.app/api
calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
plus_style: "#github_container > .position-relative > .border{border:0!important}#github-calendar{position: relative;margin-top: -2rem;background-color: var(--board-bg-color);transition: background-color 0.2s ease-in-out;border-radius: 0.5rem;z-index: 3;-webkit-box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);}"
|
3. 修改config
user改成自己的github用户名
博客中提到的另外一种本地化方案
普通的 div+js 的挂载方法
如果你觉得 npm 安装挂载太过繁琐，你可以使用传统的主题修改模板的挂载方法。
你需要用到 https://github.com/Zfour/hexo-github-calendar 中的 githubcalendar.js 文件
下载后，修改用户名，将其引入到主题中。
如 butterfly 中通过 inject 引入。
| inject:
head:
bottom:
- <scscrip data-pjax src="/js/githubcalendar.js"></script>
|
然后修改主页的模板。
如 butterfly 中修改 index.pug，在文章容器中加入一个 id 为
github_container 的 div
| extends includes/layout.pug
block content
include ./includes/mixins/post-ui.pug
.recent-post-item(style='width:100%;height:auto;padding:10px;')
+postUI
include includes/pagination.pug
|
我的步骤
我做的修改：
1. fluid主题的插件使用
参考https://github.com/Zfour/hexo-github-calendar/issues 找到不同主题的配置（下方为Fluid主题）
2. 搬运插件到自己的网站中并插入
正常用法是使用插件博客中的api，我觉得不靠谱就从cdn上搬运下来用hexo的infector手动插入到页面中
3. 修改插件位置
在网页内查看对应容器从而调整layout，具体配置内容参考我的yaml配置
4. 兼容背景透明设置
调整priority，具体配置内容参考我的yaml配置
5. 方块颜色设置
从博客中提到的另外一种本地化方案的javascript中找到了颜色配置，随复制到自己的yaml对应位置中
我的yaml配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| githubcalendar:
enable: true
priority: 0
enable_page: /
user: greensch
layout:
type: id
name: board
index: 1
githubcalendar_html: '<div id="github-calendar" style="width:100%;height:auto;padding:10px;margin-bottom:20px;box-shadow:none;"><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: 200px
mobile_minheight: 0px
color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']"
api: https://python-github-calendar-api.vercel.app/api
calendar_js: /js/githubcalendar.js
plus_style: "#github_container > .position-relative > .border{border:0!important}#github-calendar{position: relative;margin-top: -2rem;background-color: var(--board-bg-color);transition: background-color 0.2s ease-in-out;border-radius: 0.5rem;z-index: 3;-webkit-box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);}"
|