从零开发博客：打造前台最新日志列表页面

前端

2024-02-17 05:32:20

打造博客的最新日志列表页面

在搭建好博客的基础架构后，我们现在将着手开发博客的核心部分——最新日志列表页面。在这个页面上，用户可以浏览和阅读你发布的所有日志文章。让我们深入了解如何创建这个至关重要的页面。

页面布局

我们的博客采用简洁直观的页面布局，分为左右两列：

左侧主预览区： 展示日志列表，包括标题、摘要、作者和发布时间等信息。
右侧辅助侧边栏： 包含博客分类、标签、作者简介等信息。

HTML 结构

我们使用 HTML 来构建页面的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
</head>
<body>
    <div id="main-container">
        <div id="main-content">
            <h1>最新日志</h1>
            <ul id="log-list">
                <!-- 日志列表项将填充此处 -->
            </ul>
        </div>
        <div id="sidebar">
            <!-- 侧边栏内容将填充此处 -->
        </div>
    </div>
</body>
</html>

CSS 样式

接下来，我们用 CSS 来美化页面：

#main-container {
    width: 100%;
    margin: 0 auto;
}

#main-content {
    float: left;
    width: 70%;
}

#sidebar {
    float: right;
    width: 30%;
}

#log-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#log-list li {
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

#log-list li a {
    text-decoration: none;
    color: #333;
}

#sidebar {
    background-color: #f5f5f5;
    padding: 10px;
}

#sidebar h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

#sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sidebar ul li {
    margin-bottom: 10px;
}

#sidebar ul li a {
    text-decoration: none;
    color: #333;
}

JavaScript 交互

为了让页面更具交互性，我们使用 JavaScript 添加动态效果：

// 获取日志列表元素
const logList = document.getElementById('log-list');

// 获取侧边栏元素
const sidebar = document.getElementById('sidebar');

// 异步加载日志列表数据
fetch('/api/logs')
    .then(response => response.json())
    .then(data => {
        // 循环日志数据，创建列表项
        data.forEach(log => {
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = `/log/${log.id}`;
            a.textContent = log.title;

            li.appendChild(a);
            logList.appendChild(li);
        });
    })
    .catch(error => {
        console.error('Error fetching logs:', error);
    });

// 异步加载侧边栏数据
fetch('/api/sidebar')
    .then(response => response.json())
    .then(data => {
        // 循环侧边栏数据，创建列表项
        data.forEach(item => {
            const h2 = document.createElement('h2');
            h2.textContent = item.title;

            const ul = document.createElement('ul');
            item.items.forEach(subItem => {
                const li = document.createElement('li');
                const a = document.createElement('a');
                a.href = subItem.url;
                a.textContent = subItem.text;

                li.appendChild(a);
                ul.appendChild(li);
            });

            sidebar.appendChild(h2);
            sidebar.appendChild(ul);
        });
    })
    .catch(error => {
        console.error('Error fetching sidebar:', error);
    });