构建步骤
参考githubchart-api,通过img方式引入
<img src="https://ghchart.rshah.org/2016rshah" alt="2016rshah's Github chart" />
构建步骤:可参考Akilar原博
<1>引入hexo-filter-gitcalendar
npm install hexo-filter-gitcalendar --save
<2>配置主配置文件,引入gitcalendar配置
# hexo-filter-gitcalendar
gitcalendar:
enable: true # 开关
priority: 5 # 过滤器优先权
enable_page: all # 应用页面
# butterfly挂载容器
layout:
type: id
name: recent-posts
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']" # 橘黄色调
container: .recent-post-item(style='width:100%;height:auto;padding:10px;') # 父元素容器,需要使用pug语法
gitcalendar_css: https://unpkg.zhimg.com/hexo-filter-gitcalendar/lib/gitcalendar.css
gitcalendar_js: https://unpkg.zhimg.com/hexo-filter-gitcalendar/lib/gitcalendar.js
基于Vercel自建API构建引用的是:python-github-calendar-api
挂载容器配置说明
不同主题挂载容器不同,根据应用主题进行配置即可
layout参数配置(挂载容器)/主题 | butterfly | volantis | matery | mengd |
---|---|---|---|---|
type | id | class | id | class |
name | recent-posts | l_main | indexCard | content |
index | 0 | 0 | 0 | 0 |
色调 | 参数 |
---|---|
橘黄色调 | “[‘#e4dfd7’, ‘#f9f4dc’, ‘#f7e8aa’, ‘#f7e8aa’, ‘#f8df72’, ‘#fcd217’, ‘#fcc515’, ‘#f28e16’, ‘#fb8b05’, ‘#d85916’, ‘#f43e06’]” |
浅紫色调 | [‘#ebedf0’, ‘#fdcdec’, ‘#fc9bd9’, ‘#fa6ac5’, ‘#f838b2’, ‘#f5089f’, ‘#c4067e’, ‘#92055e’, ‘#540336’, ‘#48022f’, ‘#30021f’] |
翠绿色调 | [‘#ebedf0’, ‘#f0fff4’, ‘#dcffe4’, ‘#bef5cb’, ‘#85e89d’, ‘#34d058’, ‘#28a745’, ‘#22863a’, ‘#176f2c’, ‘#165c26’, ‘#144620’] |
天青色调 | [‘#ebedf0’, ‘#f1f8ff’, ‘#dbedff’, ‘#c8e1ff’, ‘#79b8ff’, ‘#2188ff’, ‘#0366d6’, ‘#005cc5’, ‘#044289’, ‘#032f62’, ‘#05264c’] |
构建步骤
<1>插件安装hexo-butterfly-swiper
npm install hexo-butterfly-swiper --save
<2>主配置文件中引入轮播图插件
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
priority: 5 # 过滤器优先权
enable_page: all # 应用页面
timemode: date # date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr:
swiper_css: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.css
swiper_js: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.js
custom_css: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiperstyle.css
custom_js: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper_init.js
点击查看参数配置说明
参数 | 备选值/类型 | 释义 |
---|---|---|
priority | number | 【可选】过滤器优先级,数值越小,执行越早,默认为10,选填 |
enable | true/false | 【必选】控制开关 |
enable_page | path/all | 【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为all |
exclude | path | 【可选】填写想要屏蔽的页面,可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。 |
timemode | date/updated | 【可选】时间显示,date为显示创建日期,updated为显示更新日期,默认为date |
layout.type | id/class | 【可选】挂载容器类型,填写id或class,不填则默认为id |
layout.name | text | 【必选】挂载容器名称 |
layout.index | 0和正整数 | 【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位 |
error_img | url | 封面图片加载失败时的替换图片 |
insertposition | text | ‘beforebegin’:元素自身的前面。’afterbegin’:插入元素内部的第一个子节点之前。’beforeend’:插入元素内部的最后一个子节点之后。’afterend’:插入元素自身的后面。 |
default_descr | text | 【可选】默认文章描述 |
swiper_css | url | 【可选】自定义的swiper依赖项css链接 |
swiper_js | url | 【可选】自定义的swiper依赖项加js链接 |
custom_css | url | 【可选】适配主题样式补丁 |
custom_js | url | 【可选】swiper初始化方法 |
<3>修改文章模板/scaffolds/post.md,在front-matter中引入swiper_index
参数(非负整数,值越大越靠前)
针对可以选择性配置需要显示在首页的内容
# 文章模板参考
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: #置顶轮播图顺序,需填非负整数,数字越大越靠前
---
双栏布局引入参考文章
构建步骤
<1>插件装载:hexo-butterfly-article-double-row
# 插件装载
npm i hexo-butterfly-article-double-row --save
<2>配置主配置文件,引入butterfly_article_double_row
配置
butterfly_article_double_row:
enable: true
<3>配置完成重启查看效果
hexo clean & hexo g & hexo s
构建步骤
具体价格方案可参考官网说明,择优选择
<2>创建天气插件(生成相关的JS文件)
个人以和风天气为参考进行调整,注册登录->进入控制台,自定义创建插件
参数配置完成则选择“生成代码”选项,代码示例参考如下。
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "01234",
"background": "1",
"tmpColor": "FF9900",
"tmpSize": "16",
"cityColor": "CFE2F3",
"citySize": "16",
"aqiColor": "DD7E6B",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "auto",
"fixed": "false",
"vertical": "center",
"horizontal": "center",
"key": "key"
}
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
可结合窗口进行调试,主要注意的是相对位置的调节,对应选择固定在浏览器中,随后大致控制其与导航栏的站点标题的相对距离即可(最好通过F12窗口进行适配调节,主要是修改CONFIG中的left、top配置即可)
<3>修改主题文件内容
\themes\butterfly\layout\includes\headers
目录下的 nav.pug 文件中配置装载组件# html写法
<div id="he-plugin-simple"></div>
# pug写法
#he-plugin-simple
hf_weather.js
将上述文件的script中的代码段写入自定义的hf_weather.js
,随后在主题配置文件中inject配置注入自定义的hf_weather.js
和官方提供的he-simple-common.js
inject:
bottom:
- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
- <script async src="/js/hf_weather.js"></script>
<4>后续维护
进入和风天气控制台,选择插件管理可查看自定义的插件内容,还可通过其他模块查看数据访问情况
最近正在把之前的一些碎碎念文章清理一波,顺便对文章进行一个比较清晰的分类,本篇参考小冰博客的hexo-magnet教程作说明,其主要步骤简述如下所示:
# 步骤说明
1.引入hexo-magnet插件
2.配置主配置文件_config.yml
3.hexo三连启动测试
引入hexo-magnet插件
npm/cnpm i hexo-magnet --save
配置主配置文件_config.yml
magnet:
enable: true # 是否开启插件
priority: 1 # 插件的叠放顺序,数字越大越靠前(如果引用了类似 hexo-githubcalendar插件,则相应需调整并根据提示升级插件)
enable_page: / # 路由地址
type: categories # 选择筛选分类还是标签
devide: 2 # 表示分隔的列数,2 表示分为两列展示
display: # 要展示的列表配置(按照name-标签/分类名称、display_name-展示名称、icon-图标这个格式进行构建)
- name: 教程
display_name: 小冰の魔改教程
icon: 📚
color_setting: # 颜色配置项
text_color: black # 文字颜色
text_hover_color: white # 鼠标悬浮颜色
background_color: "#f2f2f2" # 文字背景颜色
background_hover_color: "#b30070" # 文字背景颜色
layout: # 挂载组件
type: id # class&id
name: recent-posts
index: 0
temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>' # html模板,包含挂载容器
plus_style: ""
参数说明
<div name="我是墙" id="recent-posts">
<!-- id=>type recent-posts=>name -->
<div name="我是画框">
<div name="我是纸">
<!--这里通过js挂载magnet,也就是画画-->
</div>
</div>
</div>