代码无法显示Inscription标题问题求助

核心问题分析 #

1. 错误使用<title>标签：你在页面内容中创建了<title>元素，这个标签仅用于定义浏览器标签栏显示的页面标题，不能作为页面内容的展示标签，浏览器不会渲染它的文本内容。
2. 数据匹配错误：接口返回的inscriptionData是铭文对象数组，直接访问inscriptionData.title会得到undefined——数组本身没有title属性，你需要根据当前遍历的id找到数组中对应的铭文对象，再提取它的title。
3. 无效属性设置：<title>标签不支持href属性，设置后不会生效。

具体修改步骤 #

1. 替换错误的标签类型 #

将创建标题的代码从：

const title = document.createElement('title');
title.href = `../inscription?id=${id}`;

改为使用<a>标签（保留跳转功能）或<div>（仅显示标题），示例用<a>：

const title = document.createElement('a');
title.href = `../inscription?id=${id}`;

2. 匹配对应id的铭文数据 #

先将接口返回的数组转为id映射对象，方便快速查找对应铭文，再在遍历id列表时提取title：

// 预转id映射，提升查找效率
const inscriptionMap = {};
inscriptionData.forEach(item => {
  inscriptionMap[item.id] = item;
});

// 遍历id列表时匹配数据
idList.forEach((id, index) => {
  const cleanId = id.trim(); // 去除id前后的换行/空格
  const currentInscription = inscriptionMap[cleanId];
  // ...其他代码
  title.innerHTML = currentInscription ? currentInscription.title : '无标题';
});

3. 完整修正后的JS代码 #

const start = 63339;
const end = 64301;
const limit = 1000;

fetch(`https://ordapi.xyz/inscriptions/?start=${start}&end=${end}&limit=${limit}`)
.then(response => response.json())
.then(inscriptionData => {
  // 转换为id映射对象
  const inscriptionMap = {};
  inscriptionData.forEach(item => {
    inscriptionMap[item.id] = item;
  });

  fetch('ids.txt')
  .then(response => response.text())
  .then(ids => {
    const idList = ids.split('\n');
    const inscriptionGrid = document.querySelector('.inscription-grid');

    idList.forEach((id, index) => {
      const cleanId = id.trim();
      if (!cleanId) return; // 跳过空行

      const currentInscription = inscriptionMap[cleanId];
      const containerDiv = document.createElement('div');
      containerDiv.classList.add('inscription-item');

      const imageContainer = document.createElement('div');
      imageContainer.classList.add('image-container');

      const image = document.createElement('img');
      image.src = `https://ordinals.com/content/${cleanId}`;
      image.id = `img${index}`;
      image.classList.add(`img${index}`);

      const link = document.createElement('a');
      link.href = `../inscription?id=${cleanId}`;
      link.id = `link${index}`;
      link.classList.add(`link${index}`);

      // 替换为a标签显示标题并支持跳转
      const title = document.createElement('a');
      title.href = `../inscription?id=${cleanId}`;
      title.id = `title${index}`;
      title.classList.add(`title${index}`, 'inscription-title'); // 添加通用样式类
      title.innerHTML = currentInscription ? currentInscription.title : '无标题';

      const guid = document.createElement('a');
      guid.href = `../inscription?id=${cleanId}`;
      guid.id = `guid${index}`;
      guid.classList.add(`guid${index}`);
      guid.textContent = cleanId.slice(0, 8) + '...'; // 显示短id

      imageContainer.appendChild(image);
      imageContainer.appendChild(document.createElement('hr'));
      imageContainer.appendChild(link);
      containerDiv.appendChild(imageContainer);
      containerDiv.appendChild(title);
      containerDiv.appendChild(document.createElement('br'));
      containerDiv.appendChild(guid);
      inscriptionGrid.appendChild(containerDiv);
    });
  })
  .catch(error => {
    console.error('Error fetching IDs:', error);
  });
})
.catch(error => {
  console.error('Error fetching data:', error);
});

4. 补充CSS样式（可选） #

给标题添加通用样式，在现有CSS中加入：

.inscription-title {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  margin: 8px 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

额外注意事项 #

• 确保ids.txt中的id没有多余换行或空格，代码中已用trim()处理，但源文件尽量保持整洁。
• 如果接口返回的铭文数据中没有title字段，可在控制台打印inscriptionData查看实际字段名（比如可能是name），再对应修改。

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