每日60秒新闻简报

2025-08-242025-08-25

60s

每日60秒新闻简报

正在从API获取最新新闻数据...

下次自动更新时间: 早上 9:00

{% daily_news %} #文章中添加这个

添加方法themes\anzhiyu\scripts新建daily-news.js

'use strict';

hexo.extend.tag.register('daily_news', function(args, content) {
  return `
  <div class="daily-news-container">
    <style>
      .daily-news-container {
        --blue: #3498db;
        --orange: #FF8C00;
        --text-color: #333;
        --bg-color: transparent;
        --card-bg: rgba(255, 255, 255, 0.1);
        --border-color: rgba(255, 255, 255, 0.2);
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        font-size: 17px;
        font-style: italic;
        text-align: center;
        color: var(--blue);
      }

      .daily-news-container * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-weight: bold;
      }

      .daily-news-container {
        font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background: var(--bg-color);
        line-height: 1.6;
        padding: 20px;
        border-radius: 15px;
        margin: 30px 0;
      }

      .daily-news-container .container {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
      }

      .daily-news-container .glass {
        background: var(--card-bg);
        backdrop-filter: blur(15px) saturate(180%);
        -webkit-backdrop-filter: blur(15px) saturate(180%);
        border-radius: 15px;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow);
        padding: 25px;
        margin-bottom: 20px;
        overflow: hidden;
        position: relative;
      }

      .daily-news-container .glass::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.05);
        z-index: -1;
      }

      .daily-news-container header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        margin-bottom: 20px;
      }

      .daily-news-container .logo {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .daily-news-container .logo-icon {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 22px;
        font-weight: bold;
        backdrop-filter: blur(5px);
      }

      .daily-news-container h1 {
        font-size: 26px;
        font-weight: 700;
        background: linear-gradient(45deg, var(--orange), #FFA500, #FFD700);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .daily-news-container .date-info {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 15px 0 25px;
        padding: 15px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        justify-content: center;
        color: var(--blue);
      }

      .daily-news-container .date-item {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .daily-news-container .date-item i {
        font-size: 18px;
        color: var(--orange);
      }

      .daily-news-container .controls {
        display: flex;
        gap: 10px;
      }

      .daily-news-container .btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .daily-news-container .btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .daily-news-container .btn:active {
        transform: translateY(0);
      }

      .daily-news-container .btn i {
        font-size: 16px;
      }

      .daily-news-container .btn-refresh {
        background: rgba(255, 140, 0, 0.3);
        border: 1px solid rgba(255, 140, 0, 0.4);
      }

      .daily-news-container .update-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 20px 0;
        padding: 12px 15px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        justify-content: center;
        color: var(--blue);
      }

      .daily-news-container .news-container {
        padding: 25px;
        margin-bottom: 20px;
      }

      .daily-news-container .news-card {
        padding: 18px 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
        transition: all 0.3s;
        color: var(--blue);
      }

      .daily-news-container .news-card:hover {
        transform: translateX(8px);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding-left: 15px;
        margin: 0 -15px;
      }

      .daily-news-container .news-card:last-child {
        border-bottom: none;
      }

      .daily-news-container .news-title {
        font-weight: 500;
        display: flex;
        line-height: 1.7;
      }

      .daily-news-container .news-counter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--orange);
        color: white;
        margin-right: 12px;
        flex-shrink: 0;
        backdrop-filter: blur(5px);
      }

      .daily-news-container .tip-box {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 20px;
        margin: 30px 0;
        position: relative;
        backdrop-filter: blur(5px);
        color: var(--orange);
      }

      .daily-news-container .tip-box::before {
        content: """;
        font-size: 70px;
        position: absolute;
        top: -25px;
        left: 15px;
        color: rgba(255, 255, 255, 0.15);
        font-family: Georgia, serif;
      }

      .daily-news-container .footer {
        text-align: center;
        margin-top: 20px;
        padding: 20px 0;
        color: var(--blue);
      }

      .daily-news-container .source-link {
        color: var(--orange);
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s;
        border-bottom: 1px dashed rgba(255, 140, 0, 0.5);
      }

      .daily-news-container .source-link:hover {
        color: #FFD700;
        border-bottom: 1px solid rgba(255, 215, 0, 0.8);
      }

      .daily-news-container .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
        color: var(--blue);
      }

      .daily-news-container .loader {
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255, 255, 255, 0.2);
        border-top: 5px solid var(--orange);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 25px;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .daily-news-container .no-data {
        text-align: center;
        padding: 50px 20px;
        color: var(--blue);
      }

      .daily-news-container .no-data i {
        margin-bottom: 20px;
        opacity: 0.7;
      }

      .daily-news-container .api-time {
        text-align: right;
        opacity: 0.9;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        color: var(--orange);
      }

      .daily-news-container .next-update {
        font-weight: 500;
        color: var(--orange);
      }

      @media (max-width: 600px) {
        .daily-news-container header {
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
        }
    
        .daily-news-container .controls {
          width: 100%;
          justify-content: center;
        }
    
        .daily-news-container .btn {
          flex: 1;
          justify-content: center;
        }
    
        .daily-news-container .logo h1 {
          font-size: 22px;
        }
    
        .daily-news-container .date-info {
          flex-direction: column;
          gap: 10px;
        }
    
        .daily-news-container .news-title {
          font-size: 15px;
        }
    
        .daily-news-container .glass {
          padding: 20px 15px;
        }
      }
    </style>

    <div class="container">
      <header class="glass">
        <div class="logo">
          <div class="logo-icon">60s</div>
          <h1>每日60秒新闻简报</h1>
        </div>
        <div class="controls">
          <button class="btn btn-refresh" id="daily-news-refreshBtn">
            <i class="fas fa-sync"></i> 刷新
          </button>
        </div>
      </header>
  
      <div id="daily-news-content">
        <div class="loading-container glass">
          <div class="loader"></div>
          <p>正在从API获取最新新闻数据...</p>
        </div>
      </div>
  
      <div class="update-status glass">
        <i class="fas fa-clock"></i>
        <span>下次自动更新时间: <span class="next-update" id="daily-news-nextUpdate">早上 9:00</span></span>
      </div>
  
      <div class="footer glass">
        <p>数据来自官方/权威源头，以确保稳定与实时</p>
        <p>开源地址: <a href="https://github.com/vikiboss/60s" class="source-link" target="_blank">https://github.com/vikiboss/60s</a></p>
        <p>反馈群: 595941841</p>
        <p>© 2025 每日60秒新闻简报 | 当前时间: <span id="daily-news-currentTime"></span></p>
      </div>
    </div>
  </div>
  
  <script>
    (function() {
      // 全局变量
      const API_URL = 'https://60s.viki.moe/v2/60s';
  
      // DOM元素
      const newsDataElement = document.getElementById('daily-news-content');
      const refreshBtn = document.getElementById('daily-news-refreshBtn');
      const nextUpdateElement = document.getElementById('daily-news-nextUpdate');
      const currentTimeElement = document.getElementById('daily-news-currentTime');
  
      // 初始化当前时间显示
      function updateCurrentTime() {
        const now = new Date();
        currentTimeElement.textContent = now.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
    
        // 设置9点自动更新
        const nextUpdateTime = new Date(now);
        nextUpdateTime.setHours(9, 0, 0, 0);
    
        // 如果今天9点已过，设置为明天9点
        if (now >= nextUpdateTime) {
          nextUpdateTime.setDate(nextUpdateTime.getDate() + 1);
        }
    
        // 更新显示
        nextUpdateElement.textContent = \`早上 9:00\`;
      }
  
      // 设置9点自动更新
      function setupAutoUpdate() {
        const now = new Date();
        const nextUpdateTime = new Date(now);
        nextUpdateTime.setHours(9, 0, 0, 0);
    
        // 如果今天9点已过，设置为明天9点
        if (now >= nextUpdateTime) {
          nextUpdateTime.setDate(nextUpdateTime.getDate() + 1);
        }
    
        // 计算到9点的毫秒数
        const timeUntilUpdate = nextUpdateTime - now;
    
        // 设置定时器
        setTimeout(() => {
          fetchNewsData();
          setupAutoUpdate(); // 重新设置明天的定时器
        }, timeUntilUpdate);
      }
  
      // 获取新闻数据
      async function fetchNewsData() {
        try {
          // 显示加载状态
          newsDataElement.innerHTML = \`
            <div class="loading-container glass">
              <div class="loader"></div>
              <p>正在从API获取最新新闻数据...</p>
            </div>
          \`;
      
          // 添加随机参数避免缓存问题
          const cacheBuster = 't=' + new Date().getTime();
          const apiUrlWithCacheBuster = API_URL.includes('?') 
            ? API_URL + '&' + cacheBuster 
            : API_URL + '?' + cacheBuster;
      
          // 从API获取数据
          const response = await fetch(apiUrlWithCacheBuster);
      
          if (!response.ok) {
            throw new Error(\`API请求失败: \${response.status} \${response.statusText}\`);
          }
      
          const data = await response.json();
      
          if (data.code !== 200) {
            throw new Error(\`API返回错误: \${data.message}\`);
          }
      
          // 渲染新闻数据
          renderNewsData(data.data);
      
        } catch (error) {
          console.error("获取新闻数据失败:", error);
          showError(error.message);
        }
      }
  
      // 显示错误信息
      function showError(message) {
        newsDataElement.innerHTML = \`
          <div class="no-data glass">
            <i class="fas fa-exclamation-triangle"></i>
            <h3>加载新闻失败</h3>
            <p>\${message}</p>
            <button class="btn btn-refresh" style="margin-top: 20px;">
              <i class="fas fa-sync"></i> 重新加载
            </button>
          </div>
        \`;
    
        // 重新绑定事件
        document.querySelector('.no-data .btn').addEventListener('click', fetchNewsData);
      }
  
      // 渲染新闻数据
      function renderNewsData(data) {
        let html = \`
          <div class="glass news-container">
            <div class="date-info">
              <div class="date-item">
                <i class="far fa-calendar-alt"></i> \${data.day_of_week} \${data.date}
              </div>
              <div class="date-item">
                <i class="fas fa-moon"></i> \${data.lunar_date}
              </div>
            </div>
        
            <div class="news-list">
        \`;
    
        // 添加新闻条目
        if (data.news && data.news.length > 0) {
          data.news.forEach((newsItem, index) => {
            html += \`
              <div class="news-card">
                <div class="news-title">
                  <span class="news-counter">\${index + 1}</span>
                  \${newsItem}
                </div>
              </div>
            \`;
          });
        } else {
          html += \`
            <div class="news-card">
              <div class="news-title">
                <span class="news-counter">!</span>
                今日暂无新闻数据
              </div>
            </div>
          \`;
        }
    
        // 添加提示语
        if (data.tip) {
          html += \`
            <div class="tip-box">
              <strong>今日箴言：</strong> \${data.tip}
            </div>
          \`;
        }
    
        // 添加API更新时间
        if (data.api_updated_at) {
          html += \`
            <div class="api-time">
              <i class="fas fa-clock"></i>
              <span>数据更新时间: \${formatTime(data.api_updated_at)}</span>
            </div>
          \`;
        }
    
        html += \`
            </div>
          </div>
        \`;
    
        newsDataElement.innerHTML = html;
      }
  
      // 格式化时间戳
      function formatTime(timestamp) {
        const date = new Date(timestamp);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
      }
  
      // 核心修复：重构初始化逻辑
      function initModule() {
        fetchNewsData();
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);
        setupAutoUpdate();
        refreshBtn.addEventListener('click', fetchNewsData);
      }

      // 双保险初始化机制
      if (document.readyState === 'complete' || document.readyState === 'interactive') {
        setTimeout(initModule, 100);  // 给Hexo的DOM渲染留出时间
      } else {
        document.addEventListener('DOMContentLoaded', initModule);
      }
    })();
  </script>
  `;
}, {async: true, ends: false});