PublicCMS 功能页（模板片段） 第三篇 页面添加导航片段

页面主题有简单讲解过引用导航的示例，本篇就开始制作导航的片段

再讲一下父栏目和子栏目，父栏目默认是一级导航，子栏目默认是二级导航。

打开首页模板，将header部分全部选中并剪切。这部分都是导航的内容，包括了父栏目链接、子栏目链接、搜索、登录等

创建导航页面片段，步骤：开发 - 页面片段模板 - 创建页面片段 - 配置路径 - 添加别名 - 保存！注意：片段的路径是自动生成，可以根据自己的需求自定义路径。

点击已保存的header片段，粘贴剪切的代码并保存

回到首页添加header导航片段

修改导航代码：

<header class="header">
    <div class="layout">
        <nav class="nav">
            <div class="nav-logo">
            <a href="${site.sitePath}"><img src="${site.sitePath!}assets/images/logo.png" alt="红名网" /></a>
            </div>
            <ul>
                <li><a href="${site.sitePath}">首页</a></li>
                <@_categoryList>
                <#list page.list as a>
                <li>
                    <a href="${a.url!}" <#if a.onlyUrl> target="_blank"</#if>>${a.name}<b class="tria"></b></a>
                        <#if a.childIds?has_content>
                            <ul>
                            <@_categoryList parentId=a.id>
                            <#list page.list as a>
                            <li><a href="${a.url!}" <#if a.onlyUrl> target="_blank"</#if>>${a.name}</a></li>
                            </#list>
                            </@_categoryList>
                            </ul>
                        </#if>
                    </li>
                </#list>
                </@_categoryList>
                </ul>
                <ul class="styno">
                    <li>
                    <form action="${siteAttribute.searchPath!}">
                        <input name="word" type="text" placeholder="这里输入关键词" size="10"/>
                        <input type="submit" value="搜索"/>
                    </form>
                    </li>
                </ul>
                <ul class="user-login styno fr">
                    <li><a href="${site.dynamicPath}login.html">登陆</a></li>
                </ul>
                <ul class="user-logout fr no">
                <li><a href="${site.dynamicPath}" class="nickname"></a></li>
                <li><a href="${site.dynamicPath}logout.html">退出登录</a></li>
            </ul>
        </nav>
    </div>
</header>

生成首页后查看效果，导航条已经自动根据站内添加的分类栏目调用出来了。

标签解释：

获取导航分类栏目链接

<ul>
    <@_categoryList>
        <#list page.list as a>
            <li></li>
        </#list>
    </@_categoryList>
</ul>

${site.sitePath}静态网站地址：//www.rednn.com/

${a.url!}链接地址

${a.name}链接名称

${site.dynamicPath}动态地址，本站动态地址为：//u.rednn.com/

${siteAttribute.searchPath!}搜索地址，在后台站点配置填写过搜索地址后，会自动调用该地址，后面会讲怎么填

判断是否显示子栏目，如果有子栏目则显示，如果没有则不显示

<#if a.childIds?has_content>
    <ul>
        <@_categoryList parentId=a.id>
        <#list page.list as a>
        <li><a href="${a.url!}" <#if a.onlyUrl> target="_blank"</#if>>${a.name}</a></li>
        </#list>
        </@_categoryList>
    </ul>
</#if>

如果想控制某个栏目不让显示，就在后台：分类 - 选中需要隐藏的分类 - 修改分类 - 前台隐藏，即可隐藏某个分类栏目。