zoukankan      html  css  js  c++  java
  • 博客园公告栏增加每日一言功能

    • 先上个效果展示:

    功能:访客每次进入博客界面时,通过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代表Cat,即类型)

    https://v1.hitokoto.cn/?c=f&encode=text (请求获得一个来自网络的句子,并以纯文本格式输出)

    具体的一些细节和设置请点击传送门:https://hitokoto.cn/api

    • js代码剖析:

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

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

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

     

     

     

  • 相关阅读:
    XML和JSON优缺点
    JSON与XML优缺点对比分析
    json数据格式
    ajax 请求二进制流 图片
    常用网站
    Js setTimeout 用法
    js Indexof的用法
    02_虚拟机的安装和SecureCRT、FileZilla、Xmanage、UltraEdit工具的介绍
    01_Hadoop学习笔记内容说明
    sudoers文件设置sudo命令无密码(root密码)登录
  • 原文地址:https://www.cnblogs.com/ubantu/p/11194235.html
Copyright © 2011-2022 走看看