部落格

不定期分享技術文章

  • article-在 html 使用 ejs 的方法

    2023/12/29

    ejs
    在 html 使用 ejs 的方法

    ejs 常用簡單語法介紹

    1.撰寫程式邏輯

    <% "這裡寫程式邏輯" %>
    

    2.傳遞參數

    <%= "傳遞參數" %>
    

    3.傳遞 HTML 語法

    <%- "傳遞HTML語法" %>
    

    <%= %> 和 <%- %>差別
    “=”:會完整傳遞
    “-“:它看得懂 HTML 語法

    4.匯入 ejs:有兩個參數
    第一個參數是路徑
    第二個參數是要傳進去的變數要用物件包起來,有點像 React 的 Props

    <%- include("./layout/test",&#123;element,id&#125;) %>
    

    範例

    1.ejs 模板

    //檔名:test.ejs
    <h1>hello world <%= element %><%= id %></h1>
    

    2.要寫的 html,只列 body

    <% let name=["Robin","Amy","Ann"] %>//這裡是定義變數,未來可能會打API存在這
    <% name.map((element,id)=> &#123; %>//因為中間要塞這個可以轉譯HTML的語法,所以拆開來寫
    <%- include("./layout/test",&#123;element,id&#125;) %>//匯入剛剛的ejs模板並帶入變數
    <% &#125;); %>//因為中間要塞這個可以轉譯HTML的語法,所以拆開來寫
    

    3.完成結果如下