本系列文章旨在让零基础用户了解如何参与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，就能在首选项的扩展页看到你制作的扩展了。
下图为一般情况下扩展压缩文件的内部文件展示。
未验证
创意工坊
