HTML CSS - 2018-04-18

テンプレートエンジン「EJS」で効率的にコーディングするためのメモ

変数の使い方

USAGE

<% var title = 'タイトル'; %>
<h1><%= title %></h1>

OUTPUT

<h1>タイトル</h1>

USAGE

<% var meta = { title:'サイトのタイトル', description:'サイトのdescription', keywords:'keyword,keyword,keyword' }; %>
<title><%= meta.title %></title>
<meta name="description" content="<%= meta.description %>">
<meta name="keywords" content="<%= meta.keywords %>">

OUTPUT

<title>サイトのタイトル</title>
<meta name="description" content="サイトのdescription">
<meta name="keywords" content="keyword,keyword,keyword">

エスケープとコメント

USAGE

<% var title = '<h1>タイトル</h1>'; %>
<div><%= title %></div>
<div><%- title %></div>

OUTPUT

<div>&lt;h1&gt;タイトル&lt;/h1&gt;</div>
<div><h1>タイトル</h1></div>

USAGE

<%# コメント ejs %>
<!-- コメント html -->

OUTPUT

<!-- コメント html -->

include()関数

USAGE

index.ejs

<%
  var commonData = {
    title: 'タイトル',
    description: 'サイトのdescription',
    keyword: 'keyword,keyword,keyword',
  };
%>
<%- include('template-ejs/_head',{common:commonData}); %>

_head.ejs

<head>
  <meta name="description" content="<%= common.description %>">
  <meta name="keywords" content="<%= common.keyword %>">
  <title><%= common.title %></title>
</head>

OUTPUT

<head>
  <meta name="description" content="サイトのdescription">
  <meta name="keywords" content="keyword,keyword,keyword">
  <title>タイトル</title>
</head>

for文

USAGE

<ul>
  <% for (var i = 0; i < 5; i++) { %>
  <li>NO,<%= i+1 %></li>
  <% } %>
</ul>

OUTPUT

<ul>
  <li>NO,1</li>
  <li>NO,2</li>
  <li>NO,3</li>
  <li>NO,4</li>
  <li>NO,5</li>
</ul>

while文

USAGE

<ul>
  <% var counter = 1; %>
  <% while (counter <= 5) { %>
  <li>NO,<%= counter %></li>
  <% counter++; %>
  <% } %>
</ul>

OUTPUT

<ul>
  <li>NO,1</li>
  <li>NO,2</li>
  <li>NO,3</li>
  <li>NO,4</li>
  <li>NO,5</li>
</ul>

array.forEach()

USAGE

<% var ary = ['item1', 'item2', 'item3']; %>
<ul>
  <% ary.forEach(function (value, key) { %>
  <li><%= value %></li>
  <% }); %>
</ul>

OUTPUT

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
Related Posts

Related Posts

gulp-ejsでdestする際に拡張子をejsからhtmlに変更する方法

2018-01-08

Gulp導入からSassコンパイルするまで

2017-04-02

gulp-ejsでjsonを読み込む方法

2019-08-14

gulpでcharsetやファイルエンコードをShift_JISに変換する方法

2019-08-19