6

iron-router を使用する際に HTML タイトルを最適に設定するにはどうすればよいですか? これが私がやりたいことです：

<template name="layout">
    <head><title>{{KAZOOM}}</title></head>
    <body>
        {{> menu}}
        {{yield}}
    </body>
</template>

<template name="example">
    {{KAZOOM 'example page'}}
    That's just an example page
</template>

<template name="foo">
    {{KAZOOM 'foo page'}}
    Another example page with different HTML title
</template>

KAZOOM が時間をさかのぼって HTML タイトルを設定する様子がわかりますか? そのようにしたい理由は、HTML タイトルはコンテンツの一部であると考えているからです。ページを生成したテンプレートを編集するだけで、ページの HTML タイトルを調整できると便利です。残念ながら、これを達成するためのきれいな方法はわかりません。私が考えることができる最も近いのはyieldという名前で、タイトルはテンプレートではなくルートによって設定されます。

もう 1 つの可能性は、レイアウト テンプレートを省略して、常にヘッダーを含めることです。

<template name="head">
    <head><title>{{this}}</title></head>
    {{> menu}}
</template>

<template name="example">
    {{> head 'example page'}}
    That's just an example page
</template>

<template name="foo">
    {{> head 'foo page'}}
    Another example page with different HTML title
</template>

それはあまりいいことではありません。これに対する適切な解決策はありますか？

4

3 に答える 3

16

Iron ルーターで document.title onAfterRun を設定します。

var pageTitle = 'My super web';
Router.map(function() {
   this.route('user', {
      onAfterRun: function() {
        document.title = 'User ' + this.params.name + ' - ' + pageTitle;
      }
   });
});

編集：

テンプレートにタイトルを設定する場合は、カスタム ハンドルバー ヘルパー (クライアント コード) を作成します。

Handlebars.registerHelper("KAZOOM", function(title) {
    if(title) {
        document.title = title;
    } else {
        document.title = "Your default title";
    }
});

そして、あなたがそれを使用したように、テンプレートで使用してください

{{KAZOOM 'example page'}}

また 

{{KAZOOM}}

デフォルトのタイトル。

2015 年 7 月 26 日編集:新しい Iron Router の場合、次のようになります。

Router.route('/user', {
  onAfterAction: function() {
    document.title = 'page title';
  }
});
于 2013-11-09T22:31:07.933 に答える
10

私はiron-router0.7.1を使用しています。

そしてこれを入れてlibs/router.js

Router.onAfterAction(function() {
        document.title = 'My Site - '+this.route.name;
      }
);

これはすべてのルートを処理するため、すべてのルートに配置する必要はありません。

于 2014-05-13T11:36:13.497 に答える