序言：效果展示

做这个的目的是想学习一下 ajax 的跨域访问 API，但实际上却很难弄。

于是最终采用本地读取 json 的方法，制作了这个小部件。

相比于单独写一个页面而言，这个小部件更具有观赏性。

json 因为使用的是原生的百度百科 API 下载的 json，所以自带百度百科的链接。

废话不多说，开始学习吧。

API：https://baike.baidu.com/cms/home/eventsOnHistory/09.json
后面的数字代表月份

步骤 1：编写小部件代码

在”\themes\butterfly\layout\includes\widget”文件下复制某个 PUG，重命名为”card_history.pug”

打开该文件，删除原有代码，将以下代码粘贴进去。注意 PUG 的空格敏感。

步骤 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
if theme.aside.enable
  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
        !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

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

搜索到”aside:”设置处

添加 history 开关代码：

1
2
3
4
5
6
7
8
9
10
aside:
    enable: true
    mobile: true # display on mobile
    position: right # left or right
    card_recent_news:
        enable: true
    card_shuo:
        enable: true
    card_history:
        enable: true

步骤 3：本地 json 配置

点击下载 json 文件。
在 hexo 根目录”source”文件夹下新建”history”文件夹，在”\source\history”路径下解压”json.zip”


PS：此 json 为本人修改过的 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
39
40
41
42
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,
    //返回数据格式为json,也可以是其他格式如
    dataType: "json",
    //请求成功后要执行的函数，拼接html
    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
32
33
34
35
$(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);
      }
    );
  }
});

步骤 6：接入 JS

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

搜索到”inject:”设置处

添加以下代码：

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

总结

若有问题可以与我邮件联系499984532@qq.com。