本系列文章旨在让零基础用户了解如何参与SAO Utils 2的扩展制作 前言 SAO Utils 2（下文简称“SU2”）与之前的SAO Utils一样，可以通过加载扩展来增加新的启动器风格、挂件功能、图标集等内容。SU2支持QML（一种脚本语言），为扩展制作降低了门槛，提供了更便利的条件。本系列文章旨在让零基础用户了解如何参与SU2的扩展制作。 扩展的文件结构 已安装的扩展都存放在SU2的本地文件中。可以在Steam中通过相应方式浏览SU2的本地文件。

扩展皆存放于【Packages】文件夹中

除了“.swap”之外，其他都是存放各个扩展的文件夹，可以直接查看对应扩展包含的文件。此处扩展的文件夹命名限制：不允许除了英文字母、数字、“.”、“-”之外的其他字符。

此外还可以通过下图方式在SU2的首选项（可右键任务栏处SU2的托盘图标打开，或在启动器中寻找该选项）中查看特定拓展的文件

接下来以“HP 计量表挂件扩展”为例进行说明，以下是HP计量表挂件扩展（com.gpbeta.widget.hp-bar）包含的文件

“package.json”是扩展的描述文件，是所有拓展的起点，要了解扩展的运作方式，需从这个文件开始。 “Images”储存扩展所需的图片资源。 “Locales”储存扩展的多语言文件，当扩展需要对不同地区用户显示不同语言时使用该类文件（不包括package.json中多语言版本的说明，即首选项中扩展详情的说明内容）。 “Presets”储存的是挂件库（可右键SU2的托盘图标开启）中的预置挂件的配置文件。

“qml”储存的是QML文件（后缀是.qml），QML是一种脚本语言。扩展中的QML文件说明了扩展的实现逻辑，在了解掌握QML的情况下，你可以轻松地学会制作SU2的扩展。 用于查看各类文件的提前准备 在制作扩展的时候需要查看JSON、QML、XML等代码文件，这些代码文件编写的语言格式各有差别，推荐使用Visual Studio Code（下文简称VS Code）等源代码编辑器来方便查看，使用VS Code的话可以通过搜索“中文简体”找到由Microsoft发布的中文简体语言包扩展，具体使用方式请查看扩展的详情界面。

之后也需要通过相同方式搜索“json”“qml”“xml”，安装对应的扩展来提升后续的效率与体验。一般而言，安装搜索结果中下载数最多的扩展即可。

利用这些扩展可以更容易地看懂代码的结构，源代码编辑器还有字段补全等功能方便代码的编写与修改。下图就是使用记事本与VS Code查看同一文件的对比。

自行学习的方法 前文已经提到过 package.json 是一切扩展的起点，扩展的代码也都是可以直接查看的，可以从这个起步逐渐了解一个扩展是如何运作的。学会理解、模仿、加入自己的东西，你也可以自行制作 SU2 的扩展。 扩展的大部分内容由 QML 文件阐述，学会使用 QML 是学会制作扩展的重要部分。QML 作为发展多年的脚本语言，已经有完善的官方文档供开发者参考。虽然文档是英文版本的，但是可以利用翻译工具辅助理解。目前会用到 QML 的领域也不止是 SU2，灵活使用搜索引擎可以收获来自更多开发者的经验，虽然用途不同，但是方法是相通的。在制作扩展的过程中，需要多次在SU2中查看扩展是否正常运作及效果。操作方法如下：在首选项中开启开发者模式与日志窗口，这样当扩展运作异常时，就能查看是否有报错信息，并利用这些信息来完善扩展。需要注意的是，在显示日志窗口的情况下，若SU2无响应，需在日志窗口中按下回车键（这是为了让开发者不错过部分报错信息的设定，因此日常使用中不建议显示日志窗口）。

发布扩展的流程 在完成扩展制作后，可以右键任务栏处SU2的托盘图标，点击【创意工坊】

在“我的工坊”中点击右下角的加号即可创建新的工坊物品

之后点击该物品，点击【导入扩展包】，之后按照提示点击并输入信息，完成后点击发布。 如果你之前从未在创意工坊发布过公开物品，需要同意《Steam 订户协议》才能将你的创意工坊物品设为公开状态让他人订阅使用。 通过社区-创意工坊等方式进入Steam的创意工坊页面。

一般而言界面会有明显的提示方便你同意【Steam订户协议】，根据提示在阅读协议全文并同意协议内容的基础上点击同意后，就可以将你的扩展设为公开状态，为SU2的社区添砖加瓦 图标集及扩展从制作到发布的详细说明 首先在SAO Utils 2（后文称SU）的本地文件的Packages（扩展）文件夹中新建一个文件夹 文件夹的命名需要符合以下格式：

只能用小写英文字母及数字、“.”（英文句号）、“-”（短横杠） 在本节作为例子将新文件夹命名为：com.liyropen.icon.ff14-job （实际操作时请根据自身情况及需求进行命名）

之后进入该文件夹，新建一个【icon】文件夹，将所需的图标图片放入这个文件夹中。

图片一般为PNG文件，软件中图标的显示面积偏小，建议使用构图偏简单的图片，图片的像素大小也不要过大。 右侧SU中图标的选取界面跟左侧的文件夹管理器类似，图标选取界面会直接显示文件名称和文件夹，可以在文件管理器中通过文件夹实现图标集的内部分类。

接下来打开Visual Studio Code等前文提到的同类软件，新建文本文件并选择JSON语言。保存该文件，命名为“package.json”，保存在“com.liyropen.icon.ff14-job”（即扩展的根目录）。“package.json”是扩展的描述文件，包含扩展的基础信息。 此处对未使用过Visual Studio Code此类软件的读者说明：软件会根据使用的文本语言提供便利的格式功能，以下为其中一例： 首先键入“{}”，将鼠标移至中括号中间。

按回车，软件会自动进行格式调整

将鼠标移至左侧的行数栏，可看到下图红框标出的小箭头，点击该箭头即可检查代码结构的包含关系。

在第 2 行即中括号中键入 "name":""此时软件中应显示为 { "name":"" } 第 2 行定义了一个值，冒号前的是值的名字，冒号后的是值的内容。【name】是扩展的标识，在下图 SU 的扩展的详情界面中可以看到

标识是SU识别扩展的途径，应当与扩展所处的文件夹名称一致，所以在冒号后的引号中键入扩展所处文件夹的名字 { "name":"com.liyropen.icon.ff14-job" } 在这一行最后键入英文逗号，按回车另起一行键入 "version": "1.0.0" 软件中应显示为 { "name":"com.liyropen.icon.ff14-job", "version": "1.0.0" } 中括号是一个集合，中括号中是一个个值的集合，而逗号就是用来分隔单个集合中值与值之间的符号。你也可以看到整个文件都被一组中括号包含着，这个文件本身就是一个集合。 【version】是扩展的版本。 继续按照前文的方法键入新的值。 【title】: {} 【title】是扩展的标题。 值的内容中也是能使用集合的，在此处使用集合是因为SU支持多语言。在【version】集合中键入简体中文的相关值。 【title】: { 【zh】: "FF14 职业图标集" } 【zh】的值是用户设置SU的语言为简体中文时显示的扩展标题内容。

如果需要支持其他语言可以继续键入相关内容。关于语言对应值的名字，可以在网络上搜索【语言代码】进行了解 "title": { "en": "FF14 Class Icons", "zh": "FF14 职业图标", "zh_TW": "FF14 職業圖標", "ja": "FF14 クラスアイコン" } 在 "title" 之后（实际上顺序没有所谓） 键入【description】（描述）的集合 "description": { "en": "FF14 (Final Fantasy XIV) Class Icons", "zh": "FF14（最终幻想14）的职业图标", "zh_TW": "FF14（最終幻想14）的職業圖標", "ja": "FF14（ファイナルファンタジー XIV）クラスアイコン" }

键入"homepage"（网站）、"bugs"（Bug反馈）、"author"（作者）的值及其相关内容（不存在或者不想写的话可以不写，本教程的代码纯作为例子使用） "homepage": 【已屏蔽外部链接】, "bugs": { "email": "liyropen@ayanami.ink", "url": "" }, "author": { "name": "liyropen", "email": "liyropen@ayanami.ink", "url": "" }

键入"resources"（资源）的值 "resources": [ { "location": "/icons", "catalog": "icon/color", "title": { "en": "FF14 Class Icons", "zh": "FF14 职业图标", "zh_TW": "FF14 職業圖標", "ja": "FF14 クラスアイコン" }, "entry": "./icon" } ] "resources"包含的值是扩展内资源的说明。“【】”（方括号）是比“{}”（中括号）更大一级的集合符号，因为一个扩展中可能包含多个资源，而此处单个资源的说明就需要一个包含多个值的集合，所以需要一个更大的集合。 “location”是资源的应用位置，图标类的值为“/icons”。 “catalog”是资源的类型，图标类的值为“icon”。图标类有子分类，适用于浅色主题的是“light”，适用于深色主题的是“light”，除此之外的是“color”。如果图标不倾向于浅色或深色主题的话，“catalog”的值就是“icon/color”。

"title" 是图标集的名称，与前文的 "title" 同样支持多语言

"entry"的值是扩展提供给SU的实际内容的文件路径。在本节中的图标集类型的扩展会通过这个值，将图标的图片文件所在路径提供给SU。当"entry"等值的内容为文件路径时，以上面的示例代码为例，"./icon"中的"."（英文句号）代表扩展的根目录，在本节的范例中就是"com.liyropen.icon.ff14-job"文件夹，那么"./icon"指向的就是"com.liyropen.icon.ff14-job/icon"。在"package.json"文件中配置好这些值后，图标集的制作就完成了。打开SU进行测试扩展是否正常工作，如果已经打开了SU，需要关闭SU后再重新启动SU。 右键任务栏中SU的托盘图标，点击【首选项】，选择【扩展】，找到先前制作的扩展。如果开关为灰色，点击它将该扩展启用。之后可以通过定制启动器项目、编辑HUD挂件项目等途径打开图标选取界面，检查扩展是否正常运作。 一切正常的情况下，就可以将该扩展上传到Steam创意工坊。 右键任务栏中SU的托盘图标，点击【创意工坊】。

点击“我的工坊”，点击右下角的加号按钮

点击【导入扩展包】 点击封面图片选择展示在创意工坊的封面图，请遵循“封面图片”文字下行的要求 依次点击【标题】【描述】填入相关内容 点击【资源目录】，选择扩展的根目录，也就是package.json文件所在的文件夹 下图左侧是SU选择【资源目录】的界面，右侧是文件管理器显示的相同路径下的文件情况，注意红框的package.json文件，要在左侧的界面中选择package.json文件所在的文件夹

之后点击“发布”，等待片刻即可。 如果是初次上传工坊物品，会提示需要同意【Steam 订户协议】，点击相关链接后，在理解并接受【Steam 订户协议】内容的情况下根据网页引导同意之后，才能将该物品设为公开状态让他人订阅使用。 点击“在 STEAM 上查看”，可以在外部浏览器打开这个扩展在创意工坊的链接。 在外部浏览器未登录 Steam 账户的情况下，显示该工坊物品处于非公开状态是正常的，登录后即可查看该物品的详情。 在上传新的工坊物品时，可能会受到来自 Steam 的自动内容审查，等待数分钟即可。

你也可以在Steam客户端内通过下图方法找到你在创意工坊提交的物品

除了创意工坊之外，还可以通过直接分享扩展文件，让他人从更多渠道使用你制作的扩展。 比如说，使用解压缩软件将整个扩展的文件夹压缩成压缩文件，之后利用其他方法传播该压缩文件供他人使用。 其他用户获得压缩文件后，只需像你一样将其解压并放置于SU安装目录的【Packages】文件夹，重新启动SU，就能在首选项的扩展页看到你制作的扩展了。 下图为一般情况下扩展压缩文件的内部文件展示。