使用 Sapper，如何在 template.html 中获取当前页面的 slug

Question

查看文档，Sapper 的 template.html 似乎只有这些标签可用：

%sapper.base%
%sapper.styles%
%sapper.head%
%sapper.html%
%sapper.scripts

我想要的是像这样使用当前页面的别名：

  <!-- bottom of template.html -->

  <img src="https://piratepx.com/page={currentPageSlug}" 
    alt="" style="display:none;"/>
</body>
</html>

不需要JS可用，只需要在HTML中添加即可。

我正在导出到静态，这对于大多数静态站点生成器来说是一项微不足道的任务，但我找不到使用 Sapper 的明显解决方案。

Answer 1

考虑到您使用的是 Sapper，我会在 _layout.svelte 中执行此操作：

<script>
 import { stores } from '@sapper/app';
 const { page } = stores();
 $: currentPageslug = $page.params.slug
</script>

<img src="https://piratepx.com/page={currentPageSlug}" alt=""/>

使用此技术，您还可以添加默认值，或一些条件以防没有 slug。

使用 Sapper，如何在 template.html 中获取当前页面的 slug

Using Sapper, How to get the current page's slug in template.html

sapper

svelte-3