# @ecl/site-header 中文文档

规范地址：https://npmcn.com/package/%40ecl/site-header/

版本：5\.4\.1
npm 元数据更新时间：2026-11-10T09:34:53.929Z
中文译文更新时间：2026-11-13T05:32:20.228Z
软件包许可：EUPL-1\.2

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ecl/site-header
原文对照：https://npmcn.com/package/%40ecl/site-header/?lang=original
项目主页：https://github.com/ec-europa/europa-component-library
源码仓库：https://github.com/ec-europa/europa-component-library

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：114 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：10 个
- 首次发布：2025-01-22T12:09:08.574Z
- 最新版本发布：2026-11-10T09:34:53.719Z
- 近 30 天下载量：3654（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：45（近 12 个月 24 个）

## 中文简介

ECL 站点页眉

## 安装

```sh
npm install @ecl/site-header
```

也可以使用：`pnpm add @ecl/site-header`、`yarn add @ecl/site-header`、`bun add @ecl/site-header`

## README

# ECL 站点页眉组件

npm 软件包 : `@ecl/site-header`

```shell
npm install --save @ecl/site-header
```

### 参数

-   **"记录"** (boolean) (默认:虚假): 用户是否登录
-   **"菜单"** (关联阵列):菜单内容,如果有的话. 使用 ECL 菜单结构
-   **"网站名称"** (字符串)(默认为:")站点名称
-   **"网站 名称 移动 仅"** (布尔): 网站名称是否隐藏在桌面上
-   **"论"** (关联数组)(默认:预定义的结构): 日志图像设置 。 格式 :
    -   "标题" (字符串)(默认为:""): Logo标题属性.
    -   "alt" (字符串)(默认:""): Logo alt属性.
    -   "断点":(字符串) (默认:'s") 欧盟的预期值是"l"
    -   "ref"(字符串)(默认:""): Logo URL.
    -   "src desktop"(字符串)(默认为:"): 桌面标志图像文件路径
    -   "src mobile"(字符串)(默认为:"): 只针对欧盟的移动标志图像文件路径
    -   "大小":(字符串)(默认:"l"): 桌面大小为 三( s, m, l)
-   **"登录"** (关联数组)格式 :
    -   "id":(弦) 纸盒
    -   用户登录的“ 描述” (字符串) 标签
    -   “ 标签” (字符串) 注销标签
    -   "ref" (字符串) 链接的Url
-   **"前进"** (关联数组)格式 :
    -   用于匿名用户的“ label not ligned” (字符串) 标签
    -   "href not lign" (可选) (字符串) 链接到登录表单. 如果不提供, 切换会变成按钮
    -   用户登录的标签
    -   "ref 登录"(可选) (字符串) 链接到登录表 。 如果不提供, 切换会变成按钮
-   **“海关行动”** (关联数组) (默认: ):
    -   链接(object)(默认:被预先定义的结构) 链接组件的预定义结构. 如果不提供“ 路径 ” , 切换会变成按钮
    -   关联阵列的"icon"(可选) (关联阵列) OR(阵列) - 图标组件的默认结构,但ext class是内部键. 要打印图标, 名称必须是非空的 .
    -   "重叠":(关联阵列)(可选):
        -   "标题":(字符串)(默认为:")重叠标题
        -   “ 关闭 ” : (关联数组) (默认: qq)
        -   “ 内容” :( 字符串)( 默认: “ ”) HTML 用于弹出式
-   **"语言 选择器"** (关联数组)(默认:预定义的结构): 语言切换器设置. 格式 :
    -   "href"(可选) (字符串)(默认为:""):用于切换器的URL. 如果不提供, 切换会变成按钮
    -   “ 标签”( 字符串)( 默认 : '' ): 切换语言标签,如eu中的'English',ec中的'EN'
    -   “ aria label” (字符串)(默认为 : “ ”) : 切换语言 aria 标签
    -   “ eu 分类”( 字符串)( 默认 : '' ): 欧盟语言标签
    -   “non eu classic”(字符串)(默认为:') : 非欧盟语言的标签
    -   “重叠”(关联阵列)(默认:预定义的结构): 重叠语言切换器设置 。 格式 :
        -   “ 关闭” : (关联数组) (默认: ++): 关闭按钮, 遵循ECL 按钮结构
        -   "标题"(字符串)(默认为:""):重叠标题,如"选择您的语言".
        -   "项目" (阵列)(默认: \[\]): (阵列)(默认: \[\]):格式:
            -   "lang" (字符串)(默认为:")项目语言代码,如"en","fr"等.
            -   "label" (字符串)(默认为:")项目语言标签,如"English","Français"等.
            -   "path" (字符串)(默认为:"") 项目语言 URL 如."/例#语言 en".
            -   “活性” (boolean)(默认:虚假) 定义项目是否为活性语言 .
        -   "non eu items" (阵列)(默认: \[\]): (阵列)(默认: \[\]):格式:
            -   "lang" (字符串)(默认为:")项目语言代码,如"en","fr"等.
            -   "label" (字符串)(默认为:")项目语言标签,如"English","Français"等.
            -   "path" (字符串)(默认为:"") 项目语言 URL 如."/例#语言 en".
            -   “活性” (boolean)(默认:虚假) 定义项目是否为活性语言 .
-   **搜索( t)** (关联数组)格式 :
    -   元素的“ 标签”( 字符串) 标签
    -   "ref" (可选) (字符串) 元素的链接. 如果不提供, 切换会变成按钮
-   **“ 搜索窗体”** (关联数组)(默认:预定义的结构):ECL搜索形式组件结构
-   **"通知书"** (对象)(默认: ): 符合ECL通知组件结构的可选通知
-   **"超级"** (可选) (字符串)(默认为:") 外类(空格分隔)
-   **“外部属性”** (可选) (阵列) (默认: \[\]) 额外属性
    -   名称 (字符串) 属性名称, 如“ 数据测试 ”
    -   值 (字符串) 属性值, 如 : “ data- test-1 ”

### 折旧

-   **"banner top" (banner top) (英语)** (字符串) OR(财产中包含链接组件的对象): 类名

### 示例:

```twig
{% include '@ecl/site-header/site-header.html.twig' with { 
  site_name: 'This site name'
  logo: {
    alt: 'European Commission', 
    href: '/example', 
    src: '/logo-ec--en.svg', 
  }, 
  language_selector: { 
    href: '/example', 
    label: 'English', 
    aria_label: 'Change language',
    code: 'en', 
    overlay: { 
      close_label: 'Close', 
      title: 'Select your language', 
      items: [ 
        { lang: 'bg', label: 'български', path: '/example#language_bg' }, 
        { lang: 'es', label: 'español', path: '/example#language_es', active: true }, 
        ... 
      ], 
    }, 
  },
  custom_action: { 
    href: '/notifications', 
    icon: 'bell', 
    label: 'Notifications', 
    aria_label: 'View notifications', 
    indicator: true, 
    overlay: { 
      title: 'Notifications', 
      close: { 
        label: 'Close' 
      }, 
      content: '<p>You have new notifications.</p>', 
    }, 
  }, 
  login_toggle: { 
    label_not_logged: 'Log in', 
    href_not_logged: '/example', 
    label_logged: 'Logged in', 
    href_logged: '/example', 
  }, 
  login_box: { 
    id: 'login-box-id', 
    description: 'Logged in as <last name>, <first name>', 
    label: 'Log out', 
    href: '/example', 
  }, 
  search_toggle: { 
    label: 'Search', 
    href: '#', 
  }, 
  search_form: { 
    text_input: { 
      id: 'input-search', 
      name: 'search', 
    }, 
    button: { 
      label: 'Search', 
    }, 
  }, 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test', value: 'data-test-value' }, 
    { name: 'data-test-1', value: 'data-test-value-1' }, 
    ... 
  ], 
} %} 
```

## 常见问题

### @ecl/site-header 是什么？

ECL 站点页眉

### 如何安装 @ecl/site-header？

在项目目录运行 npm install @ecl/site-header，或使用 pnpm add / yarn add / bun add。

### @ecl/site-header 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/ecl\_\_site-header 是否存在。

### @ecl/site-header 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ecl/site-header 可以商用吗？

@ecl/site-header 使用 EUPL-1\.2 许可。声明的许可为 EUPL-1\.2，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @ecl/site-header 的下载量有多少？

根据 npm 官方下载统计，@ecl/site-header 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,654 次，日均约 122 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ecl/site-header 还在维护吗？

最新版本 5\.4\.1 发布于 2026/11/10（3 天前）；至今共发布 45 个版本，其中过去 12 个月发布了 24 个；首次发布于 2025/01/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。