如何通过 JSON 文件动态生成静态网站中的项目卡片-html教程-PHP中文网

如何通过 JSON 文件动态生成静态网站中的项目卡片

本文介绍如何使用 jQuery 从 data.json 文件中读取多个项目数据，并动态渲染为 HTML 卡片，避免手动复制粘贴，提升静态网站的可维护性与扩展性。

本文介绍如何使用 jquery 从 `data.json` 文件中读取多个项目数据，并动态渲染为 html 卡片，避免手动复制粘贴，提升静态网站的可维护性与扩展性。

在静态 HTML 网站中实现内容动态更新，关键在于将重复结构抽象为模板、将数据与视图分离。您当前的代码问题在于：使用固定 ID（如 #project、#project-title）反复赋值，导致每次循环都覆盖前一次内容，最终仅显示最后一个项目。正确做法是——为每个项目生成独立的 DOM 节点并追加到容器中，而非复用同一组元素。

以下是推荐的完整实现方案：

✅ 正确的动态渲染逻辑（jQuery + JSON）

$(document).ready(function() {
    $.getJSON('./data/data.json', function(data) {
        // 清空原有占位符（可选，防止重复渲染）
        $('#projects-container').empty();

        // 遍历 projects 数组，为每个项目生成完整卡片 HTML
        data.projects.forEach(function(project) {
            const cardHTML = `
                <div class="isotope-item col-md-6 mb-5 ${project.section}">
                    <div class="card project-card">
                        <div class="row">
                            <div class="col-12 col-xl-5 card-img-holder">
                                @@##@@
                            </div>
                            <div class="col-12 col-xl-7">
                                <div class="card-body">
                                    <h5 class="card-title">${project.title}</h5>
                                    <p class="card-text">${project.blurb}</p>
                                </div>
                            </div>
                        </div>
                        <div class="link-mask">
                            <a href="%24%7Bproject.link%7D" class="link-mask-link" target="_blank"></a>
                            <div class="link-mask-text">
                                <a href="%24%7Bproject.link%7D" class="btn btn-secondary" target="_blank">
                                    <i class="fas fa-eye me-2"></i>View Project
                                </a>
                            </div>
                        </div>
                    </div>
                </div>`;

            $('#projects-container').append(cardHTML);
        });
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error('Failed to load projects:', textStatus, errorThrown);
        $('#projects-container').html('<p class="text-danger">⚠️ Failed to load project data. Please check data.json path and format.</p>');
    });
});

? 前端 HTML 结构调整（关键！）

请将原页面中那个带 id="project" 的单张卡片替换为一个空容器，例如：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

<!-- 替换原 #project 卡片为以下容器 -->
<div id="projects-container" class="row">
    <!-- 动态卡片将被自动插入此处 -->
</div>

? 为什么必须改？
id 在 HTML 中必须唯一。若保留多个 id="project"，将违反规范，导致 CSS/JS 行为不可预测；而使用 class 或通用容器（如 #projects-container）配合 append() 是标准且健壮的做法。

⚠️ 注意事项与最佳实践

JSON 路径校验：确保 ./data/data.json 路径正确，建议在浏览器开发者工具 Network 标签中确认文件是否成功加载（HTTP 200）。
字段安全性：示例中直接插入 project.title 和 project.blurb，若内容含用户输入或特殊字符（如
链接可靠性：添加 target="_blank" 并配合 rel="noopener noreferrer" 更安全（可扩展为：rel="noopener noreferrer"）。
响应式兼容性：生成的卡片已继承原有 Bootstrap 类（如 col-md-6），确保父容器有 .row 包裹，以维持栅格布局。
性能优化（进阶）：项目较多时（>50），可用 documentFragment 批量插入，或启用 Isotope.js 的 appended 方法实现平滑动画。