苗条的头衔后缀答案

【问题标题】：Svelte head title suffix苗条的头衔后缀
【发布时间】：2020-02-24 15:06:07
【问题描述】：

我想在每个 Svelte 页面上添加一个像 - mywebsite 这样的头部标题后缀。

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

在苗条的网站源上，我们可以看到他们手动操作：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) 错误
我不确定这是不是最简单的方法。

如何才能实现我想做的事情？

【问题讨论】：

标签： javascript dom svelte svelte-component svelte-3

【解决方案1】：

您也可以为此使用小商店。在这里您可以找到 REPL 示例：
https://svelte.dev/repl/b604a75a8a344527a39f10cab7b7ee66?version=3.32.0

import { writable } from 'svelte/store';

function createTitle() {
    const {subscribe, set, update} = writable('');
    
    return {
        subscribe,
        set: (value) => {
            set(`${value} • WebSite`)
        },
        clear: () => {
            set('Website • Home suffix');
        }
    }
}

export const title = createTitle();

然后当你想设置新标题时，你可以使用：

title.set('page title')

商店会自动添加后缀...

如果你想显示主标题调用：

title.reset()

【讨论】：

【解决方案2】：

虽然在标记的 inside 中使用三元组效果很好，但反应性语句可能有助于清理它：

<script>
  export let title = false;

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

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

【讨论】：

【解决方案3】：

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

示例

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

<svelte:head>
  <title>{title ? `${title} • WebSite` : 'Website • Home suffix'}</title>
</svelte:head>

【讨论】：

那么在每个页面上创建一个标题组件导入是最好的解决方案吗？没有更简单的/内置的？
如果您正在制作 SPA 或使用 Sapper，那么您可以将 <svelte:head> 保留在您的顶级组件中并以编程方式对其进行更新
@BennyHinrichs 您是否建议创建一个title.js 文件来实现它？那样的话，不比创建一个组件好，我错了吗？
在 Sapper 中，您只需将标题逻辑放入您的 _layout.svelte 文件中。请参阅docs 和sapper-template 中的示例。