页面设置与面包屑导航 | Mingcedar Studio

<div class="manual-doc-article manual-doc-article-section"><h2 id="page-settings-and-breadcrumb-navigation">功能: 页面设置与面包屑导航</h2>

用 Page Ratio 为当前 PPT 的全部幻灯片选择统一画布比例，用 Nav Path 逐页维护 Page Code、面包屑层级、默认文案、语言键和页面背景。两者都位于功能区 Page 组。

<div class="doc-card-list">

<article class="doc-card">

<h3 id="page-settings-and-breadcrumb-navigation-item-1">功能说明</h3>

<p>Page Ratio 统一全部幻灯片的比例；Nav Path 管理各页 Page Code 和面包屑。先定比例再排版，页面和跳转关系稳定后配置导航。</p>

</article>

<article class="doc-card doc-card-tip">

<h3 id="page-settings-and-breadcrumb-navigation-item-2">Page Ratio 操作步骤</h3>

<p>打开 Page → Page Ratio，选择 16:9、16:10、4:3、3:2 或 21:9，核对预览后点击 OK。比例应用于全部幻灯片。</p>

<ul>

<li>16:9：大多数桌面和 HMI 画面优先使用。</li>

<li>16:10：需要更多垂直空间时使用。</li>

<li>4:3：传统操作面板和旧显示器。</li>

<li>3:2：紧凑工业显示器。</li>

<li>21:9：超宽控制室或大屏。</li>

<li>改变比例时插件会扩展画布，尽量保留现有坐标内容，不通过裁剪旧内容完成换比。</li>

<li>Pages with popups 区会说明弹窗如何适应该页面比例；已有宿主侧栏设置会保持独立。</li>

</ul>

</article>

<article class="doc-card">

<h3 id="page-settings-and-breadcrumb-navigation-item-3">Nav Path 字段说明</h3>

<p>打开 Page → Nav Path，在 Presentation pages 中逐行编辑。Save 校验全表，仅保存已修改行。</p>

<ul>

<li>Slide：只读幻灯片序号，用于定位当前行。</li>

<li>Page Code：必填的稳定导出和导航标识；必须以英文字母开头，后续只用英文字母、数字、下划线或连字符。</li>

<li>Level：填写 0 或更大的整数。0 表示不在面包屑显示，1 表示入口页，2 及以上表示更深层子页。</li>

<li>Default Text：面包屑默认显示文案，也是 Language Key 为空或无翻译时的回退文案。</li>

<li>Language Key：可选，填写已有语言字典中的键，只影响显示文本。</li>

<li>Background：勾选后使用 PowerPoint 幻灯片背景；不勾选则页面背景保持透明。</li>

</ul>

<div class="manual-code" data-code-language="text"><div class="manual-code-toolbar"><span>Text</span><span class="manual-code-tools"><small>Text</small><button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Text">复制代码</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span>示例：</span></span>

<span class="line"><span>Page Code = line01_overview</span></span>

<span class="line"><span>Level = 1</span></span>

<span class="line"><span>Default Text = 产线一运行总览</span></span>

<span class="line"><span>Language Key = navigation.line01_overview</span></span>

<span class="line"><span>Background = checked</span></span></code></pre></div>

</article>

<article class="doc-card">

<h3 id="page-settings-and-breadcrumb-navigation-item-4">一套页面从比例到导航的配置顺序</h3>

<p>新建 PPT → 设定 Page Ratio → 排版并规划 Page Code → 在 Nav Path 填层级、文案、语言键和背景 → Export HTML → 在 Mingcedar 验证各级面包屑。</p>

<ul>

<li>先选统一比例。</li>

<li>再规划每页唯一 Page Code。</li>

<li>按幻灯片顺序填写 Level。</li>

<li>需要多语言时同时填 Default Text 和 Language Key。</li>

<li>整包导出后逐项验证入口页、子页、隐藏页和返回路径。</li>

</ul>

</article>

<article class="doc-card">

<h3 id="page-settings-and-breadcrumb-navigation-item-5">适用场景</h3>

<p>主页面、设备详情页和弹窗页共存时，用统一 Page Ratio 保持同包画布一致；用 Level 1 标记入口页，Level 2 或更高标记详情页，用 Level 0 隐藏纯弹窗页。需要中英文导航时，Default Text 保证回退可读，Language Key 提供翻译。</p>

</article>

<article class="doc-card doc-card-warn">

<h3 id="page-settings-and-breadcrumb-navigation-item-6">限制与常见问题</h3>

<ul>

<li>Nav Path 只管导航的层级和名字，不在这里配报警范围；面包屑节点的报警/故障状态和页面右侧报警窗口共用当前页 alarm.js 中的 HQVISU_PAGE_ALARM（运行时通过 getPageAlarm() 读取，不要重复配置）</li>

<li>Page Ratio 一次作用于当前 PPT 的全部幻灯片，不是只改当前页，也没有自定义宽高输入框。</li>

<li>Page Code 不是随意显示名，必须满足字符规则并保持稳定。</li>

<li>Level 不要当成全站层级；它是当前画面包内部的相对层级。</li>

<li>宿主靠导出顺序加层级自动还原父子关系：当前页之前最近一个更低 Level 的页会被当作父页，所以导出页顺序要稳定</li>

<li>改了导航结构（层级、显示名、新增/删除/重命名页面）属于整包变化，必须重新整包 Export HTML，不能只导当前页</li>

</ul>

</article>

</div>

<div class="docs-note-grid manual-doc-image-grid">

<figure class="docs-note-card manual-doc-image-card" id="page-settings-and-breadcrumb-navigation-image-1">

<img src="/WEB_img/HQPPT/current/page/layout.png" alt="Page Ratio 页面比例设置对话框" loading="lazy" decoding="async" />

<figcaption>

<strong>图示 1: Page Ratio 页面比例</strong>

<p>选择 16:9、16:10、4:3、3:2 或 21:9 比例，并应用到当前 PPT 的全部幻灯片。</p>

</figcaption>

</figure>

<figure class="docs-note-card manual-doc-image-card" id="page-settings-and-breadcrumb-navigation-image-2">

<img src="/WEB_img/HQPPT/current/page/breadcrumb.png" alt="Nav Path 面包屑配置" loading="lazy" decoding="async" />

<figcaption>

<strong>图示 2: Nav Path 面包屑</strong>

<p>按页设定面包屑层级（Level）和显示名称，决定进入宿主机后的导航显示。</p>

</figcaption>

</figure>

</div>

</div>