用ejs寫網頁模板

阿新 • • 發佈：2019-02-07

今天試著用ejs模板引擎寫一些頁面，雖然ejs寫頁面與平時html寫頁面基本一樣，但是為了方便，一些相似的頁面我們可以直接用模板。

這裡有兩個頁面，index和login頁面，這兩個頁面的頭部與腳部是一樣的內容，只有中間不一樣。所以用一個模板做好頭部與腳部，中間部分引入就可以了。

layout.ejs

//layout.ejs   模板頁面
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content 
="IE=edge,chrome=1">
    <title><%=title%></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/mystyle.css" rel="stylesheet">
</head 
>
<body>
    <%- include("./include/header.ejs") %>//引入頭部部分
    <% var page ="./page/"+pagename+".ejs"%>//定義一個變數，用來動態引入
    <%- include(page)%> 
    <%- include("./include/footer.ejs") %>//引入腳部部分
</body>
</html>

header.ejs

//header.ejs  頭部部分
<div class="container min-height" 
>
    <nav class="navbar mynav navbar-default navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://xiaochenghua.iego.cn">HOME</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav dis-right">
                <li><a href="http://xiaochenghua.iego.cn">首頁<span class="sr-only">(current)</span></a></li>
                <li><a id="myadmin" href="">管理</a></li>
            </ul>
        </div>
    </nav>

footer.ejs

//footer.ejs   腳部部分
<div class="container min-height">
    <nav class="navbar mynav navbar-default navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://xiaochenghua.iego.cn">HOME</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav dis-right">
                <li><a href="http://xiaochenghua.iego.cn">首頁<span class="sr-only">(current)</span></a></li>
                <li><a id="myadmin" href="">管理</a></li>
            </ul>
        </div>
    </nav>

index.ejs

//index.ejs    index頁面內容

<div class="panel panel-info myDisplay text-center" >
    <div class="panel-heading"><h3>展示臺</h3></div>
    <div class="panel-body">
        <h4>希望通過下面這個表格，你能夠簡單地認識我^.^</h4>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tr>
                <td class="warning"><h3>姓名:肖承華</h3></td>
            </tr>
        </table>
        <table class="table .table-hover">
            <tr>
                <td class="active"><h4>出生年月：1996.01.09</h4></td>    
                <td class="success"><h4>專業：軟體工程</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning"><h4>畢業院校：聊城大學東昌學院</h4></td>
                <td class="danger"><h4>學歷：本科</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="danger" ><h4>聯絡電話：13734472101</h4></td>
                <td class="active"><h4>郵箱：[email protected]/</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td><a href="http://blog.csdn.net/qq_34149935/" target="_blank"><h4>部落格</h4></a></td>
                <td class="info"><a href="https://github.com/1091214370" target="_blank"><h4>github</h4></a></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning">HTML/HTML5</td>
                <td>CSS/CSS3</td>
                <td class="info ">Javascript</td>
                <td class="success ">jquery</td>
                <td class="active ">bootstrap</td>
                <td class="danger ">node.js</td>
            </tr>
        </table>
        <table class="table">
            <tr><td><a href="http://119.29.199.85/ownweb" target="_blank"><h4>更多資訊點這裡</h4></a></td></tr>
        </table>
    </div>
</div>
<div class="well"></div>
<div class="page-header">
    <h1>網站作品 <small><a href="webdis.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/web1.png" alt="web1">
            <div class="caption">
                <h3>個人網站</h3>
                <p>主要使用bootstrap搭建的一款響應式網站。</p>
                <p><a href="http://119.29.199.85/webroot/" class="btn btn-primary" role="button" target="_blank">線上預覽</a> <a href="https://github.com/1091214370/webroot" class="btn btn-default" role="button" target="_blank">GitHub原始碼</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>外掛展示<small><a href="takein.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/js-img-run1.png" alt="js-img-run1">
            <div class="caption">
                <h3>JS圖片輪播</h3>
                <p>通過js設定margin值，實現圖片輪播。</p>
                <p><a href="http://119.29.199.85/js-imgrun01/tplb1.html" class="btn btn-primary" role="button" target="_blank">線上預覽</a> <a href="https://github.com/1091214370/js-imgrun01" class="btn btn-default" role="button" target="_blank">GitHub原始碼</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>部落格列表 <small><a href="">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">  <!-- 1354x615 -->
            <div class="caption">
                <h3>敬請期待</h3>
                <p>建設好後臺，開始上傳，敬請期待。</p>
                <p><a href="#" class="btn btn-primary" role="button" target="_blank">檢視</a></p>
            </div>
        </div>
    </div>

        </div>
    </div>
</div>

login.ejs

//login.ejs     login頁面

<div class="panel panel-info myDisplay text-center" >
    <div class="panel-heading"><h3>展示臺</h3></div>
    <div class="panel-body">
        <h4>希望通過下面這個表格，你能夠簡單地認識我^.^</h4>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tr>
                <td class="warning"><h3>姓名:肖承華</h3></td>
            </tr>
        </table>
        <table class="table .table-hover">
            <tr>
                <td class="active"><h4>出生年月：1996.01.09</h4></td>    
                <td class="success"><h4>專業：軟體工程</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning"><h4>畢業院校：聊城大學東昌學院</h4></td>
                <td class="danger"><h4>學歷：本科</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="danger" ><h4>聯絡電話：13734472101</h4></td>
                <td class="active"><h4>郵箱：[email protected]/</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td><a href="http://blog.csdn.net/qq_34149935/" target="_blank"><h4>部落格</h4></a></td>
                <td class="info"><a href="https://github.com/1091214370" target="_blank"><h4>github</h4></a></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning">HTML/HTML5</td>
                <td>CSS/CSS3</td>
                <td class="info ">Javascript</td>
                <td class="success ">jquery</td>
                <td class="active ">bootstrap</td>
                <td class="danger ">node.js</td>
            </tr>
        </table>
        <table class="table">
            <tr><td><a href="http://119.29.199.85/ownweb" target="_blank"><h4>更多資訊點這裡</h4></a></td></tr>
        </table>
    </div>
</div>
<div class="well"></div>
<div class="page-header">
    <h1>網站作品 <small><a href="webdis.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/web1.png" alt="web1">
            <div class="caption">
                <h3>個人網站</h3>
                <p>主要使用bootstrap搭建的一款響應式網站。</p>
                <p><a href="http://119.29.199.85/webroot/" class="btn btn-primary" role="button" target="_blank">線上預覽</a> <a href="https://github.com/1091214370/webroot" class="btn btn-default" role="button" target="_blank">GitHub原始碼</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>外掛展示<small><a href="takein.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/js-img-run1.png" alt="js-img-run1">
            <div class="caption">
                <h3>JS圖片輪播</h3>
                <p>通過js設定margin值，實現圖片輪播。</p>
                <p><a href="http://119.29.199.85/js-imgrun01/tplb1.html" class="btn btn-primary" role="button" target="_blank">線上預覽</a> <a href="https://github.com/1091214370/js-imgrun01" class="btn btn-default" role="button" target="_blank">GitHub原始碼</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>部落格列表 <small><a href="">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">  <!-- 1354x615 -->
            <div class="caption">
                <h3>敬請期待</h3>
                <p>建設好後臺，開始上傳，敬請期待。</p>
                <p><a href="#" class="btn btn-primary" role="button" target="_blank">檢視</a></p>
            </div>
        </div>
    </div>

        </div>
    </div>
</div>

app.js頁面

//app.js  
//supervisor app.js 自動重啟伺服器
var express= require('express');
var path =require('path');
var _=require('underscore');
var mongoose=require('mongoose');
// var Movie=require('./models/mongodb');
var port =process.env.PORT||3000;
var bodyParser = require('body-parser'); 
var app =express();


app.set('views','./view');
app.set("view cache",true);
app.set('view engine','ejs');

app.use(bodyParser.json() );// 格式化表單提交
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('./public',{
    maxAge:'0',//no cache
    etag:true
}));
app.locals.moment=require('moment');
app.listen(port);

console.log('server start on port'+port);

app.get("/",function(req,res){//index頁面
    res.render('layout',{title:'我的首頁',pagename:"index"});//傳入引數index，表示在模板頁面引入index.ejs檔案
});
app.get("/login",function(req,res){//login頁面
    res.render('layout',{title:'登入頁面',pagename:"login"});//傳入引數login，表示在模板頁面引入login.ejs檔案
});

最終效果
index
index
login
login

這樣，相同佈局的頁面，只需要單獨寫不同的部分，然後在app.js裡面傳入檔名pagename:"檔名"，就可以得到一個新的頁面。

用ejs寫網頁模板

今天試著用ejs模板引擎寫一些頁面，雖然ejs寫頁面與平時html寫頁面基本一樣，但是為了方便，一些相似的頁面我們可以直接用模板。這裡有兩個頁面，index和login頁面，這兩個頁面的頭部與腳部是

用C++寫的帶模板雙向鏈表

main 報錯 src for out rst 所有 else ddl 1 #ifndef _BLIST_H_ 2 #define _BLIST_H_ 3 4 #include <iostream> 5 6 using n

後端不會寫頁面怎麽辦？推薦幾個好用的前端UI模板、組件對比

的人動態效果 str 喜歡開發定制化優點 git amazeui 前言下面推薦並對比幾個好用的前端UI模板推薦給以下的人使用： 1、不想重復造輪子的後端 2、不想學bootstrap的後端 3、後端開發想自己寫簡單頁面的 4、偷懶的前端本文註重手

將json串匯入poi xls模板中再將其用io寫到指定位置資料夾

這也算是我昨天一天時間的學習成果吧，初入java，大神見笑。 String templatePath = request.getSession().getServletContext().getRealPath("/") + "WEB-INF" + File.separator + "lib"

用latex寫中文小論文的模板及一些問題彙總

1. 中文模板想找到好看又直接拿來用的比較費時，所以我的策略是花一些時間找到一個自己滿意的、能用的，然後一直用下去。目前找到的比較滿意的是下面這個，介面清爽，複製貼上就能用。照例，要給出引用來源並對原作者的勞動表示感謝：Xue Shengke部落格。當論文中有中文時此模板需要

用ruby寫了一個生成xpcom元件模板的小工具

寫xpcom元件我們經常copy paste,因為xpcom元件的與業務無關的註冊、QueryInterface程式碼都是基本固定的，寫了一個自動生成xpcom元件的template,這樣就可以只關心核心業務，避免書寫樣板式的程式碼。 Ruby程式碼 =begin NO

zabbix用自帶的模板監控mysql

數據庫 mysql 監控先看一下zabbix自帶的mysql模板監控項：#很少是吧，沒事生產環境一般我們不用，下一篇將介紹生產環境用的另一種mysql監控。配置zabbix自帶的模板監控mysql數據庫：本文出自 “王家東哥” 博客，謝絕轉載！zabbix用自帶的模板監控mysql

用Python進行網頁抓取

google 神奇顯示 rss 遍歷 ecb data- 可用 appdata 引言　　從網頁中提取信息的需求日益劇增，其重要性也越來越明顯。每隔幾周，我自己就想要到網頁上提取一些信息。比如上周我們考慮建立一個有關各種數據科學在線課程的歡迎程度和意見的索引。我們不僅需要

用郵箱做網頁

text 軟件開發工具 kdt itl dia section ear 軟件界面 https://zhidao.baidu.com/question/438466707.html qq郵箱郵件怎麽做成網頁發送？？郵件當成網頁發送是不是很酷呢，看看我的經驗

用javascript寫計算器

一位先來 itl else 對象 alt img 技術 value 本人新手，如果有什麽不足的地方，希望可以得到指點今天嘗試用javascript寫一個計算器首先把計算器的按鈕做出來，用button做好了，這樣可以不用設置太多的樣式 <button value

用Onenote寫博客日誌

size 點擊 ack 程序 ima gin span logs -1 進入OneNote,選中要發布博客的分區，然後點擊菜單欄中的【文件】->【發送】->【發送至博客】這時候會啟動word程序彈出下面的對話框(如果你從未設置過

登陸網頁模板 - 1 （HTML+CSS）

pre com href tom .cn clas 網頁模板 html 輸入一個用HTML和CSS寫的簡單登錄頁面，主要是用CSS來進行修飾美化的這個登陸界面有輸入賬號和密碼的表單，還有登陸和註冊兩個按鍵，點擊按鍵分別會輸出“您已成功登陸，稍後會跳轉到您需

用awk寫遞歸

ron 一個棧 fun 例子自然 int 可能 tran 為什麽看到自己很多年前寫的一篇帖子，覺得有些意義，轉錄過來，稍加修改。 awk是一種腳本語言，語法接近C語言，我比較喜歡用，gawk甚至可以支持tcp/ip,用起來非常方便。 awk也支持遞歸，只是awk不支

用Python寫一個批量生成賬號的函數（用戶控制數據長度、數據條數）

shuf open 小寫長度數據 ase 函數用戶控制 app # 1、寫一個函數，批量生成一些註冊使用的賬號：[email protected]/* */，長度由用戶輸入，產生多少條也由用戶輸入，用戶名不能重復，用戶名必須由大寫字母、小寫字母、數字組成

用集合寫一個簡單的隨機分組，以及集合內元素數量查詢

移除以及表示元素 move spa color 查詢 println 12個人，隨機分為4組 public static void main(String[] args) { List list = new ArrayList();

用node寫一個皖水公寓自動刷房源腳本

port 發件人 ges 開啟 pan sendemail transport tar 收件人因為住的地方離公司太遠，每天上下班都要坐很久的班車，所以最近想搬到公司旁邊的皖水公寓住。去問了一下公寓的客服，客服說房源現在沒有了，只能等到別人退房，才能在網站上申請到。如果

用PHP獲取網頁上的信息相對於xpath效率低點

所有 pat ini 自己 str rpo fwrite echo bst 用php實現對網頁的抓取，及信息的收集，其實就是爬數據，具體實現步驟如下，首先應引入兩個文件curl_html_get.php和save_file.php文件，兩個文件具體代碼是這樣

用python寫CSV、EXCEL文件

() import exce 讀取 key print tput save style import pandas as pd writer = pd.ExcelWriter(‘output.xlsx‘) df1 = pd.DataFrame(data={‘col1‘:[

html dom與javascript的關系 -我們用JavaScript對網頁（HTML）進行的所有操作都是通過DOM進行的

兩種得來來講都對標記組織程序員 tro sdn 一，什麽是DOM (參考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什麽 DOM全稱為The Document Object Model，應該理解為是一個

用Python寫一個小遊戲

python 小腳本剛學Python時間不長，但也知道了一點，看別人的參考寫了一個猜數字小遊戲，也算是禹學於樂吧。#!/usr/bin/env python #coding=utf-8

用ejs寫網頁模板

相關推薦