เมื่อใช้ Express for Node.js ฉันสังเกตว่ามันแสดงผลโค้ด HTML โดยไม่มีอักขระหรือแท็บบรรทัดใหม่ แม้ว่าการดาวน์โหลดอาจมีประสิทธิภาพมากกว่า แต่ก็ไม่สามารถอ่านได้มากในระหว่างการพัฒนา
ฉันจะทำให้ Express to output HTML มีรูปแบบที่ดีได้อย่างไร
เมื่อใช้ Express for Node.js ฉันสังเกตว่ามันแสดงผลโค้ด HTML โดยไม่มีอักขระหรือแท็บบรรทัดใหม่ แม้ว่าการดาวน์โหลดอาจมีประสิทธิภาพมากกว่า แต่ก็ไม่สามารถอ่านได้มากในระหว่างการพัฒนา
ฉันจะทำให้ Express to output HTML มีรูปแบบที่ดีได้อย่างไร
คำตอบ:
ในสถานที่หลักapp.jsหรือสถานที่ของคุณ:
ด่วน 4.x
if (app.get('env') === 'development') {
app.locals.pretty = true;
}ด่วน 3.x
app.configure('development', function(){
app.use(express.errorHandler());
app.locals.pretty = true;
});ด่วน 2.x
app.configure('development', function(){
app.use(express.errorHandler());
app.set('view options', { pretty: true });
});ฉันใส่พิมพ์สวยในdevelopmentเพราะคุณจะต้องการอย่างมีประสิทธิภาพมากขึ้นด้วย 'น่าเกลียด' productionใน ตรวจสอบให้แน่ใจว่าตั้งค่าตัวแปรสภาพแวดล้อมNODE_ENV=productionเมื่อคุณปรับใช้ในการผลิต สิ่งนี้สามารถทำได้ด้วยshสคริปต์ที่คุณใช้ในฟิลด์ 'สคริปต์' package.jsonและดำเนินการเพื่อเริ่มต้น
Express 3 เปลี่ยนแปลงสิ่งนี้เพราะ:
การตั้งค่า "ตัวเลือกมุมมอง" ไม่จำเป็นต้องใช้อีกต่อไป app.locals เป็นตัวแปรเฉพาะที่รวมกับ res.render () 's ดังนั้น [app.locals.pretty = true จะเหมือนกับ res.render ที่ผ่านมา (มุมมอง, {สวย : true})
promise, uglify-js, cssและlexical-scopeก่อนที่มันจะทำงานอีกครั้ง (มันจะสร้าง แต่ความผิดพลาดตามคำขอครั้งแรก) ฉันเพิ่มที่หนึ่งบรรทัดเท่านั้น
app.locals.pretty = true
หากต้องการเอาต์พุต html "แบบสวย" ใน Jade / Express:
app.set('view options', { pretty: true });ใน express 4.x เพิ่มสิ่งนี้ลงใน app.js ของคุณ:
if (app.get('env') === 'development') {
app.locals.pretty = true;
}มีตัวเลือก "สวย" ใน Jade เอง:
var jade = require("jade");
var jade_string = [
"!!! 5",
"html",
" body",
" #foo I am a foo div!"
].join("\n");
var fn = jade.compile(jade_string, { pretty: true });
console.log( fn() );... ทำให้คุณได้รับสิ่งนี้:
<!DOCTYPE html>
<html>
<body>
<div id="foo">I am a foo div!
</div>
</body>
</html>ฉันดูเหมือนจะไม่ซับซ้อนมากนัก แต่สำหรับสิ่งที่ฉันทำหลังจากนั้น - ความสามารถในการดีบัก HTML ที่มุมมองของฉันผลิตได้จริง - มันก็ใช้ได้
หากคุณกำลังใช้คอนโซลเพื่อรวบรวมคุณสามารถใช้สิ่งนี้:
$ jade views/ --out html --prettyคุณต้องการ HTML ที่มีรูปแบบที่ดีจริงๆหรือ แม้ว่าคุณจะพยายามส่งออกบางสิ่งที่ดูดีในตัวแก้ไขหนึ่งมันก็อาจดูแปลก ๆ ได้รับฉันไม่รู้ว่าคุณต้องการ html สำหรับอะไร แต่ฉันลองใช้เครื่องมือพัฒนา chrome หรือ firebug สำหรับ Firefox เครื่องมือเหล่านั้นให้มุมมองที่ดีของ DOM แทนที่จะเป็น html
หากคุณต้องการรูปแบบ HTML จริงๆลองใช้ EJS แทน Jade นั่นหมายความว่าคุณต้องจัดรูปแบบ html ด้วยตัวคุณเอง
คุณสามารถใช้เป็นระเบียบเรียบร้อย
ยกตัวอย่างไฟล์ Jade นี้:
foo.jade
h1 MyTitle
p
a(class='button', href='/users/') show users
table
thead
tr
th Name
th Email
tbody
- var items = [{name:'Foo',email:'foo@bar'}, {name:'Bar',email:'bar@bar'}]
- each item in items
tr
td= item.name
td= item.emailตอนนี้คุณสามารถประมวลผลด้วยโหนด testjade.js foo.jade> output.html :
testjade.js
var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
console.log(html);
});จะให้ s.th ชอบ:
output.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>My Title</title><link rel="stylesheet" href="https://stackoverflow.com/stylesheets/style.css"/><script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script></head><body><div id="main"><div ><h1>MyTitle</h1><p><a href="/users/" class="button">show users</a></p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>Foo</td><td>foo@bar</td></tr><tr><td>Bar</td><td>bar@bar</td></tr></tbody></table></div></div></body></htmlจากนั้นเรียกใช้เป็นระเบียบเรียบร้อยด้วยtidy -m output.htmlจะทำให้:
output.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>My Title</title>
<link rel="stylesheet" href="/stylesheets/style.css" type=
"text/css" />
<script type="text/javascript" src="../js/jquery-1.4.4.min.js">
</script>
</head>
<body>
<div id="main">
<div>
<h1>MyTitle</h1>
<p><a href="/users/" class="button">show users</a></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>foo@bar</td>
</tr>
<tr>
<td>Bar</td>
<td>bar@bar</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>การสร้างคำแนะนำของ oliver เป็นวิธีที่รวดเร็วและสกปรกในการดู html ที่สวยงาม
1) ดาวน์โหลดเรียบร้อย
2) เพิ่มสิ่งนี้ลงใน. bashrc ของคุณ
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}3) วิ่ง
$ tidyme localhost:3000/pathคำสั่ง open ใช้งานได้กับ mac เท่านั้น หวังว่าจะช่วยได้!
ใน express 4.x เพิ่มสิ่งนี้ลงใน app.js ของคุณ:
app.locals.pretty = app.get('env') === 'development';