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

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

news 2025/8/20 8:29:48

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

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/7/6 9:38:37

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/8/6 6:12:14

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/8/11 16:55:20

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/8/19 14:28:13

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/6/21 7:26:54

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/7/6 16:44:09

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/8/19 0:29:40

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/7/14 23:57:11