Nodejs中doT.js怎么进行文件引用

Nodejs中doT.js怎么进行文件引用

譬如在index.html 中引用 header.html 和 footer.html

– index.html – public |-- header.html |-- footer.html

用{{#def.loadfile(‘public/header.html’)}} 报错啊，

500 TypeError: Object #<Object> has no method ‘loadfile’

大神支招啊！

3 回复

要在 Node.js 中使用 doT.js 模板引擎来引用其他文件（如 header.html 和 footer.html），你需要先加载这些文件的内容，并将它们插入到主模板中。doT.js 本身并不直接支持文件加载方法，因此需要借助 Node.js 的文件系统模块（fs）来完成这一任务。

以下是一个简单的步骤指南以及示例代码，帮助你实现这一目标：

步骤

  1. 安装必要的依赖：

    • 安装 dot 库（doT.js 的一个实现）。
    • 确保你的项目中有 fs 模块可用，这是 Node.js 的内置模块。

  2. 读取文件内容： 使用 fs.readFile 或 fs.readFileSync 方法读取 header.html 和 footer.html 文件的内容。

  3. 编写模板并插入内容： 使用 doT.js 编写模板，并在适当的位置插入从文件读取的内容。

示例代码

// 引入所需的库
const fs = require('fs');
const dot = require('dot');

// 读取 header.html 和 footer.html 文件内容
const headerContent = fs.readFileSync('./public/header.html', 'utf8');
const footerContent = fs.readFileSync('./public/footer.html', 'utf8');

// 定义 doT.js 模板字符串
const template = `
<!DOCTYPE html>
<html>
<head>
    <title>{{=it.title}}</title>
</head>
<body>
    {{= it.header }}
    <h1>Welcome to My Website</h1>
    {{= it.footer }}
</body>
</html>
`;

// 编译模板
const compiledTemplate = dot.template(template);

// 渲染模板
const renderedHtml = compiledTemplate({
    title: "My Website",
    header: headerContent,
    footer: footerContent
});

console.log(renderedHtml);

解释

  • fs 模块：用于读取本地文件。fs.readFileSync 是同步版本，适合小文件或不关心异步操作的场景。
  • dot 模块：这是一个 doT.js 的 Node.js 实现。我们使用它来编译和渲染模板。
  • 模板字符串：定义了一个基本的 HTML 结构，其中包含了两个占位符 {{= it.header }} 和 {{= it.footer }}，用于插入外部文件的内容。
  • 编译和渲染：通过 dot.template 编译模板，然后使用传递的对象数据渲染模板。

这种方法允许你在 Node.js 环境下灵活地管理和插入外部文件的内容，而不需要修改 doT.js 的核心功能。


你需要自己定义loadfile方法 比如：

var defs = {};
defs.loadfile = function(path) {
 var data = fs.readFileSync(path);
 if (data) return data.toString();
 console.log("file not found with path: " + path); 
}

然后dot编译阶段将defs传入就行

dot.template(view, options, defs)

在Node.js中使用doT.js模板引擎时，如果你想引用其他文件（例如header.html和footer.html），你需要先读取这些文件的内容，然后将其传递给doT.js模板。doT.js本身并不直接支持文件加载功能，因此需要借助Node.js的文件系统模块（fs）来完成这个任务。

以下是一个简单的例子，展示如何实现这一需求：

示例代码

首先，确保你已经安装了doT.js。如果还没有安装，可以通过npm安装：

npm install dot

然后，在你的Node.js应用中，你可以这样编写代码：

const fs = require('fs');
const doT = require('dot');

// 读取header.html和footer.html文件内容
let headerContent = fs.readFileSync('./public/header.html', 'utf-8');
let footerContent = fs.readFileSync('./public/footer.html', 'utf-8');

// 编译doT模板
let template = doT.template(`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{= it.header }}
<!-- 主体内容 -->
{{= it.footer }}
</body>
</html>
`);

// 渲染模板
let result = template({
    header: headerContent,
    footer: footerContent
});

console.log(result);

解释

  1. 读取文件：我们使用fs.readFileSync同步读取header.html和footer.html文件的内容。这里假设header.html和footer.html位于项目的public目录下。

  2. 编译模板：定义一个doT模板字符串，并使用doT.template()函数编译它。模板中的{{= it.header }}和{{= it.footer }}占位符将分别被替换为headerContent和footerContent的内容。

  3. 渲染模板：最后，通过调用编译后的模板函数并传入包含header和footer属性的对象，生成最终的HTML输出。

这种方法可以灵活地处理文件内容，并将其整合到你的Node.js应用程序中。

回到顶部