Trello风格HTML看板页YAML列表内容无法正确渲染为无序列表问题求助

问题根因 #

你当前的代码未对content字段做类型判断，无论字段是字符串还是数组，都统一按照纯文本/字符串拼接的方式插入页面，数组转字符串时会默认拼接所有项，导致所有内容挤在一行。

修复方案 #

1. 找到原有渲染content的代码段

你原有渲染逻辑大概率是以下两种写法之一：

• 原生DOM操作写法：

// 错误示例，直接赋值
cardContent.textContent = item.content

• 模板字符串拼接写法：

// 错误示例，直接拼到模板里
const card = `<div class="card-content">${item.content}</div>`

2. 替换为带类型判断的渲染逻辑

根据你的原有写法选对应的替换代码：

适配原生DOM操作的代码

先新增一个单独处理content渲染的函数：

function renderContent(content) {
  if (Array.isArray(content)) {
    const ul = document.createElement('ul')
    content.forEach(itemText => {
      const li = document.createElement('li')
      li.textContent = itemText
      ul.appendChild(li)
    })
    return ul
  }
  return document.createTextNode(content)
}

原来渲染content的位置改成：

// 先清空原有内容
cardContent.innerHTML = ''
// 插入渲染后的内容
cardContent.appendChild(renderContent(item.content))

适配模板字符串的代码

直接修改模板拼接逻辑即可：

const contentHtml = Array.isArray(item.content) 
  ? `<ul>${item.content.map(text => `<li>${text}</li>`).join('')}</ul>`
  : item.content

// 替换原有模板里的${item.content}为${contentHtml}
const card = `<div class="card-content">${contentHtml}</div>`

可选优化：避免XSS风险

如果你的content字段可能包含<>等HTML特殊字符，新增一个转义函数处理文本：

function escapeHtml(str) {
  const escapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }
  return str.replace(/[&<>"']/g, m => escapeMap[m])
}

模板字符串写法对应修改为：

const contentHtml = Array.isArray(item.content) 
  ? `<ul>${item.content.map(text => `<li>${escapeHtml(text)}</li>`).join('')}</ul>`
  : escapeHtml(item.content)

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