Sveltekit 基于文件夹的相对锚标记href答案

【问题标题】：Sveltekit relative anchor tag href based on the folderSveltekit 基于文件夹的相对锚标记href
【发布时间】：2021-11-12 07:09:42
【问题描述】：

我有以下文件夹结构

-> routes
    '-> blog
         |-> __layout.svelte
         |-> blogs.svelte
         '-> new.svelte

此时 __layout.svelte 我必须硬编码完整的 URL，

            <a href="/blog/blogs>All Blogs</a>
            <a href="/blog/new>Create New Blog</a>

我希望能够删除 href 中的 /blog 硬编码，就好像我从 blog 移动到 posts 我必须更改所有 URL。所以像

           <a href="{folder}/blogs">All Blogs</a>

有可能吗？

【问题讨论】：

sveltekit，现在不支持了。由于 sveltekit 是一个 SSR 版本，它不会在不久的将来将此作为功能包括在内。或者您可以使用支持您要求的svelte-spa-router 第三方库github.com/ItalyPaleAle/svelte-spa-router/blob/master/…

【解决方案1】：

您可以这样做，但您必须在某处定义 {folder}（否则 Svelte 也不会知道您指的是哪个文件夹）。

这就像创建一个文件/lib/paths.js 一样简单

export const POSTS = '/blog';

然后在你需要的地方

<script>
 import {POSTS} from '$lib/paths';
</script>

<a href="{POSTS}/blog">All blogs</a>

当然，您必须记住更新这些常量。

【讨论】：

【解决方案2】：

是的，你可以。

您可以将博客文件夹设为动态 slug (more information)。与 Stephans 的回答相比，这种工作方式的优势在于，当您决定更改路线名称时，您无需在 2 个地方更改您的项目。您只需要更改代码中的变量，而不是文件夹结构

看起来怎么样？

-> routes
'-> [folderName]
     |-> __layout.svelte
     |-> blogs.svelte
     '-> new.svelte

然后，您可以使用“/blog/blogs.svelte”或“/topics/blogs.svelte”访问 blogs.svelte 页面。

如果您想在之后静态编译您的页面，请确保有一个指向博客页面的显式链接，或者在编译时在命令行中包含正确的链接。

【讨论】：