Question

我正在处理需要在页面顶部和页脚中导航的页面。导航本身是一个类/布局更改相同的栏，所以我想将它保存在一个json文件中。这可能吗？

目前，只有页脚才会填充。我正在使用grunt-assemble来构建html模板。

JSON：

{
    "pages": [
        { 
            "linkTitle": "page 1",
            "subnav": [
                { 
                    "subNavLinkTitle": "temp",
                    "url": "temp.html" 
                },
                { 
                    "subNavLinkTitle": "form",
                    "url": "form.html"
                },
                { 
                    "subNavLinkTitle": "map",
                    "url": "map.html"
                }
            ]
        },
        { 
            "linkTitle": "page 2",
            "subnav": [
                { 
                    "subNavLinkTitle": "sub page 4",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 5",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 6",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 7",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 8",
                    "url": "#"
                }
            ]
        }
    ]
}

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    {{> header }}
</head>
<body>
    {{> top }}
    {{> body }}
    {{> footer }}
</body>
</html>

顶

<ol class="nav-top">
{{#each nav.pages}}
    <li>
        <a href="#" class="has-sub-nav">{{ linkTitle }}<i></i></a>
        <div class="sub-nav">
            <ul>
                {{#each subnav}}
                <li><a href="{{ url }}">{{ subNavLinkTitle }}</a></li>
                {{/each}}
            </ul>
        </div>
    </li>
{{/each}}
</ol>

页脚：

<ol class="nav-footer">
{{#each nav.pages}}
    <li>
        <span class="section">{{ linkTitle }}</span>
        <ul>
            {{#each subnav}}
            <li><a href="{{ url }}">{{ subNavLinkTitle }}</a></li>
            {{/each}}
        </ul>
    </li>
{{/each}}
</ol>

Answer 1

我认为您的工作应该有效，但为了以防万一，请尝试引用该文件以及您的部分内容：

{{> top nav }}

然后在你的顶部部分内，只需使用：

{{#each pages }}

这就是我过去做过类似的事情而没有问题...

在多个部分中使用一个json文件

1 个答案: