hexo-butterfly-首页改造

<img src="https://ghchart.rshah.org/2016rshah" alt="2016rshah's Github chart" />

npm install hexo-filter-gitcalendar --save

# 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

npm install hexo-butterfly-swiper --save

# 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

# 文章模板参考
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index:  #置顶轮播图顺序，需填非负整数，数字越大越靠前
---

# 插件装载
npm i hexo-butterfly-article-double-row --save

butterfly_article_double_row:
  enable: true

hexo clean & hexo g & hexo s

<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>

# html写法
<div id="he-plugin-simple"></div>
# pug写法
#he-plugin-simple

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>

# 步骤说明
1.引入hexo-magnet插件
2.配置主配置文件_config.yml
3.hexo三连启动测试

npm/cnpm i hexo-magnet --save

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>