Svelte中#each循环引发相关文章重复的解决咨询

问题根源是你嵌套了两层{#each}遍历：外层遍历所有文章，内层遍历当前文章的标签，每匹配到一个相同标签就渲染一次该文章，自然会出现重复。

修改后的代码如下：

<script>
    import { getMarkdownPosts } from '$lib/utils/getPosts'

    let posts = getMarkdownPosts()

    export let currentPostTitle, currentPostTags

</script>

{#await posts}
    Loading...
{:then posts}
    Related posts
    <ul>
        {#each 
            posts.filter(post => {
                // 排除当前文章
                if (post.meta.title === currentPostTitle) return false
                // 只保留已发布的文章
                if (!post.meta.published) return false
                // 检查是否存在至少一个共同标签
                return post.meta.tags.some(tag => currentPostTags.includes(tag))
            }) 
            as {slug, meta: {title}}}
            <li><a href="/blog/{slug}"><h4>{title}</h4></a></li>
        {/each}
    </ul>
{/await}

改动说明： #

• 用filter方法提前筛选出符合条件的文章集合，每篇符合要求的文章只会被筛选一次
• 筛选逻辑：排除当前文章、仅保留已发布内容、确保和当前文章有至少一个共同标签
• 去掉了内层的标签遍历，直接渲染去重后的结果，避免重复输出

内容的提问来源于stack exchange，提问作者Лео