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

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

news 2026/2/9 22:40:26

使用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

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/2/1 23:39:12

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/2/9 15:39:14

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28