将以下代码复制到自己的网站即可实现

<!-- 今日头条热点新闻组件 -->
<div class="toutiao-container">
  <div class="toutiao-header">
    <div class="toutiao-title">
      <i class="fas fa-fire"></i>
      <span>今日头条热点榜</span>
    </div>
    <button class="refresh-btn" id="refreshBtn">
      <i class="fas fa-sync-alt"></i>
      <span>刷新</span>
    </button>
  </div>
  
  <ul class="news-list" id="newsList">
    <div class="loading">
      <i class="fas fa-spinner fa-spin"></i>
      <span>正在加载热点新闻...</span>
    </div>
  </ul>
</div>

<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
.toutiao-container {
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  margin: 15px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.toutiao-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 8px;
}

.toutiao-title {
  font-size: 18px;
  font-weight: 600;
  color: #e44;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn {
  background: transparent;
  border: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  color: #e44;
}

.news-list {
  list-style: none;
  background: transparent;
}

.news-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.news-item:hover {
  background: rgba(0,0,0,0.02);
}

.news-link {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.news-rank {
  min-width: 24px;
  height: 24px;
  background: #f0f0f0;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  margin-top: 2px;
  flex-shrink: 0;
}

.top-1 { background: linear-gradient(to right, #ff8a00, #ff4800); color: white; }
.top-2 { background: linear-gradient(to right, #ff9a00, #ff6a00); color: white; }
.top-3 { background: linear-gradient(to right, #ffaa00, #ff8a00); color: white; }

.news-content {
  flex-grow: 1;
}

.news-title {
  font-size: 16px;
  margin-bottom: 4px;
  font-weight: 500;
  transition: all 0.2s;
}

.news-link:hover .news-title {
  color: #e44;
}

.news-hotness {
  font-size: 12px;
  color: #f55;
  display: flex;
  align-items: center;
  gap: 4px;
}

.loading {
  padding: 30px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.error {
  padding: 20px;
  text-align: center;
  color: #e44;
  font-size: 14px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const newsList = document.getElementById('newsList');
  const refreshBtn = document.getElementById('refreshBtn');
  
  async function fetchHotNews() {
    try {
      newsList.innerHTML = `
        <div class="loading">
          <i class="fas fa-spinner fa-spin"></i>
          <span>正在加载热点新闻...</span>
        </div>
      `;
      
      const response = await fetch('https://api.pearktrue.cn/api/dailyhot/?title=今日头条');
      const data = await response.json();
      
      renderNewsList(data.data);
    } catch (error) {
      console.error('获取新闻数据失败:', error);
      newsList.innerHTML = `
        <div class="error">
          <i class="fas fa-exclamation-triangle"></i>
          <span>加载新闻失败，请稍后再试</span>
        </div>
      `;
    }
  }
  
  function renderNewsList(newsItems) {
    if (!newsItems || newsItems.length === 0) {
      newsList.innerHTML = `
        <div class="error">
          <i class="fas fa-exclamation-triangle"></i>
          <span>没有获取到新闻数据</span>
        </div>
      `;
      return;
    }
    
    const limitedNews = newsItems.slice(0, 15);
    let newsHTML = '';
    
    limitedNews.forEach((item, index) => {
      const rankClass = index < 3 ? `top-${index+1}` : '';
      
      newsHTML += `
        <li class="news-item">
          <a href="${item.url}" class="news-link" target="_blank" rel="noopener">
            <div class="news-rank ${rankClass}">${index + 1}</div>
            <div class="news-content">
              <div class="news-title">${item.title}</div>
              <div class="news-hotness">
                <i class="fas fa-fire"></i>
                <span>${item.hot}</span>
              </div>
            </div>
          </a>
        </li>
      `;
    });
    
    newsList.innerHTML = newsHTML;
  }
  
  fetchHotNews();
  refreshBtn.addEventListener('click', fetchHotNews);
});
</script>