Part 11

导航栏 (Navbar / Header) 区块

各主题附带的特色导航主菜单及顶部横幅区。

导航栏 (Navbar / Header) 呈现在每一个由不同主题构建的展示页最顶端。针对各个主题,所设计的菜单区都拥有一套属于自身的专门设计模式、特定的侧滑拉出响应式移动设备适配方法以及独树一帜的总体效果与外放张力:

变体及其风格特色

主题风格对应组件风格描述
LiquidHeaderLiquid.astro背景以虚化打底且拥有清透特性的透明菜单栏
GlassHeaderGlass.astro富有磨砂毛玻璃视效的半透半隐透光上端指示区
NeoHeaderNeo.astro张狂惹眼附有强烈颜色碰撞的反差风格极粗线段大框大字块顶盖
LuxuryHeaderLuxury.astro以贵金属色泽镶金设计风格强调出昂贵质感尽显卓越品位之极上等顶部
MinimalHeaderMinimal.astro完全褪尽表面所有额外多余繁文缛节修容只剩下朴实列选呈现样貌
AuroraHeaderAurora.astro有着幻变多姿犹如美丽极光特效渲染铺排出的带着色彩光环的高阶横盖

上文列表所涉全部此组件皆被安放于 src/components/layout/header/ 这个配置文件夹结构。

基本核心组件特征

在每个呈现特定不同表现的主题顶设配置单通常囊括汇聚配置好如下这些必用标准结构零件组合:

  • 桌面模式横排导示:自带具备向右或向侧拉长打开延伸次级详细内部分区引导下拉表签。
  • 智能移动便携式展现端引导指示:具备从边缘或旁侧如抽屉抽拿般快速探出的便捷式小巧导示区。
  • 外观皮肤选择拨盘功能(Theme Switcher):统一定制并全局联动装设好的外层皮囊色系调节小工具。
  • 语种地缘选择(Language Switcher):内置并挂载小幅带有各自区域特色小标的各地语言版本快速跳转按钮。
  • 注册商标(Logo):带有官方背书标识品牌的显赫形象图绘展示件。

如何修改和构建自身专属之链接引导体系路标

整站的所有跳转路径链接关系图文均被绑定部署放置于 src/config/navigation.ts (这就包括了例如为 Luxury 此等含有大量多级扩展项目特殊需求的结构定义描述等内容)。

每个展示给大众浏览前看到的词语短文内容文字表现形式信息等均是由基于 src/locales/{lang}/nav.json 而被传导调入读取后呈现出去。

ℹ️
无Props配置 (No Props)

各类 Header 变种均不在意外部传入此等外部 props。如果想添加或控制这些跳转所引向的位置及关系时,去对应 config 中找到即可;若是想处理表面展出的语言词句信息,那去读取字典也就是语言包库便可完成:src/locales/{lang}/nav.json