苗条的头衔后缀

Question

我想- mywebsite在每个 Svelte 页面上添加一个标题后缀。

我正在努力寻找如何轻松和简单地做到这一点。

在 svelte 网站源代码上，我们可以看到他们手动执行：https : //github.com/sveltejs/svelte/blob/1273f978084aaf4d7c697b2fb456314839c3c90d/site/src/routes/docs/index.svelte#L15

我开始创建一个这样的组件：

<script>
  export let title = false;
</script>

<svelte:head>
  <title>
    {#if title}
      {title} • WebSite
    {:else}
      Website • Home suffix
    {/if}
  </title>
</svelte:head>

但：

• 我有一个<title> can only contain text and {tags}svelte(illegal-structure)错误
• 我不确定这是最简单的方法。

怎样才能实现我想做的事？

Answer 1

由于<title>只能包含文本，或者{tags}您可以使用三元运算符计算文档标题。

\n\n

例子

\n\n

<script>\n  export let title = false;\n</script>\n\n<svelte:head>\n  <title>{title ? `${title} \xe2\x80\xa2 WebSite` : \'Website \xe2\x80\xa2 Home suffix\'}</title>\n</svelte:head>\n

\n

Answer 2

在使用三元内部标记的工作得很好，反应性陈述可能帮助它清理干净：

<script>
  export let title = false;

  $: fullTitle = title 
        ? `${title} • WebSite` 
        : 'Website • Home suffix';
</script>

<svelte:head>
  <title>{fullTitle}</title>
</svelte:head>