开源项目 htmlemail 使用教程

一、项目目录结构及介绍

开源项目 htmlemail 的目录结构如下：

htmlemail/
├── img/                       # 存放项目所需的图片资源
├── scss/                      # 存放项目的 SCSS 文件
│   └── main.scss              # 主 SCSS 文件
├── css/                       # 存放编译后的 CSS 文件
│   └── main.css               # 主 CSS 文件
├── dist/                      # 存放编译后的 HTML 文件
│   └── alert-success-inlined.html  # 示例 HTML 文件
└── README.md                  # 项目说明文件

• img/：存放项目所需的图片资源，如 logo、社交媒体图标等。
• scss/：存放项目的 SCSS 文件，主要用于定义样式。
• css/：存放编译后的 CSS 文件，由 SCSS 文件编译而来。
• dist/：存放编译后的 HTML 文件，可以直接使用或进一步修改。
• README.md：项目说明文件，包含项目的基本信息和使用方法。

二、项目的启动文件介绍

项目的启动文件主要是 dist/ 目录下的 HTML 文件，例如 alert-success-inlined.html。这是一个示例 HTML 文件，包含了已经内联了 CSS 样式的邮件模板。

要启动项目，你可以：

1. 将 dist/ 目录下的 HTML 文件复制到你的本地服务器或直接在浏览器中打开。
2. 使用邮件发送工具，如 Postdrop，将 HTML 文件作为邮件发送，以便在邮件客户端中预览。

三、项目的配置文件介绍

项目的主要配置文件是 SCSS 文件夹中的 main.scss。在这个文件中，你可以定义全局样式变量、样式规则等。

如何配置和使用 SCSS 文件：

1. 安装 Sass：

   npm install -g sass
   

   或者

   brew install sass/sass/sass
   

2. 在 scss/ 目录下运行以下命令，将 SCSS 文件编译为 CSS：

   sass --watch scss/main.scss:css/main.css
   

3. 修改 main.scss 文件，添加或修改样式规则。

4. 编译后的 CSS 文件将自动生成到 css/ 目录下，你可以将这个 CSS 文件链接到 HTML 文件中，或者在发送邮件前使用 CSS 内联工具将样式内联到 HTML 中。

通过以上步骤，你可以轻松地修改和定制邮件模板，以满足你的需求。