使用 handlebars模版引擎加载到

最新推荐文章于 2024-08-20 17:48:42 发布

原创最新推荐文章于 2024-08-20 17:48:42 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Handlebars模板引擎创建动态网页，包括安装配置、基本语法及如何将数据渲染到HTML中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步安装 handlebars

cnpm i handlebars -S

新建 templete文件夹；新建dir.tpl.html;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
  {{#each files}}
  <a href="{{../dir}}/{{this}}">{{this}}</a>
  {{/each}}
</body>
</html>

这个模版的意思就

{{ }} 这个里面写传进来的变量；

{{#each}} {{/each}} 里面写循环的； {{#each files}} files 要循环的数组， {{this}} 是循环中的数组成员；

href是拼接成的路径；当前使用的是相对路径；

第二部做一些模版引擎配置的前置工作；

//引用handlebars
const Handlebars = require("handlebars");
//文件操作通通使用绝对路径 除非require；
const tpl = path.join(__dirname,"../templete/dir.tpl.html");
//拿到 Handlebars模版引擎额 依赖资源文件 使用同步操作一次；
const source = fs.readFileSync(tpl);
//使用Handlebars.compile得到处理过的模版； 但是接受一个字符串 ，source是buffer 所以要转格式；
const templete = Handlebars.compile(source.toString());

第三部使用这个模版书写流，并把模版使用具体的变量都插进去；

else if(status.isDirectory()){
         //  //如果返回的类型是文件夹  那么 就在 页面写出 文件名 ，
            res.setHeader("Content-Type","text/html")
         const files=await readdir(filePath);

            // 使用path的relative方法来获取路径；
            const dir = path.relative(config.root,filePath);

            const data = {
                title:path.basename(filePath),
                files:files,
                dir:dir?`/${dir}`:""
            }
         //使用templete的生成的模版；
         res.end(templete(data));
     }

解释一下 data参数；

files 就是当前的数据名字；

title 就是当前的拿到这些文件名的上一级文件夹名字

dir 就是拿到相对于这些文件名的 cwd（）；拼接具体的 files的某个成员就可以读取网站资源了