关于CHM文件

CHM全称为Microsoft Compiled HTML Help，即微软HTML帮助集，是早期微软提供的一种用户手册，其本质是基于HTML4.01和CSS2的一个编译后的电子书文件，具有较好的可读性。但目前已经在很久以前就被微软停止更新，因此版本并没有更新到更现代化的HTML5和CSS3上，而且不支持UTF-8等现代化解码方式。

本来的用途是提供给用户的一个编辑文档，但由于本身编译起来较为麻烦，可视化程度不高而且需要一定的代码基础，所以渐渐遭到了放弃。虽然民间后续提供了很多新的更新，但这种格式已经逐渐淡出了大众视野，只有一些在玩TRPG的老人和极少数工作者会采用这样的格式了。

本文主要是介绍如何制作一本CHM文件，旨在帮助Ventangle爱好者以及其他TRPG爱好者制作CHM，从根本上了解CHM的编写方式，提供更好、更高的自由度。

建议结合我在Bilibili发布的视频观看。本文是对于视频的总结与补充，如果有不直观的地方，请查看视频当中对应的部分。

准备工作

如果你对WEB开发语言一窍不通，那不妨使用EasyCHM和WinCHM Pro等民间开发工具来辅助开发。本文使用的是VS Code+微软官方的HTML Helper Workshop开发工具来进行开发，更贴近原生态的开发环境，可以最大程度上避免遇到兼容性问题。此外，笔者也不对各位使用其他第三方开发工具开发CHM过程中遇到的任何困难全权负责，请自行参考你选用的工具的开发指南和纠错提示。

基础环境

任何环境其实都可以进行CHM的编译，笔者使用的是Windows平台，同时也不需要配置任何复杂的内容。

唯一需要配置的，是需要下载Git或GitDesktop来进行推送或拉取，VS Code中有配套的可视化界面，因此使用VS Code进行整个工作流程也是可以的。不熟悉控制台语言的朋友可以使用GitDesktop或VS Code这样的可视化GUI来完成更新的工作，或是提交给我来由我完成推送。

VS Code的配置

首先使用搜索引擎直接搜索VS Code即可找到官网并进行下载，安装方式非常简单。

接下来需要安装一些必要的便利插件。包括：

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，官方提供的中文语言包。
• Live Server，一个WEB开发可视化的插件。
• Auto Close Tag，自动闭合HTML标签。
• Auto Rename Tag，自动更改HTML标签的前后文。

这些插件均为默认配置即可，不需要进行任何更改。

关于HTML Helper Workshop

这是微软官方CHM编辑器，汉化版的链接在此。请注意，由于这个软件较为古老，所以可能在现代系统(Windows11和Windows10等)上的渲染与兼容性存在问题，可能会导致崩溃，以及我没有测试在Linux或其他操作系统上的兼容性。

汉化文件可能会遭到各种杀毒软件的报毒，这是正常现象，因为汉化为注入式汉化，会被判定为恶意代码。请自行添加信任或放行，避免被杀毒软件错误查杀。

关于GitHub

想要提交GitHub，有三种方式可供选择：分别是脚本语言Git，GitHub官方提供的GUI客户端GitHubDesktop，以及VS Code自己集成的GitHu功能。

对于并不了解GitHub和控制台语言的人，我推荐使用GitHubDesktop来进行提交，或者使用VS Code集成的功能。它们具有更好的可视化界面和可读性，可以避免对控制台语言的不熟悉而导致的错误。

具体该如何安装Git或GitHubDesktop，网络上有很多教程，请自行搜索解决，本文将会在后文提供如何使用VS Code进行提交的教程。

当然，也需要你注册一个GitHub账号来提交更改。

基本概述

CHM是基于HTML4.01和CSS2的HTM文件集，这是一个较为古老的规范，与现代流行的HTML5和CSS3存在一些差异，有一些更简单、性能更好的语法无法使用。因此在开发时，请尽量避免使用太过复杂的CSS样式以及Json脚本文件，CHM阅读器可能很难正常读取。

此外，由于在CHM的年代，现代化的UTF编码尚未流行，所以对于汉语用户而言，它仅支持GBK格式的编码。作为页面的.htm文件可以在头部声明UTF-8编码来进行转译，并且在UTF-8 with BOM的环境下正常打开，但.hhc和.hhp这样的项目文件是完全不支持除GBK外的编码的。因此，在开发过程中，请完全避免使用VS Code对这些文件进行直接编译，因为可能会导致严重的、不可逆转的错误出现。

我之所以没有使用EasyCHM或WinCHM Pro等第三方工具开发， 是因为它们生成的文件并非.hhp，而是.wcp等自己的格式。虽然参数项目与.hhp完全相同，但存在潜在的兼容性问题，正如前文所述，若使用第三方软件开发时遇到问题，笔者不承担任何责任。

同样，仍然存在一个问题是，HTML4的声明文件存在两种情况：即"-//IETF//DTD HTML//EN"与"-//W3C//DTD HTML 4.01//EN"(或类似)这两者。

前者是HTML4的早期测试版本，后者是由设计师网站提供的正式版HTML4.01。二者之间的区别是后者的语法更加严格和规范，在浏览器上的适配性更好；但由于我们制作的是CHM文件，因此使用前者这一由官方推荐使用的版本兼容性会更好。

对于实在没有WEB开发基础、甚至不懂代码语言的用户而言，我推荐你直接从我的GitHub项目上clone一份代码，然后按照接下来提供的指示来进行内容更改。若遇到无法解决的问题，请随时通过邮箱或QQ来联系我，或是在Issues当中提出问题。

基本教程

从Github上拉取项目文件并在VS Code中打开

在任意一处目录下建立空白文件夹，并在地址栏内输出cmd以进入控制台页面。然后输入git clone https://github.com/KuzuBukuroZard/VentangleCHM来将项目下载到本地。

接下来，在VS Code当中，选择文件 -> 打开文件夹，并选择你刚才clone的本地文件夹，就可以在左侧看到整个项目文件了，接下来就可以正常进行编写了。

基础的HTML与CSS语法

首先是样式表文件。我已经为各位准备好了一个基础的样式表，你需要做的是在头部处进行声明，即<link rel="stylesheet" type="text/css" href="styles.css">，这样才能让样式正确的被应用。

接下来是基础语法。在HTML当中，不同的样式应用需要用标签来包裹，基础语法为<标签>(内容)</标签>。虽然在前文已经安装了Auto Close Tag来避免出现错误，但我仍然推荐你养成好习惯，先将标签闭合，再输入内容文字。这样可以最大化的避免标签未闭合而导致的页面效果混乱。

对应到Word或Markdown文档里的标题，你所要的标签是<h1>~<h6>，这是一到六号标题的样式标签。

<p>是正文段落，即整个内容的正文。你所有的正文都需要用这个标签来进行包裹，会自动应用字符样式、段间距等格式，并且进行自动换行。<br>同样可以进行换行，但我不推荐你使用这个标签，因为它不包含样式，一般只用作空行来使用。

更复杂的组件

更复杂的组件包括无序列表<ul>与<li>和表格<table>。

列表 - <ul>

基础使用方式如下：

　　<ul>
　　　　<li>列表一</li>
　　　　<li>列表二
　　　　　　<ul>
　　　　　　　　<li>二级列表1</li>
　　　　　　　　<li>二级列表2</li>
　　　　　　</ul>
　　　　</li>
　　</ul>


它看起来是这样的：

• 列表一
• 列表二
  • 二级列表1
  • 二级列表2

<ul>为提示HTML导入无序列表的样式，而<li>就是列表的具体名头。<ul>之间可以连续嵌套，形成多级样式。

如果你需要使用有序列表，那请将<ul>改成<ol>即可。

表格 - <table>

基础使用方式如下：

　　　　<table>
　　　　　<tr>
　　　　　　<th>表格名头1</th>
　　　　　　<th>表格名头2</th>
　　　　　　<th>表格名头3</th>
　　　　　</tr>
　　　　　<tr class="odd">
　　　　　　<td rowspan="2">单元格合并奇</td>
　　　　　　<td>奇数内容1</td>
　　　　　　<td>奇数内容2</td>
　　　　　</tr>
　　　　　<tr class="even">
　　　　　　<td>偶数内容1</td>
　　　　　　<td>偶数内容2</td>
　　　　　　</tr>
　　　　　<tr class="odd">
　　　　　　　<td rowspan="2">单元格合并偶</td>
　　　　　　　<td>奇数内容3</td>
　　　　　　　<td>奇数内容4</td>
　　　　　</tr>
　　　　　<tr class="even">
　　　　　　　<td>偶数内容3</td>
　　　　　　　<td>偶数内容4</td>
　　　　　　　</tr>
　　　　　<table>


它看起来是这样的：

但请注意，HTML4当中没有nth-child这一参数，因此我在实现类似于这个样式的表格时，我设计了不同的class类"even"与"odd"，以手动区分奇数行与偶数行。这是无奈之举，虽然你可以在HTML5中也这样做，但效率会更低。

我独立开发的组件

在规则书当中，我也做了一个简单的怪物卡组件，以配合原版的风格。

它看起来是这样的：

我们来逐步拆解这个控件的内容。基础语法是使用<div class="类名">进行包裹各种控件的。

首先是容器mobcard-container。这是方便根据页面的宽度来并排显示多个怪物卡片的。

接下来是怪物卡的整体样式mobcard。这是规定了怪物卡的大小、边框、底色等具体的内容，表达了容器的形状。

然后是具体的样式mobcard-title、mobcard-style、mobcard-species(-mob)。Title的作用就是怪物的名称，style是右上角的黑色三角形。由于HTML4代码存在限制，这一样式的实现相当奇怪，并且在不同的浏览器上有不同的效果，但经过测试，在CHM阅读器当中是不存在问题的。最后的species是怪物的种族，我们注意到规则书当中，是否为集群时右上角的字体大小不同，因此我使用了-mob的分支来进行区分。

接下来是mobcard-content。这是怪物的具体数值信息，包括了mobcard-stat，即怪物的等级与矜持，以及mobcard-weapon，怪物的能力和武器。由于能力和武器的格式相同，因此我没有单独区分两者的格式，所以请各位自行添加。

最后是mobcard-description。这是怪物的描述部分，具体较为简单，不做过多叙述。

代码看起来稍微有些臃肿，但这是在HTML4情况下，且不依赖响应式设计下的最大兼容方案，请严格按照我在Github项目中提供的模板进行编写。

结语

目前想到的内容只有这些。如果有后续想法，我会再次更新这篇文章。遇到问题时请及时联系我，或者咨询AI，或者直接参考设计师网站上的介绍。