给网站添加每日简报的页面

前言

添加这个每日60s有两种方法，一种是用接口获取文章，另一种则是直接用接口图片，接下来我把这两种方法分享一下，不担保接口会失效，后期失效了可以自己网站找一下接口。

方式一

这种比较方便只要简单的几句js代码就能搞定，用到的地方有两处

1.全局js文件

2.文章或者页面

在全局js文件里添加这句代码就行了，代码如下

//每日60秒
var str='http://api.03c3.cn/api/zb';
$.getJSON(str, function(json){
  var imgid = json.imageUrl;
  document.getElementById("suolue").src=imgid;
});

添加完js代码后，接下来新建文章或者页面添加以下代码发布即可！

<img id="suolue">

方式二

体验地址：https://kui.li/news

要在主题目录源码新增文件命名为：template-x60s.php

在template-x60s.php下添加以下代码(部分数据自行修改)，保存

<?php

/**
 * Template name: 每日简文
 * Description:   mrjw for Kui.Li
 */
function ttsistens(){//60s
  $sixs = json_decode(file_get_contents("https://www.zhihu.com/api/v4/columns/c_1261258401923026944/items"),true)['data'][0]['content'];
  return $sixs;
};
get_header();
?>
<style>
figcaption {font-size: 13px;text-align: center;color: #737373;}
.sixten{margin:0 auto 20px auto;}
@media (max-width:1030px){.sixten{width:100%;}}
@media screen and (min-width:800px) and (max-width:1007px){.tens p:nth-child(4){padding:20px !important;}}
@media (min-width:800px){
.sixten>p{font-size:18px;padding:8px}
.tens p:first-child{padding:0}
.tens p:nth-child(3){width: 18%;border:2px solid #848484;margin-top:10px;padding:16px;display: inline-block;font-size:14px;border-radius:10px;}
.tens p:nth-child(4){float: right;width:80%;border:2px solid #848484;border-bottom:2px solid #848484;margin-top:10px;border-right:0;border-left:0;font-size:37px;display:inline-block;padding:10px;text-align:center;color:#f00;}
p.overclass{font-size:24px;}
}
@media screen and (min-width:560px) and (max-width:800px){
.sixten>p{font-size:16px;padding:4px}
.tens p:first-child{padding:0}
.tens p:nth-child(3){width: 18%;border:2px solid #848484;margin-top:6px;padding:6px;display: inline-block;font-size:12px;border-radius:10px;}
.tens p:nth-child(4){float: right;width:80%;border:2px solid #848484;border-bottom:2px solid #848484;margin-top:10px;border-right:0;border-left:0;font-size:28px;display:inline-block;padding:10px;text-align:center;color:#f00;}
p.overclass{font-size:24px;}
}
@media (max-width:560px){
.tens p:first-child{padding:0}
.tens p:nth-child(3){text-align: right;}
.tens p:nth-child(4){display: none;}
p.overclass{font-size:24px;}
}
.sixten>p{font-size: 16px;margin: 15px 0;}
.tens p:nth-child(5){margin-top: 30px;}
.tens p:last-child{color: red;text-align: center;border-right: 0;border-left: 0;border-style: double;margin-top: 8%;padding: 10px 0px;}
figure img, .video-box img{display: block;margin: 0 auto;width: 100%;}
p.overclass{text-align:center;color:#f1420d;letter-spacing:2px;padding-top:40px;}
.url{display:none;}
</style>
<div class="site-content container pb-lg-5">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <div align="center row">
                <div class="zib-widget sixten tens">
                    <?php echo ttsistens()?>
                </div>
        </div>
    </div>
</div>
<?php
get_footer();

接下来新建页面选择  每日简文 模板保存即可，剩下的就不说了自己琢磨！