博客園公告欄增加每日一言功能

• 先上個效果展示：

功能：訪客每次進入博客界面時，通過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>
<!--End-->
<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代表category，即類型）

https://v1.hitokoto.cn/?c=f&encode=text （請求獲得一個來自網絡的句子，並以純文本格式輸出）

具體的一些細節和設置請點擊傳送門：https://hitokoto.cn/api

 

• js代碼剖析：

先通過調用API接口，獲得響應后取得json數據，之后解析取得每日一言的內容，通過dom選擇器獲取

需要填充每日一言的標簽，把內容填充進去。

 

 到此為止：保存設置，刷新博客界面，每日一言效果實現，工作宣告完成