英文:
A lack of line breaks in browser's source view using html-express-js template engine
问题
I am not experienced in express js template engines and I tried to choose a simple one from the list https://expressjs.com/en/resources/template-engines.html
我不熟悉express js模板引擎，我尝试从列表https://expressjs.com/en/resources/template-engines.html中选择一个简单的。
I chose html-express-js that is on GH: https://github.com/markcellus/html-express-js
我选择了位于GH上的html-express-js：https://github.com/markcellus/html-express-js
I implemented it in my own code, but when I ran it, there were no line breaks in Chrome source view. So then I implemented the example code from the html-express-js GitHub site, but then the same bad issue happened.
我在自己的代码中实现了它，但当我运行它时，Chrome源代码视图中没有换行符。所以我实现了html-express-js GitHub 网站上的示例代码，但问题仍然存在。
The picture of the issue:
问题的图片：
I need the line breaks there, and I think it is normal for the most HTML sites.
Is it a simple way to get the line breaks in this template engine? Or could anyone indicate a good template engine from the list?
我需要在那里有换行符，我认为这对于大多数HTML站点来说是正常的。
有没有一种简单的方法在这个模板引擎中获取换行符？或者有人可以指示列表中的一个好的模板引擎吗？
Below I insert I think the crucial example files
下面我插入了我认为关键的示例文件
example/public/index.js:
import { html } from '../../src/index.js';
export const view = (data, state) => html`
<!DOCTYPE html>
<html lang="en">
<head>
${state.includes.head}
<title>Dashboard</title>
</head>
<body>
<h1>This is the dashboard!</h1>
<p>
This file is served by the <code>staticIndexHandler</code> in app.js
</p>
<p>Click <a href="/hello">here</a> to go hello route.</p>
</body>
</html>
`;
example/app.js:
import express from 'express';
import { resolve } from 'path';
import htmlExpress, { staticIndexHandler } from '../src/index.js';
const __dirname = resolve();
const app = express();
app.engine(
'js',
htmlExpress({
includesDir: 'includes',
})
);
app.set('view engine', 'js');
app.set('views', `${__dirname}/example/public`);
// serve all other static files like CSS, images, etc
app.use(express.static(`${__dirname}/example/public`));
app.get('/hello', async function (req, res) {
res.render('hello', {
name: 'world',
});
});
// Automatically serve any index.js file as HTML in the public directory
app.use(
staticIndexHandler({
viewsDir: `${__dirname}/example/public`,
notFoundView: 'not-found', // OPTIONAL: defaults to `404/index`
})
);
export default app;
example/public/index.js:
import { html } from '../../src/index.js';
export const view = (data, state) => html`
<!DOCTYPE html>
<html lang="en">
<head>
${state.includes.head}
<title>Dashboard</title>
</head>
<body>
<h1>This is the dashboard!</h1>
<p>
This file is served by the <code>staticIndexHandler</code> in app.js
</p>
<p>Click <a href="/hello">here</a> to go hello route.</p>
</body>
</html>
`;
example/app.js:
import express from 'express';
import { resolve } from 'path';
import htmlExpress, { staticIndexHandler } from '../src/index.js';
const __dirname = resolve();
const app = express();
app.engine(
'js',
htmlExpress({
includesDir: 'includes',
})
);
app.set('view engine', 'js');
app.set('views', `${__dirname}/example/public`);
// serve all other static files like CSS, images, etc
app.use(express.static(`${__dirname}/example/public`));
app.get('/hello', async function (req, res) {
res.render('hello', {
name: 'world',
});
});
// Automatically serve any index.js file as HTML in the public directory
app.use(
staticIndexHandler({
viewsDir: `${__dirname}/example/public`,
notFoundView: 'not-found', // OPTIONAL: defaults to `404/index`
})
);
export default app;
I hope this helps! 如果有任何问题，请随时提出。
英文:
I am not experienced in express js template engines and I tried to choose a simple one from the list https://expressjs.com/en/resources/template-engines.html
I chose html-express-js that is on GH: https://github.com/markcellus/html-express-js
I implemented it in my own code, but when I ran it, there were no line breaks in Chrome source view. So then I implemented the example code from the html-express-js GitHub site, but then the same bad issue happened.
The picture of the issue:
I need the line breaks there, and I think it is normal for the most HTML sites.
Is it a simple way to get the line breaks in this template engine? Or could anyone indicate a good template engine from the list?
Below I insert I think the crucial example files
example/public/index.js:
import { html } from '../../src/index.js';
export const view = (data, state) => html`
<!DOCTYPE html>
<html lang="en">
<head>
${state.includes.head}
<title>Dashboard</title>
</head>
<body>
<h1>This is the dashboard!</h1>
<p>
This file is served by the <code>staticIndexHandler</code> in app.js
</p>
<p>Click <a href="/hello">here</a> to go hello route.</p>
</body>
</html>
`;
example/app.js:
import express from 'express';
import { resolve } from 'path';
import htmlExpress, { staticIndexHandler } from '../src/index.js';
const __dirname = resolve();
const app = express();
app.engine(
'js',
htmlExpress({
includesDir: 'includes',
})
);
app.set('view engine', 'js');
app.set('views', `${__dirname}/example/public`);
// serve all other static files like CSS, images, etc
app.use(express.static(`${__dirname}/example/public`));
app.get('/hello', async function (req, res) {
res.render('hello', {
name: 'world',
});
});
// Automatically serve any index.js file as HTML in the public directory
app.use(
staticIndexHandler({
viewsDir: `${__dirname}/example/public`,
notFoundView: 'not-found', // OPTIONAL: defaults to `404/index`
})
);
export default app;
答案1
得分: 1
html-express-js模板引擎的html()函数将在HTML模板字符串中全局替换\n和\r为''。请参考这行代码v1.1.1/src/index.js#L65:
export function html(strings, ...data) {
let rawHtml = '';
for (const [i, str] of strings.entries()) {
const exp = data[i] || '';
rawHtml += str + exp;
}
const html = rawHtml.replace(/[\n\r]/g, '');
return html;
}
你可以使用ejs或Pug模板引擎。请选择知名的库，它们通常更全面，经过充分测试和维护。
英文:
The html() function of html-express-js template engine will replace the \n and \r with '' globally from the HTML template string. See this line v1.1.1/src/index.js#L65:
export function html(strings, ...data) {
let rawHtml = '';
for (const [i, str] of strings.entries()) {
const exp = data[i] || '';
rawHtml += str + exp;
}
const html = rawHtml.replace(/[\n\r]/g, '');
return html;
}
You can use ejs or Pug template engine. Please choose the famous libraries, they are usually more full-featured, well-tested, and well-maintained.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论