当前位置： 首页 > news >正文

【Node】使用Node.js构建简单的静态页面生成器

news 2026/2/10 0:48:38

使用Node.js构建简单的静态页面生成器

在现代的Web开发中，静态网站因其速度快、安全性高而越来越受到开发者的青睐。本文将介绍如何使用Node.js构建一个简单的静态页面生成器，通过这个小项目，你将了解到静态网站生成的基本原理和实现方法。

项目概述

我们的目标是创建一个能够根据模板和数据自动生成静态HTML页面的生成器。这个生成器将读取一个HTML模板文件，并使用JavaScript对象中的数据来填充这个模板，最后输出一个或多个静态HTML文件。

开发环境准备

在开始之前，请确保你的开发环境中已经安装了Node.js。你可以通过运行node -v来检查Node.js是否已安装。

项目结构

我们的项目结构如下：

- generate.js
- template.html
- output/
  • generate.js：这是我们的主要脚本文件，负责读取模板、生成静态页面并保存到output目录。
  • template.html：这是HTML模板文件，其中包含了一些占位符，如{{title}}和{{description}}，我们的脚本将会替换这些占位符来生成最终的页面。
  • output/：这个目录用于存放生成的静态页面。

实现步骤

  1. 准备好一个模板html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{title}}</title>
</head>
<body><h1>{{title}}</h1><p>{{description}}</p>
</body>
</html>
  1. 读取模板文件
    首先，我们需要读取模板文件template.html。我们使用Node.js的fs模块来实现文件的读取。
const fs = require('fs');
const path = require('path');const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8');
  1. 定义页面数据
    接下来，我们定义一个数组来模拟页面数据。每个对象代表一个页面，包含标题和描述。
const pagesData = [{ title: 'Page 1', description: 'This is the first page.' },{ title: 'Page 2', description: 'This is the second page.' },// 添加更多页面数据
];
  1. 生成静态页面
    现在，我们遍历pagesData数组，为每个页面生成一个HTML文件。我们使用字符串的replace方法来替换模板中的占位符。
pagesData.forEach((page, index) => {const outputPath = path.join(__dirname, `output/page${index + 1}.html`);let outputContent = template.replace('{{title}}', page.title).replace('{{description}}', page.description);fs.writeFileSync(outputPath, outputContent);console.log(`Generated: ${outputPath}`);
});
  1. 运行脚本
    最后，运行node generate.js来执行脚本。你将在output目录下看到生成的静态页面。

结语

通过这个简单的项目，我们展示了如何使用Node.js构建一个静态页面生成器。虽然这个生成器非常基础，但它为理解静态网站生成的原理和扩展更复杂的生成器提供了一个良好的起点。希望这篇文章能够激发你进一步探索静态网站生成器和Node.js的可能性。

相关文章：

【Node】使用Node.js构建简单的静态页面生成器

使用Node.js构建简单的静态页面生成器 在现代的Web开发中&#xff0c;静态网站因其速度快、安全性高而越来越受到开发者的青睐。本文将介绍如何使用Node.js构建一个简单的静态页面生成器&#xff0c;通过这个小项目&#xff0c;你将了解到静态网站生成的基本原理和实现方法。 …...

编程日记 2024/4/3 9:20:14

AI智能客服机器人是什么？对企业重要吗？

在数字化时代&#xff0c;客户服务是企业与客户建立牢不可破关系的重要桥梁。AI智能客服机器人&#xff0c;顾名思义&#xff0c;就是利用人工智能技术提升客户服务体验的自动化工具。今天&#xff0c;就让我们来揭开AI智能客服机器人的神秘面纱&#xff0c;并讨论它对企业的重…...

编程日记 2024/4/3 9:19:13

InfluxDB2的数据查询示例

有用influxdb2 不支持sql&#xff0c;并且实质是个列存储数据库&#xff0c;这里基于 influxdb-client-java 和 beanutils反射&#xff0c;写了个数据查询&#xff0c;把结果以行对象的形式返回的工具类。 package com.joy.malltools.influxdb2;import com.influxdb.client.Q…...

编程日记 2024/4/3 9:16:10

CSS基础语法-黑马跟课笔记-供记录与查询

一.CSS简介 1.1HTML局限性 只关注内容的语义&#xff0c;可以做简单的样式但是很臃肿且繁琐 1.2CSS优势 CSS层叠样式表&#xff0c;标记语言 设置HTML页面中的文本内容&#xff0c;图片外形&#xff0c;可以美化HTML&#xff0c;让页面布局更美观 HTML做框架&#xff0c;…...

编程日记 2024/4/3 9:15:09

「PHP系列」PHP数组排序及运用场景

文章目录 一、PHP 数组排序二、PHP 数组排序使用场景数据排序介绍数据排序案例 三、相关链接 一、PHP 数组排序 PHP 提供了多种数组排序函数&#xff0c;允许你根据数组元素的值或键进行排序。 sort() sort() 函数用于对数组的元素按升序进行排序。它会修改原始数组&#xf…...

编程日记 2024/4/3 9:11:05

VScode debug python（服务器）

方法一&#xff1a; 创建launch.json文件&#xff1a; launch.json文件地址&#xff1a; launch.json文件内容&#xff1a; {"version": "0.2.0", //指定了配置文件的版本"configurations": [{"name": "Python: Current File&…...

编程日记 2024/4/3 9:10:04

5.11 Vue配置Element UI框架

Vue配置Element UI框架 目录一、 概要二、 开发前准备1. 搭建Vue框架 三、 安装 Element UI1. 引入 Element UI 依赖2. 在 main.js 中引入 Element UI 和相关样式&#xff1a;3. 按需引入(非必须, 可忽略)4. 简单构建一个主页面 目录 一、 概要 Element UI 是一个基于 Vue.js …...

编程日记 2024/4/3 9:04:59

DolphinScheduler on k8s 云原生部署实践

文章目录 前言利用Kubernetes技术云原生平台初始化迁移基于Argo CD添加GitOpsDolphinScheduler 在 k8s 上的服务自愈可观测性集成服务网格云原生工作流调度从HDFS升级到S3文件技术总结 前言 DolphinScheduler 的高效云原生部署模式&#xff0c;比原始部署模式节省了95%以上的人…...

编程日记 2024/4/3 9:02:56

JVM将虚拟机分成了哪几块区域？

Java 8之后&#xff0c;JVM&#xff08;Java Virtual Machine&#xff09;继续沿用原有的内存区域划分&#xff0c;主要包括以下几个部分&#xff1a; 1、堆&#xff08;Heap&#xff09;&#xff1a; 用途&#xff1a;存储对象实例&#xff0c;几乎所有通过new关键字创建的对…...

编程日记 2024/4/3 9:01:55

【热门话题】WebKit架构简介

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 WebKit架构简介一、引言二、WebKit概览1. 起源与发展2. 模块化设计 三、WebCore…...

编程日记 2024/4/3 9:00:54

顶顶通呼叫中心中间件-话术编辑器机器人转人工坐席配置(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-话术编辑器机器人转人工座席配置(mod_cti基于FreeSWITCH) 配置方法 一、ACD排队转接 二、伴随转接 比如你设置的通知规则是任意满足一个就通知那么通话时间设置为10 秒那样他只要通话时间到10秒他就会转坐席。 如果要转人工的时侯转手机可以这样配置 把…...

编程日记 2024/4/3 8:57:50

【嵌入式开发 Linux 常用命令系列 8 -- shell 命令 basename 介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 shell 命令 basenamedf 命令 shell 命令 basename 在 shell 脚本中&#xff0c;可以使用 basename 命令来获取文件的基本名称&#xff08;不带路径的部分&#xff09;。以下是如何将文件名赋值给变量的示例&#xff1a; file_pat…...

编程日记 2024/4/3 8:56:49

使用docker部署MongoDB数据库

最近由于工作需要搭建MongoDB数据库&#xff1a;将解析的车端采集的数据写入到数据库&#xff0c;由于MongoDB高可用、海量扩展、灵活数据的模型&#xff0c;因此选用MongoDB数据库&#xff1b;由于现公司只有服务器&#xff0c;因此考虑容器化部署MongoDB数据&#xff0c;特此…...

编程日记 2024/4/3 8:55:48

3. WiFi基本原理

1. WiFi简介 WiFi的全称是Wireless Fidelity。它是一种无线网络通信技术&#xff0c;由Wi-Fi联盟拥有&#xff0c;目的是改善基于IEEE 802.11标准的无线网络产品之间的互通性&#xff0c;允许电子设备在没有物理连接的情况下进行高速数据传输。此外&#xff0c;WiFi也被视为IE…...

编程日记 2024/4/3 8:50:43

详解人工智能（概念、发展、机遇与挑战）

前言 人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一门新兴的技术科学&#xff0c;是指通过模拟、延伸和扩展人类智能的理论、方法、技术和应用系统&#xff0c;以实现对人类认知、决策、规划、学习、交流、创造等智能行为的模拟、延伸和扩展…...

编程日记 2024/4/3 8:49:41

flyway的使用

什么是flyway Flyway是一个开源的数据库版本控制工具&#xff0c;用于在应用程序的开发和部署过程中管理数据库结构的变化。它允许开发团队使用简单的脚本语言&#xff08;通常是SQL&#xff09;来描述数据库的变化&#xff0c;并将这些脚本应用于目标数据库。Flyway还提供了版…...

编程日记 2024/4/3 8:48:40

web渗透测试漏洞复现：ZooKeeper未授权漏洞复现

web渗透测试漏洞复现 1. ZooKeeper未授权漏洞复现1.1 ZooKeeper简介1.2 ZooKeeper漏洞复现1.3 ZooKeeper漏洞修复建议1. ZooKeeper未授权漏洞复现 1.1 ZooKeeper简介 ZooKeeper 是一个分布式的、开源的协调服务，最初由雅虎开发，现隶属于 Apache 软件基金会，是Google的Chub…...

编程日记 2024/4/3 8:46:37

算法错题本

这里写目录标题 错题本注意数据的耦合性对于无解情况的处理思路一组数据以0为结束标记&#xff0c;如何输入到数组中&#xff0c;并计数多个数据进行比较链表删除重复元素的启发循环体里谨慎写类型定义并初始化&#xff08;一般写上就是错&#xff09;队列中读取队尾元素数组当…...

编程日记 2024/4/3 8:45:36

绝地求生：爷青回！老版艾伦格回归？雨天雾天的艾伦格你还记得吗？

爷青回&#xff01;老版艾伦格回归&#xff1f;雨天雾天的艾伦格你还记得吗&#xff1f; 嗨&#xff0c;我是闲游盒~ 早在很久前&#xff0c;就有许多玩家吐槽艾伦格越改越没那味了&#xff0c;没之前的真实感了等等.... ◆ PUBG官方发布了一条推文&#xff0c;其中就有类似老版…...

编程日记 2024/4/3 8:43:34

10秒钟用python接入讯飞星火API（保姆级）

正文&#xff1a; 科大讯飞是中国领先的人工智能公众公司&#xff0c;其讯飞星火API为开发者提供了丰富的接口和服务&#xff0c;以支持各种语音和语言技术的应用。 步骤一&#xff1a;注册账号并创建应用 首先&#xff0c;您需要访问科大讯飞开放平台官网&#xff0c;注册一个…...

编程日记 2024/4/3 8:41:31

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2026/2/7 10:47:09