使用小组件工作室

小组件工作室是管理平台 UI 的一个界面，它直接在 Limyee 电商平台中提供小组件的完整管理和创作。要使用它，可通过导航到"管理>界面>小组件工作室"。

我什么时候可以使用小组件工作室？

小组件工作室用于小组件管理和小组件创作。示例用途包括：

小组件管理

• 浏览小组件
• 导入小组件
• 导出小组件
• 查看和发布小组件更改
• 导入和导出小组件语言资源

小组件创作

• 编辑现有小组件
• 创建新小组件
• 比较和实时预览小组件更改
• 还原已更改的小组件
• 查看小组件 API 文档

界面

在深入了解管理和创作细节之前，了解小组件工作室界面的主要组件会很有帮助。

浏览视图

左侧的浏览视图支持查看已安装的小组件集。

树结构

树中列出了小组件及其组成部分，如内容脚本、资源和附件。小组件节点标识小组件的版本和暂存状态，包括小组件是自定义、更改已暂存和主题。如果小组件已暂存更改，则会显示一个黄色铅笔指示器。

筛选

小组件可以通过以下方式过滤

• 小组件类型：
  • 全部：所有小组件，不包括脚本插件提供的小组件。
  • 用户已安装：通过小组件工作室创建或导入的小组件。
  • 默认: 平台或第三方插件提供的出厂默认小组件。
  • 默认已编辑：出厂默认小组件，这些小组件已在小组件工作室中通过覆盖进行自定义。
  • 提供程序名称：由特定出厂默认提供程序提供的小组件，包括脚本插件。
• 主题：
  • 任何：任何主题版本。
  • 主题名称：所选主题名称的小组件。
• 文本搜索：
  • 与小组件的名称、描述或附件名称匹配的小组件。

浏览操作

浏览操作在筛选上方

• 新建：创建新小组件。
• 导入：上传小组件或小组件资源。
• 多选：切换小组件的多选模式，可以多个导出。
• 设置：小组件工作室设置。
• 导出所有小组件：导出所有可供查看的小组件。
• 导出所有资源：导出所有资源，甚至从任何无法查看或编辑的小组件中导出资源。

小组件操作

小组件操作在树中的每个小组件节点都可用。这些相同的操作在小组件的编辑视图中也可用。具体的小组件操作是基于当前小组件的状态，并自动更新以响应小组件的状态更改。有关这些操作的详细信息，请参阅下面的“管理和创作”部分

• 预览：在用户界面中实时预览小组件。
• 发布暂存更改：发布暂存更改（如果存在）。
• 还原暂存更改：还原暂存更改（如果存在）。
• 添加附件：将新的可编辑附件添加到小组件。
• 上传附件：将任何类型的新附件上传到小组件。
• 保存为副本：创建新的小组件作为副本。
• 保存到主题：创建小组件的主题版本。
• 导出小组件：导出小组件
• 导出资源：导出小组件的语言资源。
• 删除/还原到出厂默认：删除自定义小组件或将自定义默认恢复为出厂默认

多选

多选允许为小组件或资源导出选择多个小组件。多重选择不像导出所有小组件或导出所有资源选项那样全部包含，因为某些小组件可能无法查看或编辑，尽管其资源仍可编辑。

暂存视图

当一个或多个小组件被暂存时，将显示暂存视图。

编辑小组件时（包括在内容脚本使用任何更改或仅导入翻译资源），更改将暂存。暂存更改仅对执行更改的用户可见。

可发布暂存小组件或将其恢复到非暂存状态。当小组件发生更改，还可以在站点中实时查看更新后的暂存更改，仅适用于进行更改的用户。

暂存视图列出了所有当前暂存的小组件，以及用于预览、发布、还原单个小组件或一次还原所有小组件的操作。

选项卡视图

小组件工作室支持同时查看和编辑多个小组件。每个组件都在其自己的选项卡上打开，选项卡视图将导航该小组件。

每个选项卡都列出了小组件的名称、小组件的组件及其黄色暂存状态（如果已暂存），以及用于关闭选项卡或关闭其他选项卡，以获得更好的上下文操作。

选项卡可以通过拖放重新排序，选项卡溢出后转到下拉列表中，该列表显示较少使用的选项卡。

编辑器视图

编辑器视图区域显示多种类型的编辑体验，具体取决于小组件。编辑器视图可能包括：Velocity 脚本、Javascript 脚本、语言资源或附件等。

小组件导航和操作

每个编辑器视图都标识小组件的主题（如果有）、名称、正在编辑的组件（以及指向小组件中所有其他组件的链接）以及小组件操作。小组件操作与浏览视图中提供的操作相同。

比较

如果小组件已暂存，则可以使用比较更改按钮将此小组件与当前已发布的版本进行比较。如果小组件是自定义的默认值，则会显示另一个按钮以将更改与默认值进行比较。

选择任一“比较更改”按钮都会将编辑器视图切换到比较模式，其中左侧是原始版本，右侧是编辑后的版本。对于比较视图编辑器状态，仍允许在比较视图中进行编辑。

在小组件的“概览”上使用“比较更改”工具时，所有具有更改的部分都将以黄色突出显示。

全屏编辑

大多数编辑器视图类型都支持全屏编辑。选择“全屏”进行切换。

管理小组件

浏览小组件

导入小组件

可以通过选择浏览视图中的导入按钮从导出的小组件文件安装小组件。可以选择单个小组件导出文件（其中可能包含多个小组件）。导入前将显示确认，如下所示。请注意，新的或更新的小组件已被分类，您可以不导入它们。

导入的小组件将导入到暂存、未发布的状态，就像直接在 小组件工作室中编辑小组件一样。这允许在最终选择发布或还原，使用编辑器视图中的比较工具进一步查看更改和差异。由于只是中间过渡，导入是一种安全操作，不会影响已发布的用户界面，并且可以完全还原而不是发布。

发布后，导入的小组件更新将作为自定义默认（如果有默认版本）或现有自定义小组件的新版本进行安装，从而覆盖以前的版本。

导出小组件

任何小组件，无论是出厂默认还是自定义，都可以导出。小组件导出包括小组件的脚本、配置、附件和资源。单个导出文件可以包含多个小组件。

要生成小组件导出文件，请从树状视图中小组件的操作或该小组件的任何组件编辑视图中选择导出小组件。或者，也可以将多个小组件导出到单个文件中，方法是在浏览视图中进入多选模式，选中小组件复选框，然后选择导出选定小组件。

发布或还原暂存更改

可以使用浏览视图、编辑器视图或筛选视图中的小组件操作发布或还原暂存更改.

删除或还原小组件更改

自定义小组件可以完全删除。无法删除出厂默认小组件，但出厂默认的自定义版本可以恢复为原始版本。

要删除或还原小组件（取决于其类型），请从“小组件操作”中选择“删除”或“还原”。

导入和导出语言资源

小组件导出包括这些小组件使用的所有语言资源。小组件工作室还支持仅导出和导入小组件的语言资源。

要导出小组件语言资源，请选择从小组件操作导出资源。或者，可以使用多选模式导出多个小组件的资源。

要导出平台中所有小组件的语言资源，请使用“导出所有资源”，某些小组件可能无法查看、编辑或多选。

创作小组件

编辑小组件

编辑和保存

要编辑小组件，请在树视图中导航到其组件之一。所有更改都将自动保存到暂存。开发人员可以在网站上使用和配置暂存小组件，在发布之前不会被公开。

比较更改

编辑小组件时，可以通过选择比较更改将暂存更改与非暂存更改进行比较。对于大多数小组件的组件视图，在比较视图中也可以继续进行编辑。

预览更改

可以通过在小组件操作中选择预览来预览小组件。如果小组件当前正在使用中，则将打开一个新的浏览器窗口，在该页面中使用该小组件，并预加载到预览模式。预览模式将渲染小组件的暂存版本，在继续保存小组件更改时将自动刷新该页面。

发布或还原暂存更改

可以使用浏览视图、编辑器视图或过渡视图中的 Widget 操作发布或还原暂存更改.

创建新的小组件

创建新的小组件

要创建新的小组件，请在浏览视图中选择新建。虽然平台会自动保存小组件更改，但在编辑至少一个字段之前，不会创建新小组件。和所有小组件编辑一样，新小组件将保存到暂存中。开发人员可以在网站上使用和配置暂存小组件，但在发布之前不会公开显示。

将小组件分支到特定于主题的版本

默认情况下，给定的小组件在任何主题中有相同的功能。仅当选择了该主题时，才会使用特定于该主题的小组件。特定于主题的小组件定义了自己完整的内容、配置、附件和资源，但实现中与其非主题小组件有所不同。

要创建特定于主题的版本，请在小组件操作中选择“保存到主题”。小组件工作室将在暂存主题变体之前，提示选择保存的主题。

将小组件分支到新的、单独的小组件

要将小组件的副本另存为新的、单独的、不覆盖原始的小组件，请选择“从小组件操作 > 保存为副本”。新小组件将使用源小组件的内容、配置、附件和资源的创建副本进行暂存，并且不会影响源小组件的现有用法。

删除或还原小组件

通过小组件工作室导入或创建的小组件可以删除，但不能还原。出厂默认小组件既不能被删除也不能还原。但是，出厂默认设置的自定义版本（通过小组件工作室修改的出厂默认小组件）可以恢复到其原始的出厂默认状态。正在查看的小组件类型决定了是否显示“删除”或“还原到出厂默认”按钮。

小组件的组件定义

概览

“名称”和“描述”都支持资源令牌以允许本地化名称。因此，如果小组件的标题为“Hello World”，“Hello World”可以选择定义名为“title_hello_world”的资源，那么小组件的“名称”字段可以使用 ${resource:title_hello_world}的方式显示“Hello World”。

“显示标题”定义默认情况下是否显示小组件的标题。在页面放置小组件时所选的格式可以覆盖此选择。

“缓存”定义小组件的输出是否应由站点缓存。应尽可能启用此功能，如果小组件是特定于访问用户的，或者是特定用户的，可以选择按用户更改缓存。

“按用户更改缓存”定义缓存小组件是否应为每个访问用户使用相同的输出，还是应为每个用户使用单独的缓存副本。其内容特定于访问用户的小组件会因用户而异。

为了允许主题更轻松地设置小组件的样式，小组件可以定义自己独特的 CSS 类，该类应用于其包装的 div 节点。然后，CSS 选择器可以针对类的特定子级，如果 CSS 类设置为：“custom-widget”，那么可以设置子级 .name 类节点的样式，如下所示：

.content-widget.custom-widget .name { color: red; }

如果没有定义的可用上下文，小组件可以放置在任何页面、页眉或页脚上的任何区域。对于指定的上下文，小组件只能放置在依赖于上下文的特定区域中。例如，小组件仅当上下文中存在当前博客文章时才起作用，那么需要指定“博客文章”上下文。可以定义多个可用的上下文。

主要内容脚本

小组件内容是使用 Velocity 模板化标记定义的。与所有 Velocity 指令一起，整个平台 API 可通过小组件扩展提供给小组件内容脚本，如 小组件 API 文档中所述。

配置脚本

小组件配置是使用 XML 定义的，XML 指定可供使用和配置小组件的动态配置字段。

标题脚本

标题脚本可以选择声明 Velocity 脚本，该脚本在评估后会生成显示在小组件标头的内容。如果未提供，则小组件的标题将作为其标题。

当小组件的标题可配置时，标题脚本的常见模式是使用以下配置：

<property id="Title" resourceName="Property_Title" dataType="String" defaultValue="${resource:Widget_Title}" controlType="Limyee.Controls.ContentWidgetTokenStringControl, Limyee.Controls" />

和以下标题脚本

$limyee_v1_widget.ApplyTokens($limyee_v1_widget.GetStringValue('Title', '${resource:Widget_Title}'))

这允许小组件配置公开标题的设置，同时仍支持使用资源令牌。

CSS 类

CSS 类可以使用 Velocity 脚本进行定义，动态定义应用于小组件包装器的 CSS 类。

语言资源

小组件可以定义自己的所有资源以进行本地化。资源组件允许为每个当前启用的语言包定义资源。管理小组件时，可以单独导出和导入小组件资源。

定义的资源可以通过小组件脚本引用为：

$limyee_v1_language.GetResource("resource_name")

附件

任何文件类型都可以附加到小组件，包括图像，JavaScript，样式表，Web 字体等。要附加文件，请从小组件操作中选择上传附件。

上传的已知可编辑文本格式（包括 CSS、JavaScript、HTML、XML 和 VM（ Velocity ））的附件可在小组件工作室中编辑。其他文件类型只能在其自己的组件选项卡上预览。

高级用户界面功能

键盘快捷键

小组件工作室支持以下键盘快捷键

• CTRL + Q：在上一个选项卡和其他选项卡之间快速切换。
• CTRL + Shift + ←：向左切换一个选项卡。
• CTRL + Shift + →：向右切换一个选项卡。
• CTRL + SHIFT + CMD + ←：将当前选项卡重新定位到左侧。
• CTRL + SHIFT + CMD + →：将当前选项卡重新定位到右侧。
• CTRL + W：关闭当前选项卡。
• CTRL + N：新小组件。
• CTRL + SHIFT + W：关闭其他选项卡。
• CTRL + R：在树中显示当前选项卡。
• CTRL + ，：搜索。
• CMD + P：发布暂存的小组件更改。
• CMD + SHIFT + P：还原暂存的小组件更改。
• CMD + O：预览小组件。

设置

以下设置在“设置”中可用

• 编辑器颜色主题：语法高亮显示配色方案。
• 字体大小：显示字体的大小。
• 显示行号：定义是否显示行号。
• 自动换行：定义是否当行代码超出屏幕时，自动换行，如果不换行，将显示横向滚动条。
• 在自动完成时完成完整方法签名：定义是否提示方法签名。
• 将树同步到当前选项卡：定义选项卡是否与小组件树同步。