Meteorアプリの<title>
要素を変更する方法はありますか?テンプレートは<body>
でのみ処理されるようです。
クライアント側のJavaScriptコードのほぼどこにでも:
document.title = "My new title";
DavidWihlのソリューションを拡張できます。
Deps.autorun(function(){
document.title = Session.get("DocumentTitle");
});
その後、いつでも電話をかけることができます:
Session.set("DocumentTitle","New Document Title");
iron:router を使用する場合は、パッケージ manuelschoebel:ms-seo を追加して、メタタグとともにタイトルを処理できます。これは、静的および動的なSEOデータに役立ちます。
Router.map(function() {
return this.route('blogPost', {
path: '/blog/:slug',
onAfterAction: function() {
var post = this.data().post;
SEO.set({
title: post.title,
meta: {
'description': post.description
},
og: {
'title': post.title,
'description': post.description
}
});
}
});
});
タイトルを設定するためのヘルパー(CoffeeScript)を作成できます。
UI.registerHelper "setTitle", ->
title = ""
for i in [0..arguments.length-2]
title += arguments[i]
document.title = title
undefined
またはJsで同じ:
UI.registerHelper("setTitle", function() {
var title = "";
for (var i = 0; i < arguments.length - 1; ++i) {
title += arguments[i];
}
document.title = title;
});
次に、それを複雑な方法で使用でき、反応します。
{{#if book}}
{{setTitle book.title}}
{{else}}
{{setTitle "My books"}}
{{/if}}
onBeforeAction
を使用して、ルーターで直接そのようなことを処理する方が便利だと思います。
Router.map(function() {
return this.route('StudioRoot', {
path: '/',
onBeforeAction: function() {
return document.title = "My Awesome Meteor Application";
}
});
});
テンプレートに存在しない<head> </head>
タグに含めることもできます。これを試して:
sample.htmlの内容:
<head>
<title>my title</title>
</head>
<body>
...
</body>
<template name="mytemplate">
...
</template>
私がやったこと:
meteor.isClient内:
Meteor.startup(function() {
Deps.autorun(function() {
document.title = Session.get('documentTitle');
});
});
varがリアクティブに設定されたので、ルーターファイルに移動します(まだ行われていない場合:meteor add iron:router。私のルーターファイルはクライアントとサーバーの両方です)
Router.route('/', {
name: 'nameOfYourTemplate',
onBeforeAction: function () {
Session.set('documentTitle', 'whateverTitleIWant');
this.next(); //Otherwise I would get no template displayed
}
});
すでにheadタグにタイトルを設定しているかどうかは関係ありません。ルートに応じてこちらに置き換わります。