从data.json文件更新有关静态 HTML 网站的信息-解网

问：

我正在尝试向我的网站添加一项功能，以便通过从文件中提取信息来动态更新信息。目前，我正在手动将信息复制并粘贴到所需的卡片中，即使它是同一段代码，这个过程也非常繁琐。如果我能将信息存储在文件中，并且网站会自动更新主 HTML 代码以匹配更新的信息，那将会很方便。我写了一些代码，但它没有按预期工作。data.jsondata.json

这是更新网站内容的功能

$(document).ready(function() {
    $.getJSON('./data/data.json', function(data) {

        for (var i = 0; i < data.projects.length; i++) {
            
            $('#project').addClass(data.projects[i].section);
            $('#project-image').attr('src', data.projects[i].image);
            $('#project-title').html(data.projects[i].title);
            $('#project-blurb').html(data.projects[i].blurb);
            $('#project-link').prop('href', data.projects[i].link);
        }  
    });
});

这是文件中的信息data.json

"projects": [
        {
            "title": "Stock Game",
            "section": "mobileapp",
            "image": "assets/images/project/StockGame.png",
            "link": "https://github.com/StockGame",
            "blurb": "Stock game is a python program"
        },
        {
            "title": "Real Time Translator",
            "section": "mobileapp",
            "image": "assets/images/project/RT-Translator.jpg",
            "link": "https://github.com/RT-Translator",
            "blurb": "Real Time Translator is a tool that can"
        },

这是每次打开网站时要动态更新的卡片，并从文件中提取数据。data.json

<div class="isotope-item col-md-6 mb-5" id="project" >
                        <div class="card project-card">
                            <div class="row">
                                <div class="col-12 col-xl-5 card-img-holder">
                                    <img id="project-image" class="card-img" alt="image">
                                </div>
                                <div class="col-12 col-xl-7">
                                    <div class="card-body">
                                        <h5 class="card-title" id="project-title"></h5>
                                        <p class="card-text" id="project-blurb"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="link-mask">
                                <a class="link-mask-link" id="project-link"></a>
                                <div class="link-mask-text">
                                    <a class="btn btn-secondary" id="project-link">
                                        <i class="fas fa-eye me-2"></i>View Project
                                    </a>
                                </div>
                            </div><!--//link-mask-->
                        </div><!--//card-->
                    </div><!--//col-->

目前，代码仅显示 7 个项目中的一个，并且 id 也不起作用，这意味着它不会重定向到我的 GitHub 页面。如果你们能帮助我弄清楚如何将其与我的网站集成，并在我必须删除或添加新项目时使其不那么乏味，那就太好了。提前致谢。project-link

javascript html json 静态 web-apps

$(document).ready(function() {
$.getJSON('./data/data.json', function(data) {

    var projectContainer = $('#project');

    data.projects.forEach(function(project) {
        var projectCard = `
          <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">
                        <img class="card-img" src="${project.image}" alt="${project.title}">
                    </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="${project.link}" class="link-mask-link"></a>
                    <div class="link-mask-text">
                        <a href="${project.link}" class="btn btn-secondary">
                            <i class="fas fa-eye me-2"></i>View Project
                        </a>
                    </div>
                </div>
            </div>
          </div>`;
        
        projectContainer.append(projectCard);
    });
  });
});

上一个：如何在 Quarto 网站上使用 JSON 中的 Markdown？

下一个：使用小胡子或把手将大型 JSON 转换为 HTML，并将过程从 HTML 逆转为 JSON

从data.json文件更新有关静态 HTML 网站的信息

Update information on static HTML website from data.json file

评论