修改new_Rss.js为Ajax获取Rss

Static/Gui/js/new_Rss.js

@@ -1,55 +1,24 @@
-//定义一个函数来获取rss文件
-function getRSS(url) {
-    //使用fetch API来调用url
-    fetch(url)
-      .then(response => response.text()) //将响应解析为文本
-      .then(str => new window.DOMParser().parseFromString(str, "text/xml")) //将文本解析为XML对象
-      .then(data => {
-        //从XML对象中获取channel元素
-        const channel = data.querySelector("channel");
-        //从channel元素中获取所有item元素
-        const items = channel.querySelectorAll("item");
-        //遍历每个item元素
-        items.forEach(item => {
-          //从item元素中获取title和link元素的文本内容
-          const title = item.querySelector("title").textContent;
-          const link = item.querySelector("link").textContent;
-          const datetime = item.querySelector("pubDate").textContent;
-          //在控制台打印标题和链接
-          console.log(title, link);
-          //在news.html页面上的ul元素中添加内容
-            document.querySelector("ul").innerHTML += `
-            
-            <li class="list-news idc dnone mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden;padding-top: 14px;padding-bottom: 14px;">
-              <a href="${link}" target="_blank">
-                    <div class="mdui-list-item-title">${title}</div>
-                        <div class="mdui-list-item-text mdui-list-item-one-line">
-                          <span>${datetime}</span>
-                    </div>
-                </a>
-            </li>
-            `;
-            // 完成后删除li中class类中的dnone
-            document.querySelector("li").classList.remove("dnone");
+$(document).ready(function() {
+  // 使用 AJAX 获取 RSS 源的内容
+  $.ajax({
+    url: "https://rss.lolicon.team/?feed=rss2",
+    dataType: "xml",
+    success: function(data) {
+      // 解析 XML 内容并找到所有的 <item> 元素
+      $(data).find("item").each(function() {
+        var title = $(this).find("title").text();
+        var link = $(this).find("link").text();
+        var description = $(this).find("description").text();
+        // 将解析后的内容添加到 HTML 的 <div> 元素中
+        $("#rss").append("<li class='list-news mdui-ripple mdui-ripple-white'><h3><a href='" + link + "'>" + title + "</a></h3><p>" + description + "</p></li>"); 
         //添加li标签里的class类 wow animate__animated animate__fadeInRight
-            document.querySelector("li").classList.add("wow", "animate__animated", "animate__fadeInRight");
+        $('#rss li').addClass('wow animate__animated animate__fadeInRight'); 
         //删除id 为loadprogress的元素
-            document.getElementById("loadprogress").remove();
-          //若是没有的item元素，则在页面li添加没有内容”
-          if (items.length === 0) {
-            document.querySelector("ul").innerHTML += `
-            <li class="idc dnone mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
-                <div class="mdui-list-item-title">没有内容</div>
-            </li>
-            `;
-          }
+        $('#loadprogress').remove();
       });
-      });
-      
-      
     }
     
-  //调用函数，传入rss文件的url（这里是一个示例）
-  getRSS("https://rss.lolicon.team/?feed=rss2");
     
+  });
   
+});

Static/mdui-v1.0.1/css/ui.css

@@ -358,5 +358,15 @@ body {
     display: none;
 }
 .list-news{
+    text-align: center;
+    margin: 0 auto;
+    margin-top: 15px;
+    margin-left: 15px;
+    max-width: 1408px;
+    border: 2px solid #585858;
     border-radius: 15px;
+    backdrop-filter: blur(5px);
+}
+.list-news h3{
+    margin-top: 1rem;
 }

news.html

@@ -116,7 +116,7 @@
     <!--pc text-->
     <div class="mdui-hidden-xs-down zhe " style="height:100vh">
         <div class="mdui-container">
-            <ul class="mdui-list">
+            <ul id="rss" class="mdui-list">
                 
 
             </ul>