---
# System prepended metadata

title: 淺談樣板語言ejs使用
tags: [學習, ejs]

---

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

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

1.創建一個html，有head、body **注意!!** 副檔名改為.ejs檔名為layout。
2.加上每一頁都會出現的內容。
3.使用<%- contents %>帶入網頁的內容
```htmlembedded=
<%- contents %>
```
如圖中加入<%- contents %>
![](https://i.imgur.com/xbKLLc3.jpg)
4.以homePage為例子，開一個html檔，命名為homePage副檔名為.html **注意!!** 這邊的homePage不用有head,body標籤，但需要以下
```htmlembedded=
---
title: homePage
layout: ./app/layout.ejs
engine: ejs
---
```
如圖中其他的current、display、displaybanner是自行設定的變數，在往下就是homePage的內容了
![](https://i.imgur.com/2jV8oWg.jpg)

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



## 使用ejs將layout常常需要修改的內容模組化
 
1.把需要抽換的區塊另存成ejs，這邊拿banner舉例。 **注意!!** 不需要像layout一樣要有head、body標籤，只需要banner的內容就可以如圖
![](https://i.imgur.com/n5creqk.jpg)
然後存檔為banner.ejs

2.在想要banner出現的地方使用<%- include('路徑與檔名.副檔名') %>
```htmlembedded=
<%- include('./component_ejs/banner.ejs') %>
```
如圖![](https://i.imgur.com/xQBlETF.jpg)
 **注意!!** 只能使用在layout頁在.html則會沒有效果
 如圖
 在產品頁加入<%- include('./component_ejs/banner.ejs') %>
 ![](https://i.imgur.com/5dsSBC2.jpg)
 實際上在產品頁上只會看到該行程式碼
![](https://i.imgur.com/rFvbqUz.jpg)

 
## 使用ejs設定變數功能，自由設定layout的呈現
1.第一步設定變數
```htmlembedded=
<%- display %>
```
display可以換成自己想要的變數

2.把<%- display %>放入想要控制要不要顯示區域的layout的class
![](https://i.imgur.com/3fN7zI6.jpg)
如圖片中"猜你喜歡"與"想收到最新的消息"，打算只在產品頁出現，結帳頁不出現。
3.在要出現的頁面加上,下面的例子是用產品頁
```htmlembedded=
---
title: productPage
layout: ./app/layout.ejs
engine: ejs
current: productPage
display: ''
---

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

4.想要取消的頁面則是，下面的例子是用結帳頁
```htmlembedded=
---
title: checkOut-1Page
layout: ./app/layout.ejs
engine: ejs
current: checkOut-1Page
display: d-none
---
```
這樣子變數就會自動把那組字串帶到class的<%- display %>，因為bootstrap 5 所以在class有d-none就會消失


