Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics (2015) Doing more with Express Using Logic in Jade Templates

There is no effect of the condition I have put in. Why so ?

My _nav.jade :

_nav.jade
nav#mainNav.navbar.navbar-default.navbar-fixed-top
          .container-fluid
            // Brand and toggle get grouped for better mobile display
            .navbar-header
              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                span.sr-only Toggle navigation
                |                     
                span.icon-bar
                |                     
                span.icon-bar
                |                     
                span.icon-bar
              |                 
              a.navbar-brand.page-scroll(href='/') FitLog.io
            // Collect the nav links, forms, and other content for toggling
            #bs-example-navbar-collapse-1.collapse.navbar-collapse
              ul.nav.navbar-nav.navbar-right
                li
                    a(href='/blog') Blog
                if path === '/'  
                        |
                        li
                            a.page-scroll(href='#about') About

                        li
                            a.page-scroll(href='#services') Services
                        |                     
                        li
                            a.page-scroll(href='#portfolio') Portfolio
                        |                     
                        li
                            a.page-scroll(href='#contact') Contact
                        // /.navbar-collapse
                        // /.container-fluid  

My app.js :

app.js
'use strict';

//require express package
var express = require("express"),
      posts = require("./mock/posts.json");

//convert object into array
var postLists = Object.keys(posts).map(function(value){
                                    return posts[value]});

//this is a convention
var app = express();
var dir = __dirname + '/templates'; //_dirname gives you the directory of app.js

app.use('/static',express.static(__dirname +'/public'));

//set up JADE template engine
app.set('view engine', 'jade');
app.set('views', dir );

//create a route for HTTP GET request made by the client
app.get('/', function(req, res){
    var path = req.path;
    res.render('index', {path : path});
})

app.get('/blog/:title?', function(req, res){
    var title = req.params.title;
    if(title === undefined){
        res.status(503);
        res.render('blog', {posts: postLists});
    }else{
        var post = posts[title] || {};
        res.render('post', {post: post});
    }

})

//this tells the client to look at port 3000 for the response from server
app.listen(3000, function(){
    console.log("The frontend server is running port 3000");
});

1 Answer

Just remove that first vertical bar ( | ) from after the if path === '/':

_nav.jade
              ul.nav.navbar-nav.navbar-right
                li
                    a(href='/blog') Blog
                if path === '/'  
                    li
                        a.page-scroll(href='#about') About