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

#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 开关代码：

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

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

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

基础版本

打开 clock 文件夹中的 clock.js。

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

将该部分链接的 key 值（888888888-8888-8888-8888-888888888888）改为步骤一在 airvisual 官网申请的 key 值。

内测 3.1 版本

打开 clock 文件夹中的 clock.js。

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

将该部分链接的 key 值（888888888888888888888）改为步骤一在 openweathermap.org 官网申请的 key 值。

步骤 4：接入 CSS 与 JS

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”inject:”设置处

添加以下代码：

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。
或参考https://akilar.top/posts/4e39cf4a/ 使用无 jquery 版本。

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>