Node 静态页面生成器教程
项目目录结构及介绍
node-static-page-generator/
├── src/
│ ├── templates/
│ │ └── index.html
│ ├── styles/
│ │ └── main.css
│ ├── scripts/
│ │ └── main.js
│ └── data/
│ └── content.json
├── dist/
│ ├── index.html
│ ├── main.css
│ └── main.js
├── config/
│ └── config.json
├── package.json
└── index.js
src/
:源代码目录,包含模板、样式、脚本和数据文件。templates/
:HTML模板文件。styles/
:CSS样式文件。scripts/
:JavaScript脚本文件。data/
:数据文件,如JSON文件。
dist/
:生成后的静态文件目录。config/
:配置文件目录。package.json
:项目依赖和脚本配置文件。index.js
:项目启动文件。
项目启动文件介绍
index.js
是项目的启动文件,负责读取配置、生成静态页面并输出到 dist
目录。以下是 index.js
的主要功能:
const fs = require('fs');
const path = require('path');
const config = require('./config/config.json');
// 读取模板文件
const template = fs.readFileSync(path.join(__dirname, 'src/templates/index.html'), 'utf-8');
// 读取数据文件
const data = require('./src/data/content.json');
// 生成最终的HTML内容
const finalHtml = template.replace('{{content}}', data.content);
// 输出到dist目录
fs.writeFileSync(path.join(__dirname, 'dist/index.html'), finalHtml);
console.log('静态页面生成成功!');
项目的配置文件介绍
config/config.json
是项目的配置文件,包含一些基本的配置项,如模板路径、数据路径等。以下是配置文件的内容示例:
{
"templatePath": "src/templates/index.html",
"dataPath": "src/data/content.json",
"outputPath": "dist/index.html"
}
templatePath
:模板文件的路径。dataPath
:数据文件的路径。outputPath
:生成后的HTML文件输出路径。
通过这些配置项,可以灵活地调整项目的输入输出路径,方便进行定制化开发。