如何自定义安企CMS导航类别,实现页脚或侧边栏导航?

作为一位深谙安企CMS(AnQiCMS)运作之道的网站运营者,我深知灵活且用户友好的导航系统对于提升网站可发现性和用户体验的重要性。安企CMS在导航定制方面提供了强大而直观的功能,无论您想在页脚、侧边栏还是其他任何区域部署特色导航,都能轻松实现。

以下将为您详细阐述如何在安企CMS中自定义导航类别,以实现页脚或侧边栏导航。

理解安企CMS的导航体系

在安企CMS中,导航的核心在于“导航类别”和“导航链接”的概念。系统默认会为您提供一个“默认导航”类别,这通常用于网站的主菜单。然而,为了满足不同区域(例如网站页脚、侧边栏、某个专题页面)的特定导航需求,安企CMS允许您创建无限数量的自定义导航类别。每个类别下,您可以自由添加、管理和排序一系列导航链接,从而构建出清晰且具有引导性的网站结构。这种设计极大地提高了网站内容的组织效率和展示灵活性。

创建自定义导航类别

要实现页脚或侧边栏导航,首先需要为这些区域创建一个独立的导航类别。

您需要登录安企CMS的后台管理界面,然后找到并点击左侧菜单中的“后台设置”,接着选择“导航设置”选项。在导航设置页面,您会看到一个“导航类别管理”区域。在这里,系统会列出已有的导航类别。为了新增,请点击“新增导航类别”按钮。

此时,系统会弹出一个表单,要求您填写新导航类别的名称。例如,如果您计划创建一个页脚导航,可以将其命名为“页脚导航”;如果是侧边栏导航,则命名为“侧边栏导航”。清晰的命名有助于您日后管理和识别。提交表单后,新的导航类别便创建成功,并会分配一个唯一的内部ID。这个ID在后续将自定义导航集成到网站模板中时会用到。

配置导航链接

自定义导航类别创建完成后,下一步是向其中添加具体的导航链接。

在“导航设置”页面,选择您刚才创建的自定义导航类别(例如“页脚导航”),然后点击“添加导航链接”按钮。这将打开一个配置导航链接的表单,您可以根据实际需求填写以下字段:

  • 上级导航: 这个字段用于构建多级导航。如果您希望当前链接是顶级导航项,请选择“顶级导航”;如果您想创建二级导航,则选择其对应的一级导航项作为上级。安企CMS目前支持最多两级下拉导航。
  • 显示名称: 这是导航链接在前台页面上显示的文本。您可以根据需要灵活设置,不必与链接内容完全一致。例如,一个链接到“联系我们”页面的导航项,显示名称可以设为“与我们联络”。
  • 子标题名称: 如果您的设计需要导航项显示双标题,例如中文主标题和英文子标题,您可以在此字段中填写子标题内容。
  • 导航描述: 此字段允许您为导航项提供一段简短的说明文字,在前台模板中可以调用显示,为用户提供更多上下文信息。
  • 链接类型: 安企CMS提供了三种灵活的链接类型以满足不同内容的需求:
    • 内置链接: 包含“首页链接”以及您网站中自定义模型的首页(如“文章模型首页”、“产品模型首页”)。这适用于指向网站核心功能入口。
    • 分类页面链接: 允许您从已有的文档分类或单页面中选择作为导航链接。这使得将特定内容集合或独立页面集成到导航中变得非常便捷。
    • 外部链接: 提供最大的灵活性,您可以输入任何内部或外部的URL。无论是站内某个特定文章的链接,还是指向外部合作伙伴网站的链接,都可以通过此方式添加。
  • 显示顺序: 通过设置数字来控制导航链接的排列。数字越小,链接在列表中的显示位置越靠前。目前,排序通过数值实现,尚不支持拖拽方式。

完成所有字段的填写并保存后,您的导航链接就成功添加到了自定义类别中。您可以重复此过程,添加所有需要的导航项。

在模板中集成自定义导航

配置好后台的导航类别和链接后,关键一步是将这些导航数据呈现在网站的前端页面上。这主要通过安企CMS的模板标签navList来实现。

首先,您需要确定您的导航将部署在哪个模板文件内。对于页脚导航,通常会将其集成到bash.html(存放公共页头、页脚等元素的模板)的页脚部分。对于侧边栏导航,则可能将其放入partial/目录下的某个代码片段文件(如partial/sidebar.html),再通过include标签将其引入到需要显示侧边栏的页面模板中。

在模板文件中,您可以使用navList标签来调用您自定义的导航类别。navList标签需要一个typeId参数来指定要调用的导航类别。这个typeId就是您在“创建自定义导航类别”时系统分配的内部ID。您可以在后台编辑导航类别时,通过浏览器地址栏的URL来查看其id参数,或通过其他后台入口获取。

以下是调用自定义导航并进行循环输出的示例代码:

{# 假设您的页脚导航类别ID为 2 #}
{% navList footerNavs with typeId=2 %}
{% if footerNavs %}
<div class="footer-navigation">
    <ul>
        {%- for item in footerNavs %}
        <li class="footer-nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" {% if item.Nofollow == 1 %} rel="nofollow" {% endif %} {% if item.Target == 1 %} target="_blank" {% endif %}>
                {{item.Title}}
                {%- if item.SubTitle %}<small>{{item.SubTitle}}</small>{% endif %}
            </a>
            {%- if item.NavList %} {# 如果有二级导航 #}
            <dl class="footer-sub-nav">
                {%- for inner in item.NavList %}
                <dd class="footer-sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                    <a href="{{ inner.Link }}" {% if inner.Nofollow == 1 %} rel="nofollow" {% endif %} {% if inner.Target == 1 %} target="_blank" {% endif %}>
                        {{inner.Title}}
                    </a>
                </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}
{% endnavList %}

{# 假设您的侧边栏导航类别ID为 3 #}
{% navList sidebarNavs with typeId=3 %}
{% if sidebarNavs %}
<aside class="sidebar-block">
    <h3>侧边栏导航</h3>
    <ul class="sidebar-menu">
        {%- for item in sidebarNavs %}
        <li class="sidebar-menu-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">
                {{item.Title}}
                {%- if item.Description %}<span>{{item.Description}}</span>{% endif %}
            </a>
            {%- if item.NavList %} {# 侧边栏的二级导航 #}
            <ul class="sidebar-submenu">
                {%- for inner in item.NavList %}
                <li class="sidebar-submenu-item {% if inner.IsCurrent %}active{% endif %}">
                    <a href="{{ inner.Link }}">{{inner.Title}}</a>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</aside>
{% endif %}
{% endnavList %}

请注意,item.Nofollowitem.Target 在文档中 navListitem 可用字段中没有明确列出,但 help-setting-nav.md 中提到了“外部链接可以灵活的添加各种网页链接”,且 tag-linkList.md 提到了 Nofollow 字段,所以这些属性在实际导航链接中可能存在,可以尝试使用。如果不存在,请删除相关判断以避免模板错误。

通过上述代码,安企CMS会根据您后台的配置,动态生成对应的导航结构。您可以根据自己的模板设计,添加CSS样式来美化这些导航,使其与网站整体风格保持一致。

优化和维护

成功的导航不仅在于其功能实现,更在于其对用户体验和SEO的积极影响。

  • SEO考量: 确保您的导航链接结构清晰,URL语义化,并且避免死链接。安企CMS的伪静态功能(在“功能管理”下的“伪静态规则”中配置)有助于生成对搜索引擎更友好的URL。对于指向外部站点或不希望传递权重给的链接,可以考虑在后台导航链接设置时将其标记为nofollow
  • 响应式设计: 随着移动设备用户数量的增长,务必确保您的页脚和侧边栏导航在不同屏幕尺寸上都能良好显示和交互。这需要您在模板中应用适当的响应式CSS。
  • 定期更新: 网站内容和策略并非一成不变,您的导航也应随之调整。定期检查导航链接的有效性,并根据网站内容更新、热门话题或用户行为分析,调整导航项的显示顺序、增删链接,以保持其相关性和引导性。

通过这些细致的步骤和考量,您将能够充分利用安企CMS的导航定制能力,为您的网站打造出既美观又实用的多区域导航,从而有效提升用户满意度和网站