Discourse获取列别的最新帖子+图片

开源 Discourse
1

目前代码是能正常运行的但是不能和官方的 侧边栏兼容

我能力有限 所以把代码放在下面了希望各位大佬可以优化

image
image1920×945 123 KB

image
image1920×1051 90.6 KB

代码 
<head>
  <style>
    .topic-list {
      list-style: none;
      padding: 0;
    }
    .topic-list-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .topic-list-item img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin-right: 10px;
      cursor: pointer;
    }
    .topic-list-item a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
    .topic-list-item a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <div id="topic-list-container">
    <h2>最新游戏帖子</h2>
    <ul class="topic-list" id="topic-list">
      <!-- 这里的帖子将通过 JavaScript 动态渲染 -->
    </ul>
  </div>

  <script>
    // 获取数据并渲染帖子（最多5个）
    fetch('https://www.justnainai.com/c/5.json')
      .then(response => response.json())  // 解析 JSON 数据
      .then(data => {
        const topicListContainer = document.getElementById("topic-list");

        // 获取帖子的数组，并限制最多 5 个帖子
        const topics = data.topic_list.topics.slice(0, 5);  // 只取前 5 个帖子

        topics.forEach(topic => {
          // 创建列表项
          const listItem = document.createElement("li");
          listItem.className = "topic-list-item";

          // 创建图片元素
          const image = document.createElement("img");
          image.src = topic.image_url || "https://via.placeholder.com/50";  // 如果没有图片，使用占位图
          image.alt = topic.title;
          image.onclick = () => {
            window.location.href = `/t/${topic.slug}`;  // 点击图片跳转到帖子
          };

          // 创建标题元素
          const title = document.createElement("a");
          title.href = `/t/${topic.slug}`;  // 点击标题跳转到帖子
          title.textContent = topic.title;

          // 将图片和标题添加到列表项
          listItem.appendChild(image);
          listItem.appendChild(title);

          // 将列表项添加到列表容器
          topicListContainer.appendChild(listItem);
        });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  </script>

</body>
</html>
1 Like