discuz 侧边栏添加一个新闻小工具

discuz 侧边栏添加一个新闻小工具

1. <ul id="newsList" class="news-list"></ul>
   
2. <div class="micro-word" id="microWord"></div>
   
3. 
   
4. <script>
   
5.     // 获取新闻数据的函数
   
6.     async function fetchNews() {
   
7.         try {
   
8.             const response = await fetch("https://60s.viki.moe/");
   
9.             const data = await response.json();
   
10.             displayNews(data.data);
    
11.         } catch (error) {
    
12.             console.error("Error fetching news:", error);
    
13.             document.getElementById("microWord").innerText = "加载新闻失败，请稍后再试。";
    
14.             document.getElementById("microWord").classList.add("error");
    
15.         }
    
16.     }
    
17. 
    
18.     // 显示新闻的函数
    
19.     function displayNews(newsArray) {
    
20.         const newsList = document.getElementById("newsList");
    
21.         const microWord = document.getElementById("microWord");
    
22. 
    
23.         // 清空现有内容
    
24.         newsList.innerHTML = "";
    
25.         microWord.innerHTML = "";
    
26. 
    
27.         // 提取新闻和微语
    
28.         const newsItems = newsArray.filter(item => !item.includes("【微语】")).slice(0, 6); // 限制前10条
    
29.         const microText = newsArray.find(item => item.includes("【微语】"));
    
30. 
    
31.         // 添加新闻到列表
    
32.         newsItems.forEach(item => {
    
33.             const li = document.createElement("li");
    
34.             li.textContent = item;
    
35.             newsList.appendChild(li);
    
36.         });
    
37. 
    
38.         // 显示微语
    
39.         if (microText) {
    
40.             microWord.textContent = microText;
    
41.         }
    
42.     }
    
43. 
    
44.     // 页面加载时调用获取新闻
    
45.     window.onload = fetchNews;
    
46. </script>
    
47. <style>
    
48.     /* 新闻列表样式 */
    
49.     .news-list {
    
50.         list-style: none;
    
51.         padding: 0;
    
52.         margin: 0;
    
53.     }
    
54. 
    
55.     .news-list li {
    
56.         padding: 10px 0;
    
57.         border-bottom: 1px solid #ddd;
    
58.     }
    
59. 
    
60.     .news-list li:last-child {
    
61.         border-bottom: none;
    
62.     }
    
63. 
    
64.     /* 微语样式 */
    
65.     .micro-word {
    
66.         margin-top: 20px;
    
67.         font-style: italic;
    
68.         color: #666;
    
69.         text-align: center;
    
70.     }
    
71. 
    
72.     /* 加载失败提示样式 */
    
73.     .micro-word.error {
    
74.         color: #d00;
    
75.         font-weight: bold;
    
76.         text-align: center;
    
77.     }
    
78. </style>

复制代码