0

Meteor初心者です。Metronics フロントエンド テンプレートから次の小さなコードを取得しました。

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->

Meteor が HTML コードを自動的に挿入し、手動で行うことを禁止していることは少し知っています。テンプレートに上記のコードを挿入する方法を教えてください。

4

2 に答える 2

0

以下を流星の <head> に追加します。

<head>
    <!--[if IE 8]> <meta name="ie-8"> <![endif]-->
    <!--[if IE 9]> <meta name="ie-9"> <![endif]-->
    <!--[if IE]> <meta name="is-ie"> <![endif]-->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="MyApp"/>
    <meta content="" name="MyCompany"/>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
</head>

新しい html ファイルを作成するか、既存のテンプレートに上記を追加できます。

次に、テンプレート ヘルパーの coffee/js ファイルに以下を追加します。

Template.hello.rendered = ->
  $('html').attr 'lang', 'en'
  if $('meta[name=\'ie-8\']').length
    $('html').attr 'class', 'ie8'
    $('head').append '<meta content="" name="ie8"/>'
  if $('meta[name=\'ie-9\']').length
    $('html').attr 'class', 'ie9'
    $('head').append '<meta content="" name="ie9"/>'
  if $('meta[name=\'is-ie\']').length
    $('head').append '<meta content="" name="is-ie"/>'
  else
    $('head').append '<meta content="" name="not-ie"/>'
  return

テンプレートがレンダリングされた後、これは meta:name を検索し、それに応じて反応します。html に属性を追加したり、head にコンテンツを追加したりできます。

流星のドキュメントによると：

http://docs.meteor.com/#/full/structuringyourapp

Meteor アプリケーションの HTML ファイルは、サーバー側のフレームワークとはかなり異なる方法で処理されます。Meteor は、ディレクトリ内のすべての HTML ファイルをスキャンして、<head>、<body>、および <template> の 3 つの最上位要素を探します。head セクションと body セクションは個別に連結されて 1 つの head と body になり、最初のページ読み込み時にクライアントに送信されます。

上記の結果は次のようになります。

<head>
    <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/6176b8b829c9df965e358642efa91f9fb2d91b51.css">
    <script type="text/javascript">__meteor_runtime_config__ = {"meteorRelease":"METEOR@1.0.3.1","ROOT_URL":"http://localhost:3000/","ROOT_URL_PATH_PREFIX":"","appId":"reg9gp1tr7xjw1ia7u0e","autoupdateVersion":"a00b33a70d60e865c9f096b9c3e8a9f5386ed45c","autoupdateVersionRefreshable":"79d3c80e832e7e5b97b84f80da47f9571b97f8a7","autoupdateVersionCordova":"none"};</script>
    <script type="text/javascript" src="/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18"></script>
    ...
    <title>Meteor App</title>
    <!--[if IE 8]> <meta name="ie-8"> <![endif]-->
    <!--[if IE 9]> <meta name="ie-9"> <![endif]-->
    <!--[if IE]> <meta name="is-ie"> <![endif]-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="Agent Online">
    <meta content="" name="Online Travel Services AG">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all" rel="stylesheet" type="text/css">
    <meta content="" name="not-ie">
</head>
于 2015-02-03T10:47:00.627 に答える
0

アップデート

Inject-Initialパッケージを確認すると、送信前に HTML を変更できます。

ハッキーな方法:

Meteor はカスタム Doctype や HTML コメントをサポートしていません。

ただし、 WebAppパッケージを、更新されたボイラープレート.htmlと html コメントを含むフォークされたバージョンに置き換えることができる場合、それは機能するはずですが、ハッキングされます。

WebApp パッケージ

ボイラープレート.html :

<html {{htmlAttributes}}>
  <head>
    ...
  </head>
<body>
  {{{body}}}
</body>
</html>

ソース: https://github.com/meteor/meteor/blob/devel/packages/webapp/boilerplate.html

webapp_server.js (490 行目から 497 行目):

    var boilerplateData = _.extend({htmlAttributes: htmlAttributes},
                                   boilerplateBaseData);
    var boilerplateInstance = boilerplateTemplate.extend({
      data: boilerplateData
    });
    var boilerplateHtmlJs = boilerplateInstance.render();
    boilerplateByAttributes[attributeKey] = "<!DOCTYPE html>\n" +
          HTML.toHTML(boilerplateHtmlJs, boilerplateInstance);

ソース: https://github.com/meteor/meteor/blob/devel/packages/webapp/webapp_server.js

于 2014-06-18T09:46:21.320 に答える