Motor de plantillas: El motor de plantillas es una herramienta para generar html dinámicamente en aplicaciones web, responsable de combinar datos con plantillas;
instalación de Koa, Koa-router, Koa-views pug
npm i koa koa-router koa-views pug
node.js genera html Estos son los datos
//引入
const Koa = require("koa"); //加载koa框架
const Router = require("koa-router"); //加载路由
const views = require("koa-views") // 加载视图控制
let app = new Koa();
let router = new Router();
//使用
app.use(views(__dirname + "/views", {
map: {
html: "pug"
}
}))
// app.use(views(__dirname + "/views", { //自动去views里面找
// map: {
// html: "pug"
// }
// }));
//实行异步机制
router.get("/", async ctx => {
// ctx.body = "hello";
await ctx.render("index.pug", {
data: "我是数据"
})
})
app.use(router.routes());
app.listen(3000);//这是端口
Cree un index.pug equivalente a html y escriba una plantilla en él.
Estilo de escritura:
estilo.
.mtdiv { ancho: 200px; altura: 200px; fondo: rojo; }
- Sintaxis pug: reemplaza la relación de contención jerárquica html anterior mediante sangría. Por ejemplo, una estática simple se puede expresar como, preste atención al uso uniforme de tabulación o sangría de espacio, y no los mezcle.
body
h1 我是标签
div 我是div
div(class="mtdiv") 我是类名
#myid 我是有标签的div
//
//js结合使用
div
| hello
//加一个树干就是div标签 如果不加就是两个标签
//接收服务器返回的数据
p #{data}
//使用自身的数据
- let str = "你好啊"
p #{str}
Esta es una representación, podemos ver lo mismo que html
Utilice juicio, bucle, función, modo de mezcla en pug
//ciclo
//- ul
//- each item in users //遍历数据
//- li 姓名是：#{item.name};年龄事 #{item.age};身高事： #{item.height};
//-for循环
- for(let i =0;i<4;i++)
span 我是循环出来的数据 #{
i}
//juicio
- let num = "a";
case num
when 1
p num 是1
when 2
p num 是2
when 3
p num 是3
default
p num 是其他数
//Modo mezclado
mixin mydiv
div 我是常用的div
+mydiv
mixin pet(name,sex)
p 这是一只#{
name},他的性别是#{
sex}
+pet("太帝","男")
+pet("太帝","男")
+pet("太帝","男")
+pet("太帝","男")
script(type="text/javascript").
console.log("hhh")
js uso combinado
-
script (tipo = "texto / javascript").
console.log ("hhh") -
script (src = "onde.js")
-
npm yo pug-cli -g
-
pug index.pug
-
pug index.pug -w -P convertir html a formato normal
npm i koa-static
- const static = require ("koa-static") // Cargar archivos estáticos
- app.use (static (__ dirname + “/ static”))
Introducir un
enlace de estilo CSS externo (rel = "stylesheet", href = "index.css")
sintaxis de nunjucks
koa-nunjucks-2
Instalación: npm i koa-nunjucks -2
use
const nunjucks = require("koa-nunjucks-2");
app.use(nunjucks({
ext: "html", //指定模板后缀 .njk
path: __dirname + '/views', //指定视图目录
nunjucksConfig: {
trimBlocks: true //开启转义，防止xss漏洞
}
}));
uso de la sintaxis de nunjucks
变量 ：<p>用户名：{
{username}}</p>
si
<!-- if -->
{
% if num>3 %}
<p>num值大于3</p>
{
% elif num %}
<span>num值小于3</span> {
% else %}
<div>num值等于3</div>
{
% endif %}
Estructura de bucle para
router.get("/", async ctx => {
await ctx.render("index", {
username: "hhh",
num: 2,
arr: [{ name: "张三", age: 20, height: "188cm" },
{ name: "李四", age: 10, height: "168" },
{ name: "王五", age: 28, height: "165" }
],
str: "hello world"
});
})
ul>
{
% for item in arr %}
<li>
姓名是{
{
item.name}} 年龄是{
{
item.age}} 身高是{
{
item.height}}
</li>
{
% endfor %}
<!-- 循环结束 -->
</ul>
{% endfor %} <!-- 循环结束 -->
<!-- 过滤器 --> {
{ str | replace("world", "bar") | capitalize }}
Tenga en cuenta que nodemon no puede detectar html, así que después de modificar el contenido en html, recuerde reiniciar
Bloque de herencia de plantilla / se extiende
- Definir la plantilla principal
<h1>我是公共模板</h1>
<div class="leftContent">
{
% block left %}
这边是左侧的内容
{
% endblock %}
{
% block right %}
这边是右侧的内容
{
% endblock %}
{
% block somevalue %}
我是一些数据
{
% endblock %}
</div>
Heredar la plantilla principal
{
% extends "common.html" %}
{
% block left %}
我是左侧的内容1111
{
% endblock %}
{
% block right %}
我是右侧的内容11111
{
% endblock %}
{
% block somevalue %}
{
{
super() }}
{
% endblock %}