Node 静态页面生成器教程

Node 静态页面生成器教程

node-static-page-generatorA basic static page generator for Node.js.项目地址:https://gitcode.com/gh_mirrors/no/node-static-page-generator

项目目录结构及介绍

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文件输出路径。

通过这些配置项，可以灵活地调整项目的输入输出路径，方便进行定制化开发。

node-static-page-generatorA basic static page generator for Node.js.项目地址:https://gitcode.com/gh_mirrors/no/node-static-page-generator