Build a blog with Areto Node.js framework

View

It is much easier to generate HTML response in separate templates, than directly in the controller method.

Adding a template

Add a section of the application components in the configuration file and specify the view engine.

config/default.js

module.exports = {
  ...
  components: {
    ...
    'viewEngine': {
      engine: require('ejs-locals'),
      extension: 'ejs'
    },
  }
};

Create a views directory in the project root. There put the template files containing the HTML page layouts.

Each controller has its own subdirectory in the views, that contains templates of action. For example, the DefaultController controller and the actionNewPost action has the views/default/new-post.ejs template.

views/default/index.ejs

<% layout(view.get('_layouts/content')) -%>
<p>Hello blog!</p>

The first line includes the parent page layout.

Layout

Layout is a template with common elements that form the structure of the page, frame content. Typically, layouts are kept in a separate template file that is located in the views/_layouts/. The layout can be included to the top-level layout.

<%- body -%> - place the template content will be located (or nested layout).

views/_layouts/content.ejs

// include layout to the top-level layout
<% layout(view.get('_layouts/main')) -%>
<div class="row">
  <div class="col-sm-8">
    <%- body -%>
  </div>
</div>

views/_layouts/main.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Areto Blog
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
  <nav class="navbar-inverse navbar-fixed-top navbar" role="navigation">
     <div class="container">
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">ARETO Blog</a>
        </div>
     </div>
  </nav>
  <div class="container">
    <%- body -%>
  </div>
</div>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
     integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Template render

In the actionIndex method of the DefaultController controller replace the output message to render the appropriate template. By default, the template is searched in the views/default/ directory controller.

controllers/DefaultController.js

...
  actionIndex () {
    this.render(‘index’);
  }
...