为404界面加上一言api

忽然发现这个博客的404界面有些简单，但是很喜欢这种极简的风格但总感觉少了些什么，想了想之前搞得一言的api。索性加上他，锦上添花一点。

首先先选一言的api，因为之前这种东西挺火的，有很多大佬开发出来，了，放到服务器上面供咱这种菜鸡使用了。因为我喜欢古诗词，所以选的古诗词的api

这个是人家的官网 https://gushi.ci/

其实官网上有很多的教程，就是看自己会不会用了。但我是在基础上微调的，就没用。这个是json格式的api，这里用的浏览器json解析插件是json-viewer

https://v1.jinrishici.com/all

首先先对这个简单分析一下

{
  "content": "冲波突出人齐譀，跃浪争先鸟退飞。",
  "origin": "竞渡诗 / 及第后江宁观竞渡寄袁州剌史成应元",
  "author": "卢肇",
  "category": "古诗文-节日-端午节"
}

首先这里面有content、origin、author、category这几个数据，我们用到的就是前三个，很容易理解，这三个分别是诗句，来源以及作者。然后就开始着手写了。
先引入jquery

<!-- 引入jQuery-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

再然后就开始对json文件进行解析，这里用的是ajax

<script>
  // 异步ajax  古诗词
    $.ajax({
        type: 'GET',
        url: 'https://v1.jinrishici.com/all',
        success: function(data){
            $(".text").text(data.content);  // 获取古诗词内容
            if (data.author || data.origin){  // 如果来源不为空 随便一个有就就进行显示
                $(".author").text(data.author);
                $(".lai").text("《"+data.origin+"》");
            } else {
                $(".author").hide();// 隐藏来源
            }
            // 淡入显示
            $(".show-sentence").fadeIn(4000)
        },
    });
</script>

接下来是显示部分

<!-- 配合css设置淡入的显示和字体以及其他的属性 -->
<div class="show-sentence">
    <!-- 这里接受显示的古诗词 -->
      <p class="text"></p>
      <!-- 这里若是判断作者名或者有的话就会显示 -->
      <p class="source">
          ———— <span class="lai"></span>  <span class="author"></span> 
      </p>
</div>

然后的话，如果你想显示美观一下的话，采用哪个404的颜色，然后仿照一下

/* 一言 */
    .text {
      color:#666;
      font-size: 20px;
      font-weight: bold;
      font-family: STHeiti;
    }
    .source {
      color:#666;
      font-size: 15px;
      font-weight: bold;
      padding-left: 40%;
      font-family: STHeiti;
    }
    .show-sentence {
      margin-top : 130px;
      display: none;    /* 开始隐藏div */
      text-align: center;
    }