আমি কীভাবে এক্সপ্রেসকে সুন্দর ফর্ম্যাটেড এইচটিএমএল আউটপুট পেতে পারি?

165

নোড.জেএস এর জন্য এক্সপ্রেস ব্যবহার করার সময়, আমি লক্ষ্য করেছি যে এটি কোনও নতুন লাইন অক্ষর বা ট্যাব ছাড়াই এইচটিএমএল কোডকে আউটপুট করে। যদিও এটি ডাউনলোড করা আরও দক্ষ হতে পারে তবে এটি বিকাশের সময় খুব বেশি পঠনযোগ্য নয়।

— স্টিফেন
সূত্র

313

আপনার প্রধান 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এবং শুরু করার জন্য নির্বাহ করা হয় এমন কোনও স্ক্রিপ্টের সাহায্যে এটি করা যেতে পারে ।

এক্সপ্রেস 3 এটি পরিবর্তন করেছে কারণ:

"ভিউ অপশনগুলি" সেটিংসের আর প্রয়োজন নেই, অ্যাপ্লিকালোকালগুলি স্থানীয় পরিবর্তনগুলি হ'ল রেসেন্ডার () এর সাথে একত্রীভূত হয়, সুতরাং [app.locals. ব্যাখ্যাty = সত্যটি রেস.রেেন্ডার পাস করার মতই (দেখুন, {সুন্দর) : সত্য})।

— EhevuTov
সূত্র

1

এটি তারিখের সঠিক উত্তর হিসাবে দয়া করে এটির জন্য গৃহীত উত্তরটি পরিবর্তন করুন।

— Val,

এই কাজ করেন, কিন্তু আমি অতিরিক্ত নির্ভরতা, যথা একটি গুচ্ছ ইনস্টল করার ছিল promise, uglify-js, cssএবং lexical-scope(প্রথম অনুরোধে এটি নির্মাণ, কিন্তু ক্র্যাশ করে) আগেই আবার চালাতে হবে। আমি কেবল একটি লাইন যুক্ত করেছি।

— সিডব্লিউস্পিয়ার

2

এক্সপ্রেস 4.x এ কীভাবে করবেন?

— আন্তোনিও সালভতী

3

@ অ্যান্টোনিওসালবতী চেষ্টা করুনapp.locals.pretty = true

— হুয়ে টান

1

এটি একটি দুর্দান্ত উত্তর, ঠিক আমি যা খুঁজছিলাম। এক্সপ্রেসের বিভিন্ন সংস্করণে এটি কীভাবে হয় তা দেখে সতেজতা। আমি অন্যান্য সমস্যাগুলি অনুসন্ধান করেছি এবং উত্তরগুলি পেয়েছি যা এতে এক্সপ্রেসের কোন সংস্করণ ছিল তা উল্লেখ করা হয়নি।

— স্নোইনফেরনো

50

জেড / এক্সপ্রেসে এইচটিএমএল আউটপুট "চমত্কার-বিন্যাস" করতে:

app.set('view options', { pretty: true });

— জোনাথন জুলিয়ান
সূত্র

3

দুর্দান্ত সমাধান! আমি চাই এটি লেআউট / পৃষ্ঠার মধ্যেও ইনডেন্ট স্তরগুলির সাথে মেলে।

— স্টিফেন

34

সেকেলে. এক্সপ্রেস 3 কিছুটা আলাদা কাজ করে, দেখুন এহেভটোভের লেখা পোস্ট।

7

এক্সপ্রেস 4.x এ, আপনার অ্যাপ্লিকেশনটিতে এটি যুক্ত করুন

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}

— alarive
সূত্র

এখানে কাজ - ধন্যবাদ! আমার ক্ষেত্রে আমার 'এনভি' ভার সেট ছিল না। আপনি এই এক লাইনের সাথে মূল জেএসএস ফাইলে এটি যুক্ত করতে পারেন: प्रक्रिया.env.NODE_ENV = 'উন্নয়ন';

— জিন বো বো

যদি অন্য উত্তর ইতিমধ্যে এই সমাধান দিচ্ছে তবে আপনি কেন এই উত্তর দিচ্ছেন?

— এনবিরো

আমি এই উত্তরটি প্রথম দিয়েছিলাম, অন্য উত্তরটি পরে আপডেট হয়েছিল।

— এলাভ

6

জ্যাডে নিজেই একটি "সুন্দর" বিকল্প রয়েছে:

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>

আমি খুব পরিশীলিত বলে মনে হচ্ছে না তবে আমি যা করছি তার জন্য - আমার ভিউটিএমএল তৈরি করা এইচটিএমএলকে আসলে ডিবাগ করার ক্ষমতা - এটি ঠিক আছে।

— কেভিন ফ্রস্ট
সূত্র

3

আপনি যদি সর্বদা ওয়েবকিট বা ফায়ারব্যাগ ইন্সপেক্টর ব্যবহার করে এইচটিএমএলকে কেবল 'পরিদর্শন' করতে পারতেন এইচটিএমএল ডিবাগিংয়ের পরে থাকে। এটি সর্বদা নিখুঁত বিন্যাসিত ডিওএম গাছ উত্পন্ন করে।

— রোশাম্বো

সত্য @Roshambo কিন্তু গাছ মাধ্যমে নেভিগেট সময়, গ্রাসকারী যখন তোমার দর্শন লগ করা মাত্র উৎস স্ক্যান করতে পারে দ্রুততর (কখনও কখনও)

— Val,

4

আপনি যদি সংকলনের জন্য কনসোল ব্যবহার করছেন, তবে আপনি এরকম কিছু ব্যবহার করতে পারেন:

$ jade views/ --out html --pretty

— টম সার্ডু
সূত্র

0

আপনার কি সত্যিই সুন্দর ফর্ম্যাট এইচটিএমএল দরকার? এমনকি যদি আপনি কোনও সম্পাদককে সুন্দর দেখতে কিছু আউটপুট দেওয়ার চেষ্টা করেন তবে এটি অন্যটিতে অদ্ভুত দেখাচ্ছে look মঞ্জুর, আপনার কী জন্য এইচটিএমএল প্রয়োজন তা আমি জানি না তবে আমি ফায়ারফক্সের জন্য ক্রোম বিকাশ সরঞ্জামগুলি বা ফায়ারব্যাগ ব্যবহার করে চেষ্টা করব। এই সরঞ্জামগুলি আপনাকে এইচটিএমএল এর পরিবর্তে ডিওএমের একটি ভাল দর্শন দেয়।

আপনার যদি সত্যিই সত্যই সুন্দর ফর্ম্যাট এইচটিএমএল প্রয়োজন হয় তবে জেডের পরিবর্তে ইজেএস ব্যবহার করার চেষ্টা করুন। এর অর্থ হ'ল যদিও আপনাকে এইচটিএমএল নিজেকে ফর্ম্যাট করতে হবে।

— অস্কার কিলহেদ
সূত্র

আমি এখন আরও ভাল চাই যে আমি এটির সাথে কিছুক্ষণ কাজ করেছি। আমার ধারণা আমি কিছু বিষয় সম্পর্কে খুব বিশেষ particular

— স্টিফেন

0

আপনি পরিপাটি ব্যবহার করতে পারেন

উদাহরণস্বরূপ এই জেড ফাইলটি ধরুন:

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

এখন আপনি এটিকে নোড টেস্টজেড.জেএস foo.jade> আউটপুট.html দিয়ে প্রক্রিয়া করতে পারেন :

testjade.js

var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
    console.log(html);
});

আপনাকে sthth দেবে মত:

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

তারপরে পরিপাটি-মিউটপুট 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>

— অলিভার
সূত্র

0

অলিভারের পরামর্শ ছাড়াই বিল্ডিং, শোভিত এইচটিএমএল দেখার একটি দ্রুত এবং নোংরা উপায়

1) পরিপাটি ডাউনলোড করুন

2) এটি আপনার .bashrc এ যুক্ত করুন

function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}

3) রান

$ tidyme localhost:3000/path

ওপেন কমান্ডটি কেবল ম্যাকগুলিতে কাজ করে। আশা করি এইটি কাজ করবে!

— ebaum
সূত্র

ইনডেন্ট বিকল্প সম্পর্কে জানতাম না ... চমৎকার! আমি ভিমের বিল্ট ইন ফর্মারটি ব্যবহার করছিলাম।

— অলিভার

0

এক্সপ্রেস 4.x এ, আপনার অ্যাপ্লিকেশনটিতে এটি যুক্ত করুন

app.locals.pretty = app.get('env') === 'development';

— petkovic43
সূত্র