# @directus-labs/super-header-interface 中文文档
规范地址：https://npmcn.com/package/%40directus-labs/super-header-interface/
版本：1\.2\.0
npm 元数据更新时间：2026-06-05T15:48:30.527Z
中文译文更新时间：2026-11-12T12:09:07.469Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40directus-labs/super-header-interface
原文对照：https://npmcn.com/package/%40directus-labs/super-header-interface/?lang=original
项目主页：https://github.com/directus-labs/extensions#readme
源码仓库：https://github.com/directus-labs/extensions
弃用说明：Merged into Directus core as the Header interface in v11\.14
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：308 kB，3 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：7 个
- 首次发布：2025-01-10T10:21:34.535Z
- 最新版本发布：2025-05-08T21:54:20.512Z
- 近 30 天下载量：4827（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）
## 中文简介
Directus的超强头头界面,允许您创建丰富的页头头,并带有标题,字幕,帮助信息,以及交互动作. 极能增强用户了解背景资料和快速获取共同信息的经验
## 安装
```sh
npm install @directus-labs/super-header-interface
```
也可以使用：`pnpm add @directus-labs/super-header-interface`、`yarn add @directus-labs/super-header-interface`、`bun add @directus-labs/super-header-interface`
## README
# 超级信头界面
Directus的超强头头界面,允许您创建丰富的页头头,并带有标题,字幕,帮助信息,以及交互动作. 极能增强用户掌握背景资料和快速获得共同任务的经验.
**特征**
- 有动态字段值的自定义标题和字幕
- 可选图标和颜色主题
- 丰富的文本帮助内容与 HTML 支持
- 用于导航和 DirectusFlow 执行的配置动作按钮
- 支持带有下拉菜单的多个动作
- 有字段值插入的动态 URL 模板
- 对界面要素和帮助内容的全面翻译支持
## 视频概览
[](http://www.youtube.com/watch?v=nLH9TURpneE)
## 安装
要安装扩展,请跟随 [正式指南](https://docs.directus.io/extensions/installing-extensions.html) 用于从市场或手动安装扩展.
## 使用量
Super Header 界面被设计为您收藏中的演示文稿字段. 它建立了一个突出的标题部分,可以包括:
- 带有可选图标的标题
- 附加上下文的字幕
- 可切换的帮助信息
- 导航或运行流程的动作按钮
## 配置选项
### 基本设置
- **标题** - 主标题文本。 支持字段值模板(例如, `Item: {{ title }}`) (中文(简体) ). 只支持根级字段 .
- **颜色** - 为标题和图标选择颜色
- **图标** - 选择标题旁边要显示的图标
- **字幕** - 标题下第二行。 支持字段值模板。 只支持根级字段 .
- **帮助** - 支持HTML格式化的可选帮助内容
- **帮助显示模式** - 你想展示帮助内容吗? 默认为内入, 但您可以用模式显示帮助内容 .
- **启用帮助翻译** - 切换以启用帮助内容翻译
- **帮助翻译字符串** - 定义多种语言支持的帮助内容的翻译密钥
### 行动
配置标题中出现的按钮。 多个动作将在下放菜单中显示 .
每个动作可以配置为:
- **标签** - 按钮文本(支持翻译)
- **图标** - 按钮的可选图标
- **类型** - 按钮样式 :
- 小学
- 中学
- 资讯
- 成绩
- 3⁄4 ̄ ̧漯B
- 危险
- **动作类型** - 选择:
- 链接 - 导航到 URL( 支持字段值模板)
- 流量 - 执行直接流
- **網址** - 对于链接动作,请指定目的地 URL。 可以是Directus项目内部导航到Visual编辑器等网页-/visual/http://yoursite.com,也可以是完全外部的URL- [https://directus.io (英语)](https://directus.io/)。您可以包括字段值(例如, `https://example.com/items/{{ id }}`)通过使用胡子语法.
- **流动** - 对于流动动作,选择要执行的流程
## 字段类型
- **类型**数字 : `alias`
- **本地类型**数字 : `presentation`
- **组**数字 : `presentation`
## 翻译支助
超级标题接口支持全面的翻译 :
- **界面要素** - 所有UI元素(按钮,标签,对话框)都通过Directus的翻译系统支持翻译
- **动作标签** - 动作按钮标签可以使用系统输入-翻译字符串接口翻译
- **帮助内容** - 帮助文本可以通过启用"Enable Help Corps"来翻译,并使用"帮助翻译字符串"字段来定义翻译密钥.
### 密钥翻译字符串
界面中使用的不属于 Directus 核心翻译的密钥翻译字符串:
- 帮助
- 动作
- 重新装入页面
您将想要将这些字符串添加到您的翻译设置中, 以便获得充分的支持 .
### 设置帮助内容翻译
要在您的超级标题界面中提供多语种帮助内容, 请遵循这些步骤 :
1. **启用翻译支持**数字 :
- 在接口设置中, 切换到“ 允许帮助翻译 ”
- 这将揭示“ 帮助翻译字符串” 字段
- 注意: 当启用时, 常规“ 帮助” 字段将被忽略
2. **设置翻译密钥**数字 :
- 在“帮助翻译字符串”字段中,提供像 `super_header_help_content`
- 此密钥将用来获取适当的翻译内容
3. **为每种语言创建 HTML 内容**数字 :
- 导航到 **设置-翻译** 在您的 Directus 项目中
- 使用您指定的密钥创建新翻译条目( 例如 ), `super_header_help_content`(中文(简体) )
- 对于您支持的每种语言,请使用您的帮助信息创建 HTML 内容块
4. **示例翻译设置**数字 :
```
Key: super_header_help_content
English:
Getting Started
This section allows you to manage your content. Here are some tips:
- Use the action buttons to perform common tasks
- Click on items to edit their details
Spanish:
Cómo Empezar
Esta sección le permite gestionar su contenido. Aquí hay algunos consejos:
- Utilice los botones de acción para realizar tareas comunes
- Haga clic en los elementos para editar sus detalles
```
5. **测试您的翻译**数字 :
- 切换您的 Directus 界面语言以验证正确的翻译帮助内容的出现
- Super Header 界面将根据用户当前 Directus 语言设置自动显示相应的语言
在正确配置时,帮助内容会无缝地适应每个用户的语言偏好,为您的界面提供真正多语言的经验.
## 页:1
- 带有“ 花” 类型的动作需要适当的权限来执行选中的流程
- 链接动作中的 URL 支持动态值, 使用胡子风格的语法(`{{ field_name }}`) (中文(简体) ). 关系字段现已得到支持.
## 常见问题
### @directus-labs/super-header-interface 是什么？
Directus的超强头头界面,允许您创建丰富的页头头,并带有标题,字幕,帮助信息,以及交互动作\. 极能增强用户了解背景资料和快速获取共同信息的经验注意：该包已被作者标记为弃用——Merged into Directus core as the Header interface in v11\.14
### 如何安装 @directus-labs/super-header-interface？
在项目目录运行 npm install @directus-labs/super-header-interface，或使用 pnpm add / yarn add / bun add。
### @directus-labs/super-header-interface 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/directus-labs\_\_super-header-interface 是否存在。
### @directus-labs/super-header-interface 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @directus-labs/super-header-interface 可以商用吗？
@directus-labs/super-header-interface 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @directus-labs/super-header-interface 的下载量有多少？
根据 npm 官方下载统计，@directus-labs/super-header-interface 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,827 次，日均约 161 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @directus-labs/super-header-interface 还在维护吗？
最新版本 1\.2\.0 发布于 2025/05/09（1\.5 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/01/10。作者已将其标记为弃用，新项目建议寻找替代方案。