EJS (Embedded JavaScript templating) Documentation
EJS GitHub wiki

01. Set

$ npm install ejs

const ejs = require("ejs");
app.set('view engine', 'ejs');

// 建立".ejs"檔案在 "views" 資料夾底下

01. Connect

/* ----- 使用response render .ejs -----*/

// 參數1: 'nameOfEJS', 連結至"list.ejs" 
// 參數2: key: value, ejs可透過key呼叫value使用

res.render('index', { listTitle: day, newListItems: items })


/* ----- 導入 .ejs並使用其中參數 -----*/

const date = require(__dirname + "/date.js")
let day = date.getDate() 
// 得回傳值 today.toLocaleDateString("en-US", options);


// inside date.js:

exports.getDate = function() {

  const today = new Date();
  const options = {
    weekday: "long",
    day: "numeric",
    month: "long"
  }

  return today.toLocaleDateString("en-US", options);
}

02. Key & Value 使用

<%- include('header'); -%>

<% for (let i = 0 ; i < posts.length; i++) { %>
    <div class="card">
        <h1><%= post[i].title %></h1>
        <p><%= post[i].subtitle %></p>
    </div>
<% } %>

<%- include('footer'); -%>

使用 header / footer: <%- include('header'); -%>
使用 variable: <%= post[i].title %>

使用 control-flow:

 // 非 html 語法皆須標註
 <% for (let i = 0 ; i < posts.length; i++) { %>
 <% } %>

TO-DO-List v1

app.js

const express = require("express");
const bodyParser = require("body-parser");

// require local module
const date = require(__dirname + "/date.js")
const app = express();

const items = ["Preview Lingoda", "Listen to Effortless English", "excercise"];
const workItems = []

// use ejs as its view engine
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

app.get("/", function(req, res) {

  let day = date.getDate();

  // Go in view documentation to find list.js
  res.render('list', { listTitle: day, newListItems: items })
});


app.post("/", function(req, res){

  let item = req.body.newItem;

  if (req.body.list == "Work List"){
    workItems.push(item);
    res.redirect("/work");
  } else {
    items.push(item);
    res.redirect("/");
  }
})


app.get("/work", function(req, res) {
  res.render("list", {listTitle: "Work List", newListItems: workItems })
})

app.get("/about",function(req, res) {
  res.render("about");
})

app.listen(3000, function() {
  console.log("It's connecting...");
});

list.ejs

<%- include('header'); -%>

  <div class="box" id="heading">
    <h1><%= listTitle %></h1>
  </div>


  <div class="box">

    <% for (var i = 0; i < newListItems.length ; i++) {%>
    <div class="item">
      <input type="checkbox">
      <p><%= newListItems[i] %></p>
    </div>
    <% } %>

    <form class="item" action="/" method="post">
      <input type="text" name="newItem" placeholder="New item" autocomplete="off">
      <button type="submit" name="list" value="<%= listTitle %>" >+</button>
    </form>
  </div>

<%- include('footer'); -%>

date.ejs

// offer to extenal file to use


exports.getDate = function() {

  const today = new Date();
  const options = {
    weekday: "long",
    day: "numeric",
    month: "long"
  }

  return today.toLocaleDateString("en-US", options);
}


exports.getDay = function() {

  const today = new Date();
  const options = {
    weekday: "long"
  }

  return today.toLocaleDateString("en-US", options);
}

styles.css

html {
  background-color: #E4E9FD;
  /* create a gradient */
  background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
  min-height: 1000px;
  font-family: 'helvetica neue';
}

/* target for the last child item */
.item:last-child {
  border-bottom: 0;
}

/* look for all the "p" elements come after checked input*/
input:checked+p {
  text-decoration: line-through;
  text-decoration-color: #A683E3;
}

/* look for all the input that have attribute: type="checkbox" */
input[type="checkbox"] {
  margin: 20px;
}

input[type="text"] {
  text-align: center;
  height: 60px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 200;
  width: 313px;
}

input[type="text"]:focus {
  outline: none;
  box-shadow: inset 0 -3px 0 0 #A683E3;
}

/* target placeholder */
::placeholder {
  color: grey;
  opacity: 1;
}

部分略，完整語法見GitHub