JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PIXNET 熱門分類文章列表 - Version 1</title>
</head>
<body>
    <h2>PIXNET 熱門文章（分類 23：美容彩妝）</h2>

    <!-- 點擊後開始載入 API -->
    <button id="loadBtn">載入文章</button>

    <!-- 顯示結果 -->
    <div id="listArea"></div>

<script>
    document.getElementById("loadBtn").onclick = function () {

        // 你指定的 API：熱門分類（不用 token）
        var apiURL = "https://emma.pixnet.cc/mainpage/blog/categories/hot/23" +
                     "?page=1&per_page=10&api_version=2&format=json";

        fetch(apiURL)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {

                console.log(data); // 方便檢查回傳格式

                // 安全檢查：避免 undefined 錯誤
                if (!data.articles) {
                    document.getElementById("listArea").innerHTML =
                        "API 回傳內容中沒有 articles 欄位。";
                    return;
                }

                var articles = data.articles; // 文章陣列
                var html = "";

                // 使用 for 迴圈顯示標題
                for (var i = 0; i < articles.length; i++) {
                    var item = articles[i];
                    html += "<p>" + item.title + "</p>";
                }

                document.getElementById("listArea").innerHTML = html;
            })
            .catch(function (error) {
                document.getElementById("listArea").innerHTML = "載入失敗：" + error;
            });
    }
</script>

</body>
</html>