网站导航，就像一个网站的指路牌，清晰、直观的导航系统能极大地提升用户体验，帮助访客快速找到所需信息。同时，对搜索引擎来说，良好的导航结构也是理解网站内容层级、进行有效抓取和排名的关键。在安企CMS中，我们可以灵活而精确地控制网站导航的显示内容、层级和当前选中状态，让导航既美观又实用。
核心理念：后台配置与前端模板渲染分离
安企CMS在处理网站导航时，遵循着“后台配置数据，前端模板渲染展示”的原则。这意味着，您在后台设置好导航的结构、链接和属性，而具体的样式、布局和互动逻辑则由前端模板文件来决定。这种分离的设计，让您既能方便地管理导航内容，又能拥有极高的自由度来定制导航的外观。
第一步：在后台精细化设置导航菜单
所有导航菜单的显示内容、链接类型和大致层级，都源于安企CMS后台的“网站导航设置”功能。
管理导航类别：不止一个主菜单 在“网站导航设置”中，您会发现默认的“默认导航”类别。但您的网站可能不只有顶部主导航，还可能需要页脚导航、侧边栏导航、甚至是登录后用户中心导航。安企CMS支持自定义创建多个导航类别，例如，您可以添加一个名为“页脚导航”的新类别。这样，不同的导航区域就能独立管理，互不干扰。
添加与编辑导航链接：控制显示内容与层级 进入具体的导航类别后，您就可以开始添加或编辑导航链接了。每个导航链接都可以细致地设定多项内容：
- 显示名称： 这是导航在前台展示的文字，您可以灵活更改，不一定非要和链接指向的页面名称完全一致。
- 子标题名称： 如果您的导航需要同时显示中文和英文等双标题，可以在这里添加对应文字，供模板调用。
- 导航描述： 为导航项添加一段简要介绍文字，同样可供模板在特定布局下调用。
- 链接类型： 安企CMS提供了三种灵活的链接类型：
- 内置链接： 快速指向网站首页、文章模型首页、产品模型首页或其他自定义模型首页，无需手动填写URL。
- 分类页面链接： 直接选择已创建的文章分类、产品分类或单个独立页面作为导航链接，系统会自动生成正确路径。
- 外部链接： 允许您手动输入任意URL，无论是站内特定路径还是站外链接，都能轻松添加。
- 层级关系： 安企CMS原生地支持两级导航链接。您可以通过“上级导航”选项，将当前链接设置为顶级导航，或指定其隶属于某个已存在的顶级导航，从而构建清晰的二级菜单结构。
- 显示顺序： 通过设置数字大小来调整导航项的排列位置，数字越小越靠前，方便您对菜单进行精确排序。
第二步：利用模板标签灵活展现导航
后台配置完成后，接下来就是通过模板标签将这些导航数据呈现在网站前端。安企CMS的模板引擎功能强大，这里主要会用到 navList 标签。
navList标签的基本用法navList是获取导航列表的核心标签。它会根据您在后台设置的导航类别ID (typeId)，获取所有相关的导航链接数据。{% navList navs %} <ul> {% for item in navs %} <li> <a href="{{ item.Link }}">{{item.Title}}</a> </li> {% endfor %} </ul> {% endnavList %}这段代码会遍历
navs变量，为每个顶级导航项生成一个列表项和链接。item.Link会自动输出正确的导航链接，item.Title则显示您在后台设置的导航名称。实现二级导航菜单
navList标签返回的每个item对象中，如果该导航项有子导航，会包含一个NavList属性。您可以嵌套一个for循环来展现二级菜单：{% navList navs %} <ul> {% for item in navs %} <li> <a href="{{ item.Link }}">{{item.Title}}</a> {% if item.NavList %} {# 判断是否有二级导航 #} <dl> {% for inner in item.NavList %} <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd> {% endfor %} </dl> {% endif %} </li> {% endfor %} </ul> {% endnavList %}这样，一个结构清晰的两级导航菜单就通过简单的嵌套循环呈现出来了。
导航中的动态内容：更高级的层级展示 有时，您可能希望在二级导航下，直接展示某个分类下的文章列表，或者该分类的子分类，以实现更深层的内容引导。安企CMS允许您在导航模板中结合
archiveList或categoryList等标签实现：{% navList navList with typeId=1 %} <ul> {% for item in navList %} <li> <a href="{{ item.Link }}">{{item.Title}}</a> {% if item.NavList %} <ul class="nav-menu-child"> {% for inner in item.NavList %} <li> <a href="{{ inner.Link }}">{{inner.Title}}</a> {% if inner.PageId > 0 %} {# 假设PageId代表分类ID #} {% categoryList subCategories with parentId=inner.PageId %} {# 获取该分类的子分类 #} {% if subCategories %} <ul> {% for subCat in subCategories %} <li><a href="{{ subCat.Link }}">{{subCat.Title}}</a></li> {% endfor %} </ul> {% endif %} {% endcategoryList %} {# 或者，在这里调用 archiveList 来显示文章 #} {% archiveList articles with type="list" categoryId=inner.PageId limit="5" %} {% if articles %} <ul> {% for article in articles %} <li><a href="{{ article.Link }}">{{article.Title}}</a></li> {% endfor %} </ul> {% endif %} {% endarchiveList %} {% endif %} </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> {% endnavList %}通过这种方式，您可以让导航不仅仅是死板的链接，而是能够动态展示网站内容的入口，理论上可以构建出逻辑上更深层级的导航内容。
当前选中状态的智能识别 安企CMS的
navList标签自带一个非常实用的IsCurrent属性。当某个导航项是当前访问页面的链接时，IsCurrent的值为true。您可以利用这个属性来添加CSS类，从而高亮显示当前选中的导航项：{% navList navs %} <ul> {% for item in navs %} <li class="{% if item.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加 active 类 #} <a href="{{ item.Link }}">{{item.Title}}</a> {% if item.NavList %} <dl> {% for inner in item.NavList %} <dd class="{% if inner.IsCurrent %}active{% endif %}"> <a href="{{ inner.Link }}">{{inner.Title}}</a> </dd> {% endfor %} </dl> {% endif %} </li> {% endfor %} </ul> {% endnavList %}只要您的CSS文件中定义了
.active类的样式（比如背景色、文字颜色），当前页面对应的导航项就会自动突出显示，无需手动维护。
高级技巧与考量
- 多站点与多语言导航： 如果您的安企CMS部署了多站点或多语言功能，每个站点/语言都可以拥有独立的导航设置。在
navList标签中，通过siteId参数可以指定获取特定站点的数据，实现完全独立的导航结构和内容。 - 自定义导航样式： 导航的视觉呈现完全取决于您的前端模板文件（
.html）和CSS样式（.css）。您可以修改<li>、<a>等标签的结构，添加自定义类名，并编写相应的CSS代码，打造独一无二的导航风格。 - 伪静态规则与导航链接： 确保您在后台“伪静态规则”中设置的URL结构，与导航链接的生成逻辑保持一致。例如，如果文章详情页使用了
/article-{id}.html的命名模式，那么通过“分类页面链接”或“内置链接”生成的导航URL也会遵循这个规则，保证网站链接的统一性和SEO友好性。
安企CMS通过其后台灵活的配置和前端强大的模板标签，让您能够精确控制网站导航的每一个细节