教程：基于 Butterfly 主题的模拟电子钟侧边栏小部件 3.0 版

原文链接：https://zfe.space/post/56348.html
作者：小冰博客（しゅふがく）

序言

效果展示

3.0 模拟时钟小部件主要包含：

  • 日期（年、月、日、星期）
  • 天气（天气图标、温度）
  • 湿度（百分比）
  • 空气质量（US AQI）
  • 时间（当地时间、AM/PM）
  • 地理位置（IP 地址地理位置）
  • 每日访问上限：约 500 次
  • 每月访问上限：10000 次

预览地址：https://zfe.space

调用过猛可能会导致超出访问限制而不显示。

相比 1.0 版本，加快了访问速度并优化了加载效果。
相比 2.0 版本，通过 Vue 替换 jQuery 的 DOM 操作提升了性能。
解决了 date class 会导致相关文章的时间样式出错的 BUG。

资源包地址

内测 3.1 版本

3.1 内测版主要包含：

  • 日期（年、月、日、星期）
  • 天气（天气图标、温度）
  • 时间（当地时间、AM/PM）
  • 地理位置（相比 3.0 优化了 IP 信息定位不准确问题）
  • IP 信息（替代了空气质量信息）
  • 每日访问上限：无限次
  • 相比 3.0 优化了加载动画和信息显示效果

步骤 1：申请 API Key

基础 3.0 版本

这里介绍如何申请 AirVisual API Key。

  1. 打开网站注册账号：https://www.iqair.com/auth/login
  2. 登录后访问：https://www.iqair.com/dashboard/api
  3. 点击 “+ NEW KEY” 按钮，选择 “Community” 得到对应的 Key

内测 3.1 版本

  1. 打开网站注册账号：https://openweathermap.org，验证邮箱
  2. 打开 https://home.openweathermap.org/api_keys 得到对应的 Key

步骤 2：添加小部件 PUG

  1. 将资源包中 pug 文件夹的 card_clock.pug 文件放入 themes/butterfly/layout/includes/widget 目录下
  2. 将资源包中 pug 文件夹的 index.pug 文件放入同目录替换（适用于 Butterfly 3.3 以上版本）

若你的版本较低或存在侧边栏魔改，请打开 themes/butterfly/layout/includes/widget/index.pug，将以下代码添加至 card_author 代码块后：

1
2
if theme.aside.card_clock.enable
  !=partial('includes/widget/card_clock', {}, {cache: theme.fragment_cache})

添加后的完整示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#aside_content.aside_content
  if theme.aside.card_author.enable
    !=partial('includes/widget/card_author', {}, {cache: theme.fragment_cache})

  if theme.aside.card_announcement.enable
    !=partial('includes/widget/card_announcement', {}, {cache: theme.fragment_cache})

  if theme.aside.card_clock.enable
    !=partial('includes/widget/card_clock', {}, {cache: theme.fragment_cache})

  .sticky_layout
    if is_post()
      if showToc
        include ./card_post_toc.pug
    if theme.aside.card_recent_post.enable
      !=partial('includes/widget/card_recent_post', {}, {cache: theme.fragment_cache})
    if theme.ad && theme.ad.aside
      !=partial('includes/widget/card_ad', {}, {cache: theme.fragment_cache})
    else
      if theme.aside.card_recent_post.enable
        !=partial('includes/widget/card_recent_post', {}, {cache: theme.fragment_cache})
      if theme.ad && theme.ad.aside
        !=partial('includes/widget/card_ad', {}, {cache: theme.fragment_cache})
    if theme.newest_comments.enable
      !=partial('includes/widget/card_newest_comment', {}, {cache: theme.fragment_cache})
    if theme.aside.card_categories.enable
      !=partial('includes/widget/card_categories', {}, {cache: theme.fragment_cache})
    if theme.aside.card_tags.enable
      !=partial('includes/widget/card_tags', {}, {cache: theme.fragment_cache})
    if theme.aside.card_archives.enable
      !=partial('includes/widget/card_archives', {}, {cache: theme.fragment_cache})
    if theme.aside.card_webinfo.enable
      !=partial('includes/widget/card_webinfo', {}, {cache: theme.fragment_cache})

打开 themes/butterfly/_config.yml，搜索 aside: 设置处，添加 clock 开关：

1
2
3
aside:
  card_clock:
    enable: true

步骤 3：导入 CSS、JS、图片等资源文件

将下载包中的 clock 文件夹放入博客根目录的 source 文件夹下。

注意：如果报错，请将文件夹中的 pug 文件夹删除！

基础 3.0 版本

打开 clock/clock.js，找到这行：

1
let clockurl = "https://api.airvisual.com/v2/nearest_city?key=88888888-8888-8888-8888-888888888888";

将 key 值改为你在 AirVisual 官网申请的 Key。

内测 3.1 版本

打开 clock/clock.js，找到这行：

1
const mykey = { weather: "888888888888888888888" };

将 key 值改为你在 openweathermap.org 官网申请的 Key。

步骤 4：接入 CSS 与 JS

打开 themes/butterfly/_config.yml，搜索 inject: 设置处，添加：

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/clock/css/clock.css" />
  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    - <script src="/clock/js/clock.js"></script>

Butterfly 3.4 以上版本请引入 jQuery：

1
2
3
4
5
6
7
inject:
  head:
    - <link rel="stylesheet" href="/clock/css/clock.css" />
  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    - <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
    - <script src="/clock/js/clock.js"></script>

总结

在本地进行开发时，基础版建议关闭 card_clock: enable: true 选项，以免多次调用超出访问上限。
3.1 内测版无访问次数限制。

相关评论常见问题

Q: 开启 Pjax 后控制台报错 Identifier 'mykey' has already been declared

原因：const 声明的变量会重复声明。

解决方法：

  1. 在另外的 JS 中单独使用 const 声明 mykey 且不添加 data-pjax
  2. 将 const 改成 let 或 var

Q: 开启 Pjax 不能加载，只有强制刷新才能显示

原因：Pjax 切换页面后脚本没有重新执行。

解决方法：给 script 标签加上 data-pjax 属性。