为404界面加上一言api

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

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

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

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

https://v1.jinrishici.com/all

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

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

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

```html

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
```

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

```html
<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>
```

接下来是显示部分

```html

<div class="show-sentence">
    
      <p class="text"></p>
      
      <p class="source">
          ———— <span class="lai"></span>  <span class="author"></span> 
      </p>
</div>
```

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

```css
/* 一言 */
    .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;
    }
```