Timeline

前言

目前在网上已经有很多博主出了对博客引入这个API的教程，内容也已经比较详细，但是很多通过直接获取整张图片的形式；这样做省去了很多不必要的麻烦，只是图片在加载的时候会比较缓慢，而且在静态博客框架下开启图片懒加载后有几率发生图片加载失败的情况。还有一些博主也使用了直接请求文字内容的教程，而这些很多都是针对基于PHP搭建的博客，不能用于静态博客。

XMLHttpRequest求情Http

XMLHttpRequest是JavaScript中自带Http请求函数，可以快速调出浏览器调试界面发请求。在小规模的情况下可以有效减少其他依赖快速的接入接口。

在代码中主要值使用了XMLHttpRequest中的这几个方法，更多方法可以到 (XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org) 中查看更多方法使用技巧

开始引入

1. 注册ALAPI 账号获取Token

   

   注册账号后到用户管理界面获取Token并保存，在后面的代码部分会使用到

2. 代码部分

   <div>
       <div style="display: flex;flex-direction: column;align-items: center;">
           <h1 style="color: red;font-size: 2.5em;">每天60s看世界</h1>
           <img id="head-img" src="" alt="">
           <p id="news" style="width:90%; color: blue;font-size: 1.4em;">新闻正在加载</p>
       </div>
       <script>
           (() => {
               const news = document.querySelector('#news')
               const headImg = document.querySelector('#head-img')
               var xhr = new XMLHttpRequest()
               fetch('https://v2.alapi.cn/api/zaobao', {
                   method: "POST", // or 'PUT'
                   headers: {
                       "Content-Type": "application/json",
                   },
                   body: JSON.stringify({
                       token: 'wNj349sLbMqqUaew',
                       format: 'json',
                   }),
               }).then(res => res.json()).then(ori => {
                   var text = ori.data.news
                   var str = ''
                   for (let i = 0; i < text.length; i++) { str += text[i] + '<br>' }
                   // news.innerHTML = str;
                   headImg.src = ori.data.head_image
                   let i = 0;
                   let str_ = ''
                   let timer = setInterval(() => {
                       if (str_.length < str.length) {
                           str_ += str[i++]
                           news.innerHTML = '<p>' + str_ + '_</p>'                        //打印时加光标
                       } else {
                           clearInterval(timer)
                           news.innerHTML = '<p>' + str_ + '</p>'
                       }
                   }, 50)
               })
           })()
       </script>
   </div>

   找到代码中xhr.send('token=粘贴刚刚获取到的Token&format=json');部分，将刚刚获取到的Token粘贴到中文标注部分。

引入到博客中

将html代码整个的粘贴到新建页面或者其他要添加的地方。