文档Commerce管理系统指南

开发人员工具

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 管理员
  • 开发人员

使用高级开发人员工具确定前端开发期间的编译模式、创建IP地址的允许列表并显示模板路径提示。 还有一些工具，可轻松地在店面和管理员界面中对文本进行特别更改。

操作模式

您的Adobe Commerce或Magento Open Source实例可以部署为在​ 生产 ​或​ 开发人员模式 ​下运行。 仅当存储以​ 开发人员模式 ​运行时才能访问专门为开发人员设计的工具和配置设置。

只有具有适当权限的用户才能从服务器的命令行更改操作模式。 有关详细信息，请参阅​ 配置指南 ​中的设置操作模式。

商家文档中的大多数主题都适用于在生产模式下运行的Commerce实例。 但是，以下配置设置和工具只能在开发人员模式下运行安装时使用。

前端开发工作流

前端开发工作流类型确定在开发期间在客户端还是服务器端进行较少的编译。 较少的是CSS的扩展，它有附加功能和约定，并能生成简化的代码。 建议在主题开发中使用客户端较少的编译。 服务器端编译是默认模式。 开发工作流选项不适用于处于生产模式的存储。
请参阅Commerce开发人员文档中的客户端LESS编译与服务器端{：target="_blank"}。

NOTE
前端开发工作流配置仅在开发人员模式下可用。

高级配置 — 前端开发工作流

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  2. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  3. 展开​ Front-end Development Workflow ​部分的 扩展选择器 。

  4. 将​ Workflow Type ​设置为以下项之一：

    • Client side less compilation — 使用本机less.js库在浏览器中进行编译。
    • Server side less compilation — 使用Less PHP库在服务器上进行编译。 这是默认的生产模式。

  5. 完成后，单击​ Save Config。

静态文件签名

通过向静态文件的URL添加数字签名，浏览器可以检测文件的较新版本何时可用。 可使用数字签名跟踪的静态文件包括JavaScript、CSS、图像和字体。 签名将直接附加到基本URL后面的路径中。 如果文件的签名与浏览器缓存中存储的签名不同，则使用较新版本的文件。

请参阅Commerce开发人员文档中的静态内容签名{：target="_blank"}。

NOTE
静态文件设置配置仅在开发人员模式下工作时可用。

高级配置 — 静态文件设置

有关配置设置的详细列表，请参阅​ 配置引用 ​中的​ 静态文件设置。

要启用已签名的静态文件：

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  2. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  3. 展开​ Static Files Settings ​部分的 扩展选择器 。

  4. 将​ Sign Static Files ​设置为Yes。

  5. 完成后，单击​ Save Config。

资源文件优化

通过合并和捆绑文件以及最大限度地减少代码，可以减少加载资源文件所需的时间。

  • 合并会将相同类型的单独文件合并为单个文件。
  • 捆绑是一种对单独的文件进行分组的技术，用于减少加载页面所需的HTTP请求数。
  • 缩小会删除空格、换行符和注释，但不会影响代码的功能。 由于无法编辑最小化的文件，因此应仅在准备好进入生产阶段时应用该流程。

默认情况下，Adobe Commerce和Magento Open Source不会合并、捆绑或最小化文件，项目开发人员应确定应使用的文件优化方法。

有关详细信息，请参阅性能最佳实践。

NOTE
只能在开发人员模式中优化CSS和JavaScript文件。
文件类型
支持的操作
CSS文件
MergeMinify
JavaScript文件
MergeBundleMinify
模板文件
Minify

要优化资源文件：

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  2. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  3. 要优化CSS文件，请展开 扩展选择器 CSS Settings ​部分并执行以下操作：

    • 将​ Merge CSS Files ​设置为Yes。
    • 将​ Minify CSS Files ​设置为Yes。

    高级配置 — CSS设置 {width="600" modal="regular"}

CSS设置

  1. 要优化JavaScript文件，请展开 扩展选择器 JavaScript Settings ​部分并执行以下操作：

    • 将​ Merge JavaScript Files ​设置为Yes。
    • 将​ Minify JavaScript Files ​设置为Yes。

    高级配置 — JavaScript设置 {width="600" modal="regular"}

  2. 要缩小PHTML模板文件，请展开 扩展选择器 Template Settings ​部分并将​ Minify Html ​设置为Yes。

    高级配置 — 模板设置 {width="600" modal="regular"}

  3. 完成后，单击​ Save Config。

客户端限制

列入允许列表在使用诸如模板路径提示之类的工具之前，请确保将您的IP地址添加到开发人员客户端限制，以避免中断商店中客户的购物体验。 如果您不知道自己的IP地址，则可以在线搜索它。

NOTE
开发人员客户端限制只能在开发人员模式中设置。

有关技术信息，请参阅​ Commerce on Cloud Infrastructure指南 ​中的用于允许请求的自定义VCL。

要将IP地址添加到允许列表：

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  2. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  3. 展开​ Developer Client Restrictions ​部分的 扩展选择器 。

    高级配置 — 开发人员客户端限制 {width="600" modal="regular"}

  4. 对于​ Allow IPs，输入您的IP地址。

    如果需要从多个IP地址访问，请使用逗号分隔每个IP地址。

  5. 完成后，单击​ Save Config。

  6. 出现提示时，请刷新任何无效的缓存。

模板路径提示

模板路径提示是一种诊断工具，用于为页面上使用的每个模板添加带有路径的符号。 可以为店面或管理员启用模板路径提示。

NOTE
只能在开发人员模式中编辑模板路径提示。

请参阅Commerce开发人员文档中的查找模板、布局和样式{：target="_blank"}。

店面示例 — 模板路径提示

步骤1：将您的IP地址添加到允许列表

在使用模板路径提示之前，请将您的IP地址添加到允许列表以避免干扰在商店中购物的客户。 完成后，请确保清除Commerce缓存，以从存储中删除所有提示。

高级配置 — 开发人员客户端限制

步骤2：启用模板路径提示

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  2. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  3. 展开​ Debug ​部分中的 扩展选择器 并执行以下操作：

    高级配置 — 调试 {width="600" modal="regular"}

    • 要为存储激活模板路径提示，请将​ Enabled Template Path Hints for Storefront ​设置为Yes。

    • 要仅在URL包含templatehints参数时为商店启用模板路径提示，请将​ 使用URL参数 ​为商店启用提示Yes。 然后根据需要设置参数的值。 默认值为magento，但您可以使用自定义值。 例如，如果将值更改为lorem，则使用mymagento.com?templatehints=lorem显示模板提示。

    • 要为管理员激活模板路径提示，请将​ Enabled Template Path Hints for Admin ​设置为Yes。

    • 要包含块的名称，请将​ Add Block Class Type to Hints ​设置为Yes。

  4. 完成后，单击​ Save Config。

步骤3：清除缓存

  1. 在​ 管理员 ​侧边栏上，转到​ System > Tools>Cache Management。

  2. 单击右上角的​ Flush Magento Cache。

内嵌翻译

您可以在开发人员模式中使用翻译内联工具，修饰界面中的文本以反映您的声音和品牌。 激活“翻译内联”模式后，页面上可编辑的任何文本都以红色列出。 可以轻松编辑显示在店面和管理员中的字段标签、消息和其他文本。 例如，许多主题都使用术语，如​ 我的帐户、我的愿望清单 ​和​ 我的仪表板，以帮助客户找到解决方法。 但是，您可能只想使用单词​ 帐户、愿望清单 ​和​ 仪表板。

NOTE
翻译内联工具仅在开发人员模式下工作时可用。

请参阅Commerce开发人员文档中的翻译概述。

店面示例 — 可翻译文本

如果您的商店以多种语言提供，则可以对区域设置的翻译文本进行细微调整。 在服务器上，界面文本将保存在每个输出块的独立CSV文件中，并按区域设置进行组织。 作为替代方法，您还可以直接在服务器上编辑CSV文件，而不是使用​ 翻译内联 ​工具。 翻译文件存储在app/code/Magento/<module_name>/i18n/<language_locale>.csv中。

NOTE
要使用翻译内联工具，您的浏览器必须允许弹出窗口。

步骤1：禁用输出缓存

  1. 在​ 管理员 ​侧边栏上，转到​ System > Tools>Cache Management。

  2. 选中以下复选框：

    • Blocks HTML output
    • Page Cache
    • Translations

  3. 将​ Actions ​控件设置为Disable并单击​ Submit。

步骤2：启用翻译内联工具

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  2. 若要使用特定的商店视图，请将​ Store View ​设置为要更新的。

  3. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  4. 展开​ Translate Inline ​部分的 扩展选择器 。

    根据需要清除​ Use Website ​复选框以修改这些设置。

    编辑特定商店视图时，Enabled for Admin ​选项不可用。

    高级配置 — 翻译内联 {width="600" modal="regular"}

  5. 将​ Enabled for Storefront ​设置为Yes。

  6. 完成后，单击​ Save Config。

  7. 出现提示时，请刷新无效的缓存，但暂时保留已禁用的缓存。

步骤3：更新文本

  1. 在浏览器中打开您的店面，然后转到要编辑的页面。

    如有必要，请使用语言选择器更改商店视图。 每个可翻译的文本字符串都以红色列出。 当您将鼠标悬停在任意文本框上时，会显示一个书籍图标（ 书籍图标 ）。

  2. 单击书籍图标以打开​ 翻译 ​窗口，然后执行以下操作：

    • 如果更改针对的是特定的商店视图，请选中​ Store View Specific ​复选框。

    • 输入新的​ Custom ​文本。

  3. 完成后，单击​ Submit。

    输入自定义文本 {width="700" modal="regular"}

  4. 要在应用商店中查看您所做的更改，请刷新浏览器。

  5. 对存储中要更改的任何元素重复此过程。

步骤4：恢复原始设置

  1. 返回到商店的管理员。

  2. 在​ 管理员 ​侧边栏上，转到​ Stores > Settings>Configuration。

  3. 将​ Store View ​设置为已编辑的特定视图。

  4. 在左侧面板中，展开​ Advanced ​并选择​ Developer。

  5. 展开​ Translate Inline ​部分的 扩展选择器 。

  6. 将​ Enabled for Frontend ​设置为No。

  7. 完成后，单击​ Save Config。

  8. 在​ 管理员 ​侧边栏上，转到​ System > Tools>Cache Management。

  9. 选中以下先前已禁用的输出缓存的复选框：

    • Blocks HTML output
    • Page Cache
    • Translations

  10. 将​ Actions ​控件设置为Enable并单击​ Submit。

  11. 出现提示时，请刷新任何无效的缓存。

步骤5：验证存储中的更改

转到店面并检查每个更新的页面，确保更改正确。 在此示例中，Customer Login被更改为Customer Sign In。 如果对特定视图进行了更改，请使用语言选择器切换到正确的视图。

店面示例 — 已翻译的客户登录

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1