博客园公告栏增加每日一言功能

心已赠人 2021-10-15 02:25 479阅读 0赞

*  **先上个效果展示：**

![1741496-20190716121727485-1100593052.png][]![1741496-20190716122132145-1082875484.png][]

**功能：访客每次进入博客界面时，通过js自行访问api接口获得一言的json字符****串通过脚本解析json数据以达到更新每日一言的目的**

*  **具体做法：**

**打开博客设置界面，将下方代码放到博客设置中的博客侧边公告栏的位置，之后按自****己喜好调整好位置。****完成这步****之前请确保获取了js权限，**

**如无此权限需要****先向****博客园****申请js权限**

<div id="hitokoto"style="font-size:16px;color:red;">:D 获取中...</div>
    <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
    
    <script>
      fetch('https://v1.hitokoto.cn')
        .then(function (res){
          return res.json();
        })
        .then(function (data) {
          var hitokoto = document.getElementById('hitokoto');
          hitokoto.innerText = "每日一言："+data.hitokoto; 
        })
        .catch(function (err) {
          console.error(err);
        })
    </script>

*  ** 参数设置：**

**可以通过所访问的API接口的参数来进行每日一言的类型设置****，共有七种类型可供选择，**

**七种类型及其对应参数分别为：**

**动画（a）、漫画（b）、游戏（c）、小说（d）、原创（e）、****网****络（f）、其他（g）。**

**请求方式如下：**

**https://v1.hitokoto.cn/（从7种分类中随机抽取）  
  
https://v1.hitokoto.cn/?c=b （请求获得一个分类是漫画的句子，c代表Cat，即类型）  
  
https://v1.hitokoto.cn/?c=f&encode=text （请求获得一个来自网络的句子，并以纯文本格式输出）**

**具体的一些细节和设置请点击传送门：[https://hitokoto.cn/api][https_hitokoto.cn_api]**

*  **js代码剖析：**

**先通过调用API接口，获得响应后取得json数据，之后解析取得每日一言的内容，通过dom选择器获取**

**需要填充每日一言的标签，把内容填充进去。**

** 到此为止：保存设置，刷新博客界面，每日一言效果实现，工作宣告完成**

转载于:https://www.cnblogs.com/ubantu/p/11194235.html

[1741496-20190716121727485-1100593052.png]: https://img2018.cnblogs.com/blog/1741496/201907/1741496-20190716121727485-1100593052.png
[1741496-20190716122132145-1082875484.png]: /images/20211015/1adb32a94ee34f478e5301e12cbaebd6.png
[https_hitokoto.cn_api]: https://hitokoto.cn/api