26、网站导航组件的构建与实现

网站导航组件的构建与实现

在网站开发中，良好的导航组件对于提升网站的可访问性以及帮助用户快速找到所需内容至关重要。一般来说，用户界面设计的一个通用规则是菜单应包含三到七个项目。项目过多，用户会面临冗长的选项列表；项目过少，则难以称之为菜单。鉴于典型网站的页面通常超过七个，我们需要考虑如何将页面和菜单组织成某种结构。

1. 添加网站结构

导航的首要规则是拥有一个良好的地图。为了减少繁琐的工作，我们借助模板工具包（Template Toolkit）来完成大部分地图制作任务。地图将在 config/map 模板中定义，因此需要修改 config/main 模板来处理它。

[%  PROCESS config/page
          + config/site
          + config/url
          + config/col
          + config/images
          + config/map    # add this line
-%]

config/map 模板定义了网站页面的地图结构，示例如下：

[%  # define map of pages in site
    map = {
        name = 'template-toolkit.org'
        menu = [ 'index', 'about', 'news', 'docs' ]