Home > Developer > JavaScript
The introduction of the art-template syntax and the conflict solution in nodejs, nodejsart-template
When using Webstorm to create nodejs express applications, jade or ejs templates are used by default. It is really not convenient for those who are not used to these two template syntaxes. It doesn't matter. Here we use the art-template engine. after use, we can directly use the html template:
1. Install art-template
npm install art-template
2. Modify the app. js file and add the following code:
// view engine setupapp.set('views', path.join(__dirname, 'views'));var template = require('art-template');template.config('base', '');template.config('extname', '.html');app.engine('.html', template.__express);app.set('view engine', 'html');
3. Create an html page and access the js route directly.
4. Add the following route interception in app. js:
var routes = require('./routes/index');...app.use('/', routes);
Then the index. js file:
var express = require('express');var router = express.Router();var tags = require('../modules/tag.js');router.get('/', function(req, res, next) { res.render("index2",{title:"index2",content:"index2's content"});});module.exports = router;
Here, I will go to the index2 page (After configuring the art-templatetemplate, the image layer extension file is HTML, and the index2.html page is as follows:
<!DOCTYPE html>Run the application and the browser outputs the following:
Syntax conflict solution of the art-template in nodejs
Github for art-template: https://github.com/aui/art-template
In front-end development, there are a lot of third-party frameworks for the template engine. Among them, art-template is a better write method. Generally, a third-party template engine supports one or two template syntaxes, the most common syntax is the beard syntax {{}} and the angle bracket syntax <% = %>
This article mainly introduces how art-template solves template engine syntax conflicts in nodejs.
1.1-scenario of template engine syntax conflicts
1. if an html file contains both client-side rendering and server-side rendering, the template engine syntax of the two types of rendering cannot be consistent, otherwise, when loading, the server renders the client template.
2. this is usually the case. For example, if an html file contains both server-side rendering and client-side rendering, the template engine on the server uses the {} syntax, client rendering we use <% = %>
3. in nodejs, we use npm to install art-template: npm install art-template. By default, art-template supports both browser and server, and the import files between them are different.
1.2-configure the art-template server template syntax
1. if it is a server, we use require ('art-template') for import. At this time, index is loaded. js, here the index. js is worth the index in the root directory. js. This is the entry to the node. js module loading mechanism. It is very simple internally, that is, a file import operation.
The template source code of the art-template on the server is in the adapter corresponding to the compile folder under the lib folder of the art-template. The files corresponding to the two template syntaxes are rule. art. simple js syntax, rule. native. js native syntax, such
2. if it is a client, we cannot use the template syntax file of the server. This is because nodejs follows the commonjs specification and all file APIs are exported in the form of modules, in the art-template folder, the lib-> compile folder has a template syntax file template-web.js dedicated to the client, which is a compressed js package
3. By default, the template syntax of the browser supports two types of syntaxes: Concise and native, which cannot be modified. However, we can modify the source code of the server so that the server only supports one template syntax: {}. In this way, we can use the <% = %> syntax on the client, and the server will not be able to render it.
After analyzing the source code of the art-template, I found that the syntax of the two templates on the art-template Server is a default under the compile file. js file, so we only need to slightly modify the source code.
The default value is an array to configure the template syntax. [nativeRule, artRule] supports both template syntax. We can remove nativeRule. At this time, the server only supports the {} syntax, this code modification will not affect the client.
In this case, the template syntax of the server and the client will not conflict.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
