NTH-start-project 开源项目常见问题解决方案

NTH-start-project 开源项目常见问题解决方案

NTH-start-project Startkit for HTML / CSS / JS pages layout. 项目地址: https://gitcode.com/gh_mirrors/nt/NTH-start-project

1. 项目基础介绍和主要编程语言

NTH-start-project 是一个用于快速启动 HTML/CSS/JS 页面布局的开源项目。它提供了一个基础框架，包含了使用 Pug（以前称为 Jade）进行 HTML 模板编写、Sass 进行 CSS 预处理、以及 JavaScript 编程语言进行页面交互的配置。此外，项目还使用了 Gulp 作为自动化构建工具。

主要编程语言和工具：

• HTML：使用 Pug 模板引擎
• CSS：使用 Sass 预处理器
• JavaScript：ES6 及以上版本
• Gulp：自动化构建和任务运行

2. 新手常见问题及解决步骤

问题一：如何安装和运行项目

**问题描述：**新手用户不清楚如何从零开始安装和运行这个项目。

解决步骤：

1. 确保已安装 Git 和 Node.js（LTS 版本）。
2. 打开命令行终端，切换到项目将要存放的目录。
3. 克隆项目仓库：git clone https://github.com/nicothin/NTH-start-project.git my-new-project（my-new-project 是你的项目目录名）。
4. 进入项目目录：cd my-new-project。
5. 删除 .git 文件夹来清理不必要的版本控制信息：rm -rf .git。
6. 安装项目依赖：npm i。注意这个过程可能比较慢，特别是在 Windows 系统上。
7. 运行项目：npm start。

问题二：如何创建新的页面块（Block）

**问题描述：**用户不知道如何为项目添加新的页面块。

解决步骤：

1. 在项目根目录下运行命令 node createBlock.js new-block（new-block 是你新块的名字）。
2. 如果需要，可以在 new-block 后面添加扩展名，例如 node createBlock.js new-block --html --scss 来创建包含 HTML 和 SCSS 的块。
3. 命令会自动在 src/blocks/ 目录下创建相应的文件夹和文件。
4. 在 Pug 模板中，使用 include 语句来引入新创建的块。

问题三：如何配置额外的文件和块

**问题描述：**用户想要添加额外的文件或自定义块到构建过程中，但不知道如何操作。

解决步骤：

1. 在项目根目录下找到 config.js 文件。
2. 在 config.js 文件中，可以添加额外的文件路径到 additionalFiles 数组中。
3. 如果要添加自定义块，确保这些块位于 src/blocks/ 目录下，并且文件名与块名相同。
4. 重新启动 Gulp 任务（如果正在运行的话）以应用新的配置：npm start。

以上是针对新手用户在使用 NTH-start-project 项目时可能会遇到的一些常见问题的解决方案。希望这些信息能够帮助用户更好地开始使用这个项目。

NTH-start-project Startkit for HTML / CSS / JS pages layout. 项目地址: https://gitcode.com/gh_mirrors/nt/NTH-start-project