dedecms 生成多种排序的列表页

{dede:arclist orderby='pubdate' row='10'}
    <li><a href="[field:arcurl/]">[field:title/]</a></li>
{/dede:arclist}

<select id="sort-select">
    <option value="pubdate">按发布时间排序</option>
    <option value="click">按点击量排序</option>
    <option value="comment">按评论数排序</option>
</select>

<ul id="article-list">
    <!-- 文章列表将通过JavaScript动态加载 -->
</ul>

<script>
document.getElementById('sort-select').addEventListener('change', function() {
    var sortBy = this.value;
    loadArticles(sortBy);
});

function loadArticles(sortBy) {
    // 使用AJAX请求后端接口，传递排序参数
    fetch('/api/get-articles.php?orderby=' + sortBy)
        .then(response => response.json())
        .then(data => {
            var list = document.getElementById('article-list');
            list.innerHTML = '';
            data.forEach(article => {
                var li = document.createElement('li');
                li.innerHTML = `<a href="${article.arcurl}">${article.title}</a>`;
                list.appendChild(li);
            });
        });
}
</script>

<?php
$orderby = $_GET['orderby'] ?? 'pubdate';

// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=dedecms', 'username', 'password');

// 根据排序参数构建SQL查询
$sql = "SELECT * FROM `dede_archives` ORDER BY `$orderby` DESC LIMIT 10";

// 执行查询
$stmt = $db->query($sql);
$articles = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($articles);
?>