Create Some Static Pages

October 22, 2015

In previous two posts we had a look at view template and iron:router. Now let’s use those knowledge and create some static pages.

##Procedure

First we’ll delete the

meteorblog.html
meteorblog.js
meteorblog.css

files and we will be creating the directory structure as described in Meteor Directory Structure.

Then in lib/router.js, add the following code

Router.configure({
    layoutTemplate: 'layout'
});

Router.map(function () {
    this.route('home',{
        path: '/'
    );

    this.route('about');
}

Now create client/template/home/home.html with the following content.

<template name="home">
    <h1>Home page</h1>
    <p>This is the home page.</p>
    <a href="{{pathFor 'about'}}">About</a><br>
  <a href="/blog">Blog</a><br>
  <a href="/admin/blog">Blog Admin</a><br>
</template>

client/template/_partial/layout.html

<body>
  {{renderPage}}
</body>

<template name="layout">
    {{> loginButtons}}
    {{> yield}}
</template>

client/template/about/about.html

<template name="about">
    <h1>About</h1>
    <p>This is the about page.</p>
</template>

So now your folder should look like this

/client
  /template
    /_partial
      layout.html
    /about
      about.html
    /home
      home.html
/lib
  router.js

Now run meteor on terminal and navigate to localhost:3000 and you should see your home page with a link to the about page.

Analysis

As described in previous posts