如何利用JSON动态更新Bootstrap简历模板的技能进度条及progress-title

嘿，我来帮你搞定这个动态从JSON加载技能内容并匹配模板格式的问题！下面是具体的实现步骤，完全贴合你提到的progress-title类需求：

1. 确认JSON数据结构 #

首先确保你的JSON文件结构清晰，包含技能标题和进度值，示例如下：

[
  {
    "title": "HTML/CSS",
    "progress": 90
  },
  {
    "title": "JavaScript",
    "progress": 85
  },
  {
    "title": "Bootstrap框架",
    "progress": 95
  },
  {
    "title": "响应式设计",
    "progress": 88
  }
]

2. 用JavaScript动态渲染进度条 #

根据你是否使用jQuery（Bootstrap项目常用），提供两种实现方式：

方式一：原生JavaScript（无需依赖） #

假设你的简历模板里有一个用来容纳所有技能进度条的容器，比如：

<div id="skills-container"></div>

然后添加以下代码来读取JSON并渲染：

// 加载JSON文件
fetch('your-skills.json')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(skillsData => {
    const container = document.getElementById('skills-container');
    // 遍历每个技能，生成对应HTML
    skillsData.forEach(skill => {
      const progressItem = document.createElement('div');
      progressItem.className = 'progress-item'; // 匹配你模板里的外层类名
      progressItem.innerHTML = `
        <h4 class="progress-title">${skill.title}</h4>
        <div class="progress">
          <div class="progress-bar" 
               role="progressbar" 
               style="width: ${skill.progress}%" 
               aria-valuenow="${skill.progress}" 
               aria-valuemin="0" 
               aria-valuemax="100">
          </div>
        </div>
      `;
      container.appendChild(progressItem);
    });
  })
  .catch(err => console.error('加载技能数据出错:', err));

方式二：jQuery（更简洁） #

如果你项目里已经引入了jQuery，代码会更简短：

$.getJSON('your-skills.json', function(skillsData) {
  const $container = $('#skills-container');
  $.each(skillsData, function(index, skill) {
    const progressHTML = `
      <div class="progress-item">
        <h4 class="progress-title">${skill.title}</h4>
        <div class="progress">
          <div class="progress-bar" 
               role="progressbar" 
               style="width: ${skill.progress}%" 
               aria-valuenow="${skill.progress}" 
               aria-valuemin="0" 
               aria-valuemax="100">
          </div>
        </div>
      </div>
    `;
    $container.append(progressHTML);
  });
})
.fail(function() {
  console.error('无法加载技能数据，请检查文件路径');
});

3. 关键注意点 #

• 确保JSON文件路径正确：如果和HTML文件在同一目录，直接写文件名即可；如果在子目录，比如data/skills.json要写完整路径
• 匹配模板原有结构：如果你的模板里progress-item还有额外的样式类（比如mb-3之类的Bootstrap间距类），记得加到生成的HTML里
• 自定义扩展：如果需要给不同技能设置不同颜色的进度条，可以在JSON里加color字段，然后在progress-bar的style里添加background-color: ${skill.color}

内容的提问来源于stack exchange，提问作者user9406898