Jekyll-TeXt-Theme导航系统配置详解

Jekyll-TeXt-Theme导航系统配置详解

jekyll-TeXt-theme 💎 🐳 A super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc. 项目地址: https://gitcode.com/gh_mirrors/je/jekyll-TeXt-theme

导航系统概述

Jekyll-TeXt-Theme提供了两种主要的导航方式：顶部导航栏(Header Navigation)和侧边栏导航(Sidebar Navigation)。这两种导航方式都通过YAML配置文件进行管理，使得网站导航的定制变得简单而灵活。

顶部导航栏配置

顶部导航栏是网站的主要导航入口，通常包含网站的核心功能链接。配置方法如下：

1. 在data/navigation.yml文件中找到header部分
2. 按照YAML格式添加导航项

配置示例

header:
  - title:      文档中心
    url:        /docs/zh/quick-start
  - titles:
      en:      Archive
      zh:      归档
    url:        /archive.html

配置说明

• title: 单语言导航项标题
• titles: 多语言导航项标题，支持多种语言变体
• url: 导航项指向的链接地址

多语言支持技巧

对于多语言网站，可以使用titles字段为不同语言提供不同的显示文本。系统会根据当前语言环境自动选择对应的显示文本。

侧边栏导航配置

侧边栏导航通常用于文档类内容的层次结构展示，配置相对复杂但功能更强大。

基本配置步骤

1. 在data/navigation.yml中定义导航结构
2. 在文章Front Matter中指定使用的导航

配置示例

docs-zh:
  - title:      入门指南
    children:
      - title:  快速开始
        url:    /docs/zh/quick-start
      - title:  项目结构
        url:    /docs/zh/structure
  - title:      自定义配置
    children:
      - title:  基础配置
        url:    /docs/zh/configuration
      - title:  导航设置
        url:    /docs/zh/navigation

使用侧边栏导航

在文章的Front Matter中添加以下内容：

sidebar:
  nav: docs-zh

高级功能

1. 多级嵌套：可以通过嵌套children实现多级导航菜单
2. 分组显示：使用title作为分组标题，children作为分组内容
3. 动态激活：当前页面对应的导航项会自动高亮显示

最佳实践建议

1. 保持简洁：顶部导航栏项目不宜过多，建议控制在5-7个
2. 逻辑分组：侧边栏导航应按功能或内容类型合理分组
3. 命名一致：导航项命名应保持风格一致，便于用户理解
4. 多语言考虑：为每个导航项提供完整的多语言支持
5. 响应式设计：注意导航在不同设备上的显示效果

常见问题解答

Q: 如何添加一个新的导航项？ A: 在data/navigation.yml中相应部分添加新的条目，确保格式正确即可。

Q: 为什么我的侧边栏导航没有显示？ A: 请检查Front Matter中是否正确指定了导航名称，且该名称在data/navigation.yml中有定义。

Q: 能否实现动态生成的导航？ A: 当前版本主要支持静态配置的导航，如需动态内容可以考虑通过Jekyll的页面变量实现部分动态效果。

通过合理配置这两种导航系统，你可以为Jekyll-TeXt-Theme构建出既美观又实用的网站导航结构，极大提升用户体验。

jekyll-TeXt-theme 💎 🐳 A super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc. 项目地址: https://gitcode.com/gh_mirrors/je/jekyll-TeXt-theme