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

前言

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

方式一

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

1.全局js文件

2.文章或者页面

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

//每日60秒
var str='https://60s.viki.moe/v2/60s?encoding=image';
$.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
 */
date_default_timezone_set('Asia/Shanghai'); 
 
// 设置错误报告
error_reporting(0);
function getNewsData() {
    $transient_key = 'daily_news_' . date('Ymd_H');
    $cached_data = get_transient($transient_key);
    
    if ($cached_data !== false) {
        return $cached_data;
    }
    try {
        // 使用cURL获取API数据
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, "https://api.zhenge.net/v2/60s");
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_TIMEOUT, 10);
        
        $response = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        
        if (curl_error($ch)) {
            throw new Exception("连接错误: " . curl_error($ch));
        }
        curl_close($ch);
        
        if ($httpCode !== 200) {
            throw new Exception("API请求失败，HTTP状态码: " . $httpCode);
        }
        $data = json_decode($response, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            throw new Exception("JSON解析错误: " . json_last_error_msg());
        }
        if (!isset($data['data']['news']) || !is_array($data['data']['news'])) {
            throw new Exception("新闻数据格式不正确");
        }
        $result = [
            'news' => $data['data']['news'],
            'date' => $data['data']['date'],
            'tip' => $data['data']['tip']
        ];
        
        // 缓存2小时
        set_transient($transient_key, $result, 2 * HOUR_IN_SECONDS);
        
        return $result;
        
    } catch (Exception $e) {
        return $e->getMessage();
    }
}
$newsResult = getNewsData();
get_header();
?>
<div class="site-content container">
    <?php if (is_string($newsResult)): ?>
        <!-- 显示错误信息 -->
        <div class="error">
            获取新闻时出错: <?php echo htmlspecialchars($newsResult); ?>
        </div>
        <div style="text-align: center;">
            <button class="refresh-btn" onclick="window.location.reload()">重新加载</button>
        </div>
    <?php elseif (is_array($newsResult) && isset($newsResult['news'])): ?>
            <center style='font-size: .7em;margin-top: 20px;'><p>新闻更新于：<?php echo htmlspecialchars($newsResult['date']); ?></p></center>
            <ul class="news-list col-lg-10 mx-auto">
                <?php foreach ($newsResult['news'] as $index => $news): ?>
                    <li class="news-item">
                        <div class="news-bullet"></div>
                        <div class="news-content"><?php echo htmlspecialchars($news); ?>；</div>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php if (isset($newsResult['tip']) && !empty($newsResult['tip'])): ?>
                <p class='wycont'><?php echo htmlspecialchars($newsResult['tip']); ?></p>
            <?php endif; ?>
        <?php else: ?>
            <div class="loading">
                <div class="spinner"></div>
                <p>正在加载新闻数据...</p>
            </div>
    <?php endif; ?>
</div>
<style>
    .news-list {list-style-type: none;}       
    .news-item {padding: 6px 0;display: flex;align-items: flex-start;}
    .news-item:last-child {border-bottom: none;}
    .news-bullet {width: 8px;height: 8px;background: #e74c3c;border-radius: 50%;margin-top: 8px;margin-right: 15px;flex-shrink: 0;}
    .news-content {color: var(--body-color);line-height: 1.6;}
    .loading {text-align: center;padding: 40px;color: #7f8c8d;}
    .spinner {border: 4px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top: 4px solid #3498db;width: 40px;height: 40px;animation: spin 1s linear infinite;margin: 0 auto 20px;}
    @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
    .error {background: #e74c3c;color: white;padding: 15px;border-radius: 8px;text-align: center;margin-bottom: 20px;}
    .refresh-btn {background: #3498db;color: white;border: none;padding: 12px 25px;border-radius: 6px;font-size: 1rem;cursor: pointer;transition: background 0.3s;margin-top: 10px;}
    .refresh-btn:hover {background: #2980b9;}
    #cn_lunar{margin-top:0;font-size:1.6em;}
    .wycont{color: red;text-align: center;border-right: 0;border-left: 0;border-style: double;margin-top: 2% !important;padding: 10px 0px;text-indent: 0em;}
    .date_center{text-align: center;margin-top: 20px;color: #fff;}
</style>
<script type="text/javascript" src="https://kui.li/api/calendar.js"></script>
<script>
    $(function () {
        var lunar = calendar.solar2lunar();
        $('.cn_lunar').html( lunar.gzYear+'年' + ' ' + lunar.IMonthCn + lunar.IDayCn +'（'+lunar.Animal+'年）');
    });
    // 如果页面加载后仍然显示加载状态，5秒后自动刷新
    setTimeout(function() {
        const loadingElement = document.querySelector('.loading');
        if (loadingElement && loadingElement.offsetParent !== null) {
            window.location.reload();
        }
    }, 5000);
</script>
<?php
get_footer();

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