使用NASA API加载图片无法在主展示区显示，报错newSlide未定义

需求 #

调用NASA API获取图片资源，在网页的缩略图区域和主展示区分别展示对应内容，但目前点击缩略图后，图片无法在主展示区加载显示。使用的是HTML5 UP的模板网站，对其内部逻辑不太熟悉。

现有实现方式 #

原模板网站的工作逻辑是读取图片的src属性和<a>标签的href属性，以此实现缩略图点击后在主展示区展示图片。我通过fetch请求NASA API拿到数据，再用data.map方法生成新的HTML结构，替换掉页面原有内容，本以为这样就能复用模板的联动逻辑，但实际没有生效。

关键报错 #

Uncaught TypeError: newSlide is undefined

相关代码片段 #

fetch(url)
    .then(req => req.json())
    .then((data)=> {
        // 用map将API数据映射到HTML结构
        let html = data.map(item => `
            <article>
                <a class="thumbnail" href="${item.hdurl}" data-position="left center" target="_blank"><img src="${item.url}" alt="..." /></a>
                <h2>${item.title}</h2>
                <p>${item.explanation}</p>
            </article>
        `)
        thumbnails.innerHTML = html.join("")
    })
    .catch((e) => console.error(e))

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