最简单的 node.js + nunjucks 示例
Simplest possible node.js + nunjucks example
可能永远不会使用 node.js 或 Nunjucks 进行任何实际开发,但现在由于某些原因需要:
- 使用
Nunjucks
将一些简单模板预编译为 javascript
- 运行
node.js
下的预编译模板
我完成了:
- 已安装
node.js
和 npm
(例如有 node
和 npm
命令)
mkdir njtest && cd njtest
- 使用
npm install nunjucks
安装了 nunjucks(获得了 node_modules/nunjucks
目录)
mkdir templates
在模板中,我创建了两个文件 index.html
和 layout.html
,内容如下 jinja2/nunjucks
layout.html
<!doctype html>
<head>
<title>simple example</title>
</head>
<body>
<h1>Simple example</h1>
{% block body %}{% endblock %}
</body>
index.html
{% extends "layout.html" %}
{% block body %}
hello world
{% endblock %}
- 我用
预编译了模板
./node_modules/nunjucks/bin/precompile templates >templates.js
并且在 templates.js
我有预编译代码。
下一步我应该 to do
得到一个 运行ning 网络服务器什么将使用预编译的 template.js
?
请不要搜索这个问题的任何高级内容。对于了解节点和 javascript.
的人来说,这可能是一个愚蠢的简单问题
据我所知,需要创建一个文件,让我们说 app.js
并需要 运行 它和 node
- 但应该包含什么?
require 'nunjucks';
可能是这样的:var res = nunjucks.render('templates.js');
还有什么? (最简单的(一次性)解决方案)。注意:要在服务器端而不是在浏览器中使用 Nunjucks。
首先按如下方式初始化您的 Node 应用程序:
cd njtest
npm init
您可以点击 "Enter" 接受大多数问题的默认设置,如果您在 创建 app.js 之后这样做,那么它将自动检测它并将其用作简单服务器的入口点。
安装 Express:
npm install express --save
然后创建app.js
如下:
var express = require( 'express' ),
app = express(),
nunjucks = require( 'nunjucks' ) ;
// Define port to run server on
var port = process.env.PORT || 9000 ;
// Configure Nunjucks
var _templates = process.env.NODE_PATH ? process.env.NODE_PATH + '/templates' : 'templates' ;
nunjucks.configure( _templates, {
autoescape: true,
cache: false,
express: app
} ) ;
// Set Nunjucks as rendering engine for pages with .html suffix
app.engine( 'html', nunjucks.render ) ;
app.set( 'view engine', 'html' ) ;
// Respond to all GET requests by rendering relevant page using Nunjucks
app.get( '/:page', function( req, res ) {
res.render( req.params.page ) ;
} ) ;
// Start server
app.listen( port ) ;
console.log( 'Listening on port %s...', port ) ;
现在启动浏览器,转到 http://localhost:9000 弹出您的页面!
希望对您有所帮助...
我为 Nunjucks + SCSS + TypeScript 创建了简单的构建器
文档:https://github.com/Artik-Man/SamuraiJS
NPM:https://www.npmjs.com/package/samuraijs
npm i samuraijs
创建 samurai.js
文件:
import {Samurai} from "samuraijs";
new Samurai({
paths: {
source: 'src',
destination: 'dist'
}
});
将以下行添加到您的 package.json:
{
"scripts": {
"serve": "node samurai.js --serve",
"build": "node samurai.js --build"
},
"type": "module"
}
将您的 *.njk 文件放在 src/
目录中,运行
npm run serve
并打开localhost:3000
或npm run build
构建项目。
不要考虑构建配置。只需为您的项目编写代码!
希望我的构建器能解决您的问题:)
可能永远不会使用 node.js 或 Nunjucks 进行任何实际开发,但现在由于某些原因需要:
- 使用
Nunjucks
将一些简单模板预编译为 javascript
- 运行
node.js
下的预编译模板
我完成了:
- 已安装
node.js
和npm
(例如有node
和npm
命令) mkdir njtest && cd njtest
- 使用
npm install nunjucks
安装了 nunjucks(获得了node_modules/nunjucks
目录) mkdir templates
在模板中,我创建了两个文件
index.html
和layout.html
,内容如下jinja2/nunjucks
layout.html
<!doctype html>
<head>
<title>simple example</title>
</head>
<body>
<h1>Simple example</h1>
{% block body %}{% endblock %}
</body>
index.html
{% extends "layout.html" %}
{% block body %}
hello world
{% endblock %}
- 我用 预编译了模板
./node_modules/nunjucks/bin/precompile templates >templates.js
并且在 templates.js
我有预编译代码。
下一步我应该 to do
得到一个 运行ning 网络服务器什么将使用预编译的 template.js
?
请不要搜索这个问题的任何高级内容。对于了解节点和 javascript.
的人来说,这可能是一个愚蠢的简单问题据我所知,需要创建一个文件,让我们说 app.js
并需要 运行 它和 node
- 但应该包含什么?
require 'nunjucks';
可能是这样的:var res = nunjucks.render('templates.js');
还有什么? (最简单的(一次性)解决方案)。注意:要在服务器端而不是在浏览器中使用 Nunjucks。
首先按如下方式初始化您的 Node 应用程序:
cd njtest
npm init
您可以点击 "Enter" 接受大多数问题的默认设置,如果您在 创建 app.js 之后这样做,那么它将自动检测它并将其用作简单服务器的入口点。
安装 Express:
npm install express --save
然后创建app.js
如下:
var express = require( 'express' ),
app = express(),
nunjucks = require( 'nunjucks' ) ;
// Define port to run server on
var port = process.env.PORT || 9000 ;
// Configure Nunjucks
var _templates = process.env.NODE_PATH ? process.env.NODE_PATH + '/templates' : 'templates' ;
nunjucks.configure( _templates, {
autoescape: true,
cache: false,
express: app
} ) ;
// Set Nunjucks as rendering engine for pages with .html suffix
app.engine( 'html', nunjucks.render ) ;
app.set( 'view engine', 'html' ) ;
// Respond to all GET requests by rendering relevant page using Nunjucks
app.get( '/:page', function( req, res ) {
res.render( req.params.page ) ;
} ) ;
// Start server
app.listen( port ) ;
console.log( 'Listening on port %s...', port ) ;
现在启动浏览器,转到 http://localhost:9000 弹出您的页面!
希望对您有所帮助...
我为 Nunjucks + SCSS + TypeScript 创建了简单的构建器
文档:https://github.com/Artik-Man/SamuraiJS
NPM:https://www.npmjs.com/package/samuraijs
npm i samuraijs
创建 samurai.js
文件:
import {Samurai} from "samuraijs";
new Samurai({
paths: {
source: 'src',
destination: 'dist'
}
});
将以下行添加到您的 package.json:
{
"scripts": {
"serve": "node samurai.js --serve",
"build": "node samurai.js --build"
},
"type": "module"
}
将您的 *.njk 文件放在 src/
目录中,运行
npm run serve
并打开localhost:3000
或npm run build
构建项目。
不要考虑构建配置。只需为您的项目编写代码!
希望我的构建器能解决您的问题:)