不朽情缘免费网站

書名： Building Single：page Web Apps with Meteor
作者名： Fabian Vogelsteller
本章字數： 332字
更新時間： 2021-08-06 19:29:37

Building the basic templates

Now, let's add the basic templates to our blog by creating a file called layout.html in the my-meteor-blog/client/templates folder. This template will serve as the wrapper template for our blog layout. To build the basic templates, perform the following steps:

Add the following lines of code to layout.html, which we just created:

<template name="layout">
  <header>
    <div class="container">
      <h1>My Meteor Single Page App</h1>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/about">About</a>
        </li>
      </ul>
    </div>
  </header>

  <div class="container">
    <main>
    </main>
  </div>
</template>

Next, we will create the home page template, which will later list all our blogs posts. In the same templates folder as layout.html, we will create a file named home.html with the following lines of code:
```
<template name="home">
{{#markdown}}
## Welcome to my Blog
Here I'm talking about my latest discoveries from the world of JavaScript.
{{/markdown}}
</template>
```
The next file will be a simple About page and we save it as about.html with the following code snippet:
```
<template name="about">
{{#markdown}}
## About me
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud **exercitation ullamco** laboris nisi ut aliquip ex ea commodo
consequat.

Link to my facebook: [facebook.com][1]

[1]: http://facebook.com
{{/markdown}}
</template>
```
As you can see, we used a {{#markdown}} block helper to wrap our texts. The curly braces are handlebars syntax, which Blaze uses to bring logic to the HTML. The {{#markdown}}...{{/markdown}} block will transform all markdown syntax inside into HTML when the template gets rendered.

Note

The markdown text cannot be indented as we do with the HTML tags because the markdown syntax interprets indentation as code.
To be able to use {{#markdown}} block helper, we need to first add the markdown core package to our app. To do this, we quit our running app in the terminal using Ctrl + C and type the following command:
```
$ meteor add markdown
```
Now we can run the meteor command again to start our server.

However, when we now go to our browser, we will still see Hello World. So how can we make now our templates visible?

官术网_书友最值得收藏!

Building Single：page Web Apps with Meteor

Building the basic templates

Note