Express가 멋지게 포맷된 HTML을 출력하려면 어떻게 해야 합니까?
Express for Node.js를 사용할 때 줄 바꿈 문자나 탭 없이 HTML 코드를 출력한다는 것을 알게 되었습니다.다운로드하는 것이 더 효율적일 수 있지만 개발 중에는 그다지 읽을 수 없습니다.
Express가 멋지게 포맷된 HTML을 출력하려면 어떻게 해야 합니까?
당신의 메인에서app.js또는 그 자리에 있는 것:
Express 4.x
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
Express 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의 'script' 필드에서 사용하는 스크립트package.json시작하기 위해 실행됩니다.
Express 3이 변경된 이유는 다음과 같습니다.
"view options" 설정은 더 이상 필요하지 않습니다. app.sys는 res.sys와 병합된 로컬 변수이므로 [app.sys.sys = true는 res.sys를 전달하는 것과 같습니다(view, {pretty: true}).
제이드/익스프레스에서 HTML 출력을 "예쁘게 포맷"하려면:
app.set('view options', { pretty: true });
제이드 자체에는 "예쁜" 옵션이 있습니다.
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을 실제로 디버그할 수 있는 능력 -- 그것은 그저 좋습니다.
express 4.x에서 app.js에 다음을 추가합니다.
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
콘솔을 사용하여 컴파일하는 경우 다음과 같은 방법을 사용할 수 있습니다.
$ jade views/ --out html --pretty
express 4.x에서 app.js에 다음을 추가합니다.
app.locals.pretty = app.get('env') === 'development';
당신은 정말 멋지게 포맷된 html이 필요합니까?한 편집기에서 보기 좋은 내용을 출력하려고 해도 다른 편집기에서는 보기가 이상할 수 있습니다.물론이죠, HTML이 무엇에 필요한지는 모르겠지만, 저는 파이어폭스용 크롬 개발 도구나 파이어버그를 사용해보고 싶습니다.그 도구들은 당신에게 html 대신 DOM을 잘 보여줍니다.
만약 당신이 정말로 멋지게 포맷된 html이 필요하다면 옥 대신 EJS를 사용해 보세요.하지만 그것은 당신이 직접 HTML을 포맷해야 한다는 것입니다.
깔끔하게 사용할 수 있습니다.
이 옥 파일을 예로 들어 보겠습니다.
푸우우우우우우우우우우.
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.dll > output.dll로 처리할 수 있습니다.
testjade.js
var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
console.log(html);
});
다음과 같이 s.th 을 제공합니다.
아웃풋.디바이스
<!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="/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
그런 다음 tridy-m 출력을 사용하여 tridy-m 출력을 수행하면 다음과 같은 결과를 얻을 수 있습니다.
아웃풋.디바이스
<!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>
올리버의 제안을 바탕으로, 여기 미화된 HTML을 보는 빠르고 더러운 방법이 있습니다.
다운로드를 깔끔하게
.svrc에 추가합니다.
function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}
경영하다
$ tidyme localhost:3000/path
오픈 명령은 맥에서만 작동합니다.그게 도움이 되길 바랍니다!
언급URL : https://stackoverflow.com/questions/5276892/how-can-i-get-express-to-output-nicely-formatted-html
'programing' 카테고리의 다른 글
| 몇 초 후에 div 숨기기 (0) | 2023.08.30 |
|---|---|
| UISegmentedControl의 글꼴 색을 변경하는 방법 (0) | 2023.08.30 |
| 여러 열에서 내부 조인을 수행하는 방법 (0) | 2023.08.30 |
| Excel 스프레드시트의 C#에서 시트 이름을 변경하는 방법 (0) | 2023.08.30 |
| Ebean - 동적 쿼리 - 준비된 문의 불일치 매개 변수 개수 오류 (0) | 2023.08.30 |