“This is the 13th day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021”.

Related introduction

Recently the author undertook a Nodebb project. NodeBB is an open source forum system built by Nodejs. It also provides a variety of external extension components and ecological support. Ps: I started from scratch when I received the added features, and I understood why I chose this architecture. In line with the convenience of their own, convenient for future generations, this will be related to some of the grammar sorted out, for everyone to have similar appeals behind easier to use.

An introduction to directly related syntax

NodeBB uses benchpress, a lightweight templating framework for Javascript and Nodejs, as its template solution.

Adjusting the NodeBB business template requires an understanding of the syntax of BenchPress.

Common template syntax

The interpolation of grammar

{website} // This page displays data such as webbsite = a displayed on the page is a

{{obj.url}} // This scheme is object type rendering
Copy the code

Conditional statements

A conditional statement in a template can be expressed in two ways: curly brace and comment type. A conditional statement following an IF statement recognizes custom methods, Boolean type variables, and! Operation variable.

Ps: Template syntax old and new can not be mixed package, the official does not recommend mixed use, after the actual test, not mixed package can be displayed

Ps: If must remember to end

// temp 1
{{{ if boolean }}}
Hello World!
{{{ end }}}

// Comment temp 2 This version is an earlier version<! -- IF aaa --> <! -- ELSE --> <! -- ENDIF aaa -->Copy the code

The iteration

Iterative syntax, similar to for loop.

// temp 1
{{{ each animals }}}
   {animals.name}
   {{animals.header}}
{{{ end }}}

// temp 2<! -- BEGIN animals --> {animals.aaa} <! -- END -->// Output all def in the iteration loop<! -- BEGIN animals --> {.. /def} <! -- END -->Copy the code

Register help method (advanced)

// The method of benchpress is as follows
benchpress.registerHelper("showText".function(data) {
  return data.istrue : "AAA" : "BBB"
})
Copy the code

// Custom methods in this framework

/public/src/modules/helpers.js

Add a new processing method to this JS

Other related (not related to actual use but useful apis)

.precompile(source, { filename }): Promise<string>

This method compiles template to JS syntax

const fs = require('fs').promises;
const benchpress = require('benchpressjs');

const template = await fs.readFile('path/to/source/templates/favorite.tpl'.'utf8');
const compiled = await benchpress.precompile(template, { filename: 'favorite.tpl' });
await fs.writeFile('path/to/compiled/templates/favorite.jst', compiled);

Copy the code

.__express

Fast Engine API

.render(template, data): Promise<string> (alias: .parse(template, data, callback(string)))

This method is used by the client to parse templates, and to use it, you must use.registerLoader to set the callback header to get the compiled template module

require(['benchpress'].(benchpress) = > {
  benchpress.registerLoader((name, callback) = > {
    // fetch `name` template module
  });

  benchpress.render('basic', {
    forum: 'NodeBB'.language: 'Javascript',
  }).then((output) = > {
    // do something with output
  });
});
Copy the code

Others are not syntactic

Template syntax often have some variable values will be compared with, including the name of a variable, the front part of the data can be through the current URL address plus the API to get to the part of the interface to get the data, to have to deal with this part of the data frame, can be directly used in the template syntax (ps: pay attention to the position of the template effect, and versatility of the variable name).

/ / sample as follows, the URL to the following address / / http://localhost:8080/category/7/ can get access to the following address to the corresponding interface can access the value of the http://localhost:8080/api/category/7/Copy the code