教程：基于 Butterfly 主题的历史上的今天侧边栏小部件

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

序言

做这个小部件的目的是学习 AJAX 跨域访问 API，但实际上很难弄。
最终采用本地读取 JSON 的方法，制作了这个小部件。

相比单独写一个页面，侧边栏小部件更具有观赏性。

JSON 使用的是原生百度百科 API 下载的 JSON，自带百度百科链接。

API 地址

1
https://baike.baidu.com/cms/home/eventsOnHistory/09.json

后面的数字代表月份（01-12）。

步骤 1：编写小部件 PUG

在 themes/butterfly/layout/includes/widget 文件夹下复制某个 PUG 文件，重命名为 card_history.pug，删除原有代码，粘贴以下代码（注意 PUG 的空格敏感）：

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

步骤 2：将小部件植入侧边栏

打开 themes/butterfly/layout/includes/widget/index.pug，将 card_history 代码添加至 card_author 代码块后：

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
#aside_content.aside_content
  if page.aside !== false
    #aside_content.aside_content
      if theme.aside.card_author.enable
        !=partial('includes/widget/card_author', {}, {cache: theme.fragment_cache})

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

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

      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.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: 设置处，添加 history 开关：

1
2
3
aside:
  card_history:
    enable: true

步骤 3：本地 JSON 配置

  1. 下载 JSON 文件：https://zfe.space/post/42391.html（页面内有下载链接）
  2. 在博客根目录 source 文件夹下新建 history 文件夹
  3. 在 source/history 路径下解压 JSON.zip

注意：此 JSON 为修改过的版本，删除了一层数组外壳，对日期键值加入了 “S” 使其非数字化。

步骤 4：编写 JS

在 source 文件夹下新建 js 文件夹，新建 history.js：

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
34
35
36
37
38
var myDate = new Date();
var myMonth = myDate.getMonth() + 1;
if (myMonth < 10) {
  getMonth = "0" + String(myMonth);
} else {
  getMonth = String(myMonth);
}
var getDate = String(myDate.getDate());
if (getDate < 10) {
  getDate = "0" + String(getDate);
} else {
  getDate = String(getDate);
}
var getMonthDate = "S" + getMonth + getDate;
var geturl = "/history/json/" + getMonth + ".json";

$(function () {
  $.ajax({
    type: "GET",
    url: geturl,
    dataType: "json",
    success: function (data) {
      var str = '<ul style="list-style: none;padding-inline-start: 0px;">';
      $.each(data[getMonthDate], function (i, n) {
        str += '<li style="list-style: none;height:100px;">';
        str +=
          '<p style="color: #858585;Font-style:italic;font-weight:lighter;float:left;width:100%;font-size: 14px;margin:0px; padding:0px;display:inline-block">';
        str += "<i>A.D.</i>" + n.year + "</p>";
        str +=
          '<p style="width:100%;float:left;margin:0px; padding:0px;display:inline-block" >';
        str += n.title + '<i style="Font-style:normal;">。</i>';
        str += "</p>" + "</li>";
      });
      str += "</ul>";
      $("#history-card").append(str);
    },
  });
});

在 source/js 文件夹新建 historyroll.js（自动滚动效果）：

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
$(function () {
  var $this = $("#history-news");
  var scrollTimer;
  $this
    .hover(
      function () {
        clearInterval(scrollTimer);
      },
      function () {
        scrollTimer = setInterval(function () {
          scrollNews($this);
        }, 4000);
      }
    )
    .trigger("mouseleave");

  function scrollNews(obj) {
    var $self = obj.find("ul");
    var lineHeight = $self.find("li:first").height();
    $self.animate(
      { marginTop: -lineHeight + "px" },
      200,
      function () {
        $self
          .css({ marginTop: 10 })
          .find("li:first")
          .appendTo($self);
      }
    );
  }
});

步骤 5：接入 JS

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

1
2
3
4
inject:
  bottom:
    - <script src="/js/history.js"></script>
    - <script src="/js/historyroll.js"></script>

效果

  • 侧边栏显示当天日期对应的历史事件
  • 每条显示年份 + 事件标题
  • 每 4 秒自动滚动一条
  • 鼠标悬停暂停滚动