Node.js 6.x Blueprints
上QQ阅读APP看书,第一时间看更新

Adding partials files for head and footer

Now lets add files for head and footer:

  1. Inside the views/partials folder create a new file called head.html and place the following code:
          <meta charset="utf-8"> 
          <title>{{ title }}</title> 
          <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs
           /twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'> 
          <link rel="stylesheet" href="/stylesheets/style.css"> 
    
  2. Inside the views/partials folder create a file called footer.html and place the following code:
          <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1
           /jquery.min.js'></script> 
          <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap
           /4.0.0-alpha.2/js/bootstrap.min.js'></script> 
    
  3. Now, its time to add the partials file to the layout.html page using the include tag. Open layout.html and add the following code:
          <!DOCTYPE html> 
          <html> 
          <head> 
              {% include "../partials/head.html" %} 
          </head> 
          <body> 
               {% block content %} 
               {% endblock %} 
      
              {% include "../partials/footer.html" %} 
          </body> 
          </html> 
    

Finally we are ready to continue with our project. This time our directories structure will look like the following screenshot:

Folder structure