###### tags: `學習` `ejs`
{%hackmd SybccZ6XD %}
# 淺談樣板語言ejs使用

## 使用ejs讓每一頁重複出現的物件只寫一次

1.創建一個html，有head、body **注意!!** 副檔名改為.ejs檔名為layout。
2.加上每一頁都會出現的內容。
3.使用<%- contents %>帶入網頁的內容

<%- contents %>

如圖中加入<%- contents %>
4.以homePage為例子，開一個html檔，命名為homePage副檔名為.html **注意!!** 這邊的homePage不用有head,body標籤，但需要以下

---
title: homePage
layout: ./app/layout.ejs
engine: ejs
---

如圖中其他的current、display、displaybanner是自行設定的變數，在往下就是homePage的內容了

5.完成以上步驟就算是完成了，副檔名為.html在ejs下都為網頁的內容，當然是可以有很多頁。

## 使用ejs將layout常常需要修改的內容模組化

1.把需要抽換的區塊另存成ejs，這邊拿banner舉例。 **注意!!** 不需要像layout一樣要有head、body標籤，只需要banner的內容就可以如圖
然後存檔為banner.ejs

2.在想要banner出現的地方使用<%- include('路徑與檔名.副檔名') %>

<%- include('./component_ejs/banner.ejs') %>

如圖
**注意!!** 只能使用在layout頁在.html則會沒有效果
如圖
在產品頁加入<%- include('./component_ejs/banner.ejs') %>
實際上在產品頁上只會看到該行程式碼

## 使用ejs設定變數功能，自由設定layout的呈現
1.第一步設定變數

<%- display %>

display可以換成自己想要的變數

2.把<%- display %>放入想要控制要不要顯示區域的layout的class
如圖片中"猜你喜歡"與"想收到最新的消息"，打算只在產品頁出現，結帳頁不出現。
3.在要出現的頁面加上,下面的例子是用產品頁

---
title: productPage
layout: ./app/layout.ejs
engine: ejs
current: productPage
display: ''
---

多增加一個display: ''，因為頁面的div預設是display:block所以不用有任何的字串，**注意!!** 變數的:後面要多一個空白，不然會報錯，然後沒有效果。
**我卡在這裡超過一個小時◢▆▅▄▃ 崩╰(〒皿〒)╯潰▃▄▅▆◣**

4.想要取消的頁面則是，下面的例子是用結帳頁

---
title: checkOut-1Page
layout: ./app/layout.ejs
engine: ejs
current: checkOut-1Page
display: d-none
---

這樣子變數就會自動把那組字串帶到class的<%- display %>，因為bootstrap 5 所以在class有d-none就會消失