部落格開發（1） 渲染html檔案
阿新 • • 發佈：2018-12-18
使用nodejs express渲染html檔案！
第一步：app.js檔案：
//應用程式的啟動入口檔案 var express =require('express'); //app = nodejs中的http.createserver(); var app = express(); //載入模版處理模組 var swig = require('swig'); //定義當前應用所使用的模版引擎 //第一個引數表示模版引擎的名稱，同時也是模版檔案的字尾，第二個引數表示用於處理模版內容的方法 app.engine('html',swig.renderFile); //設定模版檔案存放的目錄，第一個引數必須是views，第二個引數是目錄 app.set('views','./views'); //註冊所使用的模版引擎，第一個引數必須是view engin，第二個引數和app.engine這個方法中定義模版引擎的名稱（第一個引數）是一致的 app.set('view engine','html'); //在開發過程中取消模版緩衝 swig.setDefaults({cache:false}); app.get('/',function(req,res,next){ //res.send('歡迎來到'); // 讀取views目錄下的指定檔案，解析並返回給客戶端 // 第一個引數：表示模版的檔案，相對於views目錄 views/index.html //第二個引數表示傳遞給模版使用的資料 //首頁渲染index.html res.render('index'); }); app.listen(8081);
第二步：在views資料夾下建立檔案index.html
index.html檔案：
<!DOCTYPE html><html lang='en' class=''> <head><script src='//static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script><script src='//static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alvaromontoro/pen/PXNLgP" /> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); overflow: hidden; font-family: 'Open Sans', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; } .frame > div { flex: 1; font-size: 0; font-weight: bold; line-height: 400px; background: #f72; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0); transition: all 0.5s; } .frame > div:hover { flex: 6; font-size: 2rem; color: white; } .frame > div:nth-child(2n) { background: #444; } </style></head> <body> <div class="frame"> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> </div> <script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://100dayscss.com/codepen/js/jquery.min.js'></script> <script >// jQuery v3.3.1 is supported //# sourceURL=pen.js </script> </body></html>