给hexo-theme-butterfly添加侧边栏电子钟

该文章图片素材及部分文字来自安知鱼博客的中给butterfly添加侧边栏电子钟一文，在此表示感谢。

anzhiyu给butterfly添加侧边栏电子钟

关于本插件（hexo-butterfly-clock-anzhiyu-yang）

本插件时基于作者:anzhiyu-c的hexo-butterfly-clock-anzhiyu插件进行二次修改

删除了原作者hexo-butterfly-clock-anzhiyu项目中index.js中无效的获取ip地址的代码，使首页加载速度加快！

'use strict'
// 全局声明插件代号
const pluginname = 'butterfly_clock_anzhiyu'
// 全局声明依赖
const pug = require('pug')
const path = require('path')
const urlFor = require('hexo-util').url_for.bind(hexo)
const util = require('hexo-util')

hexo.extend.filter.register('after_generate', function (locals) {
  // 首先获取整体的配置项名称
  const config = hexo.config.electric_clock ? hexo.config.electric_clock : hexo.theme.config.electric_clock
  // 如果配置开启
  if (!(config && config.enable)) return
  // 集体声明配置项
    const data = {
      enable_page: config.enable_page ? config.enable_page : "all",
      exclude: config.exclude,
      layout_type: config.layout.type,
      layout_name: config.layout.name,
      layout_index: config.layout.index ? config.layout.index : 0,
      loading: config.loading ? urlFor(config.loading) : "https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif",
      clock_css: config.clock_css ? urlFor(config.clock_css) : "https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css",
      clock_js: config.clock_js ? urlFor(config.clock_js) : "https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js",
      // 移除失效的IP API加载
      //ip_api: config.ip_api ? urlFor(config.ip_api) : "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0",
      qweather_key: config.qweather_key ? config.qweather_key : "b16a1fa0e63c46a4b8f28abfb06ae3fe",
      gaud_map_key: config.gaud_map_key ? config.gaud_map_key : "e2b04289e870b005374ee030148d64fd&s=rsv3",
      default_rectangle_enable: config.default_rectangle ? config.default_rectangle : false,
      rectangle: config.rectangle ? config.rectangle : "112.6534116,27.96920845",
    }
  // 渲染页面
  const temple_html_text = config.temple_html ? config.temple_html : pug.renderFile(path.join(__dirname, './lib/html.pug'),data)
  //cdn资源声明
    //样式资源
  const css_text = `<link rel="stylesheet" href="${data.clock_css}" />`
    //脚本资源
  //const js_text = `<script src="${data.ip_api}"></script><script data-pjax src="${data.clock_js}"></script>`
  const js_text = `<script data-pjax src="${data.clock_js}"></script>` // 移除失效的JS加载
  //注入容器声明
  var get_layout
  //若指定为class类型的容器
  if (data.layout_type === 'class') {
    //则根据class类名及序列获取容器
    get_layout = `document.getElementsByClassName('${data.layout_name}')[${data.layout_index}]`
  }
  // 若指定为id类型的容器
  else if (data.layout_type === 'id') {
    // 直接根据id获取容器
    get_layout = `document.getElementById('${data.layout_name}')`
  }
  // 若未指定容器类型，默认使用id查询
  else {
    get_layout = `document.getElementById('${data.layout_name}')`
  }

  //挂载容器脚本
  var user_info_js = `<script data-pjax>
  function ${pluginname}_injector_config(){
    var parent_div_git = ${get_layout};
    var item_html = '${temple_html_text}';
    console.log('已挂载${pluginname}')
    if(parent_div_git) {
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  }
  var elist = '${data.exclude}'.split(',');
  var cpage = location.pathname;
  var epage = '${data.enable_page}';
  var qweather_key = '${data.qweather_key}';
  var gaud_map_key = '${data.gaud_map_key}';
  var baidu_ak_key = '${data.baidu_ak_key}';
  var flag = 0;
  var clock_rectangle = '${data.rectangle}';
  var clock_default_rectangle_enable = '${data.default_rectangle_enable}';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    ${pluginname}_injector_config();
  }
  else if (epage === cpage){
    ${pluginname}_injector_config();
  }
  </script>`
  
  // 注入用户脚本
  // 此处利用挂载容器实现了二级注入
  hexo.extend.injector.register('body_end', user_info_js, "default");
  // 注入样式资源
  hexo.extend.injector.register('body_end', js_text, "default");
  // 注入脚本资源
  hexo.extend.injector.register('head_end', css_text, "default");
},
hexo.extend.helper.register('priority', function(){
  // 过滤器优先级，priority 值越低，过滤器会越早执行，默认priority是10
  const pre_priority = hexo.config.electric_clock.priority ?  hexo.config.electric_clock.priority : hexo.theme.config.electric_clock.priority
  const priority = pre_priority ? pre_priority : 10
  return priority
})
)

效果图：

如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突）或者anzhiyu的插件（因和风天气关闭了api地址，会拖慢页面的加载速度），在博客根目录[Blogroot]下打开终端，运行以下指令

# 卸载原版电子钟
npm uninstall hexo-butterfly-clock
# 卸载anzhiyu的插件版电子钟
npm uninstall hexo-butterfly-clock-anzhiyu --save

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

1 2	# 安装插件 npm install hexo-butterfly-clock-anzhiyu-yang --save

添加配置信息，以下为写法示例。
在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加：

# electric_clock
# see https://anzhiy.cn/posts/fc18.html
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
  clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
  clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.js
  qweather_key:  # 和风天气key
  gaud_map_key:  # 高得地图web服务key
  default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 112.6534116,27.96920845 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

其中qweather_key和gaud_map_key最好自己去申请对应的 API key，默认使用原作者anzhiyu-c的，可能会被限制，不保证可靠性。

API key 申请教程

qweather_key申请地址: https://id.qweather.com/#/login

gaud_map_key申请地址: https://lbs.amap.com/

和风天气 API-KEY

步骤	操作	截图
1	登录后进入控制台
2	创建应用
3	填写应用名称和 key 名称随意
4	选择 WebApi
5	复制 key

高德地图 API-KEY

步骤	操作	截图
6	登录后进入控制台
7	创建应用，名称随意，类型选其他
8	点击添加, `key` 名称随意，`服务平台` 选择 `Web 服务`,点击提交
9	复制 key

参数释义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path	【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填`all`，默认为`all`
exclude	path	【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
loading	URL	【可选】电子钟加载动画的图片
clock_css	URL	【可选】电子钟样式CDN资源
clock_js	URL	【可选】电子钟执行脚本CDN资源
qweather_key	【可选】和风天气key	【可选】和风天气key
gaud_map_key	【可选】高得地图web服务key	【可选】高得地图 web 服务 key（默认使用anzhiyu-c的）
default_rectangle	【可选】和风天气key	【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气
rectangle	【可选】高得地图web服务key	【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置