时间戳

首页 > 解决方案 > 使用 Twig 或 Grunt 从 JSON 数组创建导航

json - 使用 Twig 或 Grunt 从 JSON 数组创建导航

问题描述

我通过 Grunt 从文件夹结构生成 JSON得到了一些帮助。那效果很好。

现在，我想使用该 JSON 并根据输出创建一个菜单。

这是我正在谈论的示例。

{
  "files": [
    {
      "name": "firstpage.twig",
      "path": "folder1/subfolder1"
    },
    {
      "name": "secondpage.twig",
      "path": "folder1/subfolder1"
    },
    {
      "name": "thirdpage.twig",
      "path": "folder1/subfolder1"
    },
    {
      "name": "fourthpage.twig",
      "path": "folder1/subfolder1"
    },
    {
      "name": "anotherpage.twig",
      "path": "folder1/subfolder2"
    },
    {
      "name": "yetanother.twig",
      "path": "folder1/subfolder2"
    },
    {
      "name": "heresanother.twig",
      "path": "folder2/subfolder3"
    },
    {
      "name": "anotherone.twig",
      "path": "folder2/subfolder3"
    }
  ]
}

我想建立一个导航，这样它就像

<ul>
    <li>
        <a href="#!">folder1</a>
        <ul>
            <li>
                <a href="#!">subfolder1</a>
                <ul>
                    <li><a href="folder1/subfolder1/firstpage.twig">firstpage</a></li>
                    <li><a href="folder1/subfolder1/secondpage.twig">secondpage</a></li>
                    <li><a href="folder1/subfolder1/thirdpage.twig">thirdpage</a></li>
                    <li><a href="folder1/subfolder1/fourthpage.twig">fourthpage</a></li>
                </ul>
                <a href="#!">subfolder2</a>
                <ul>
                    <li><a href="folder1/subfolder2/anotherpage.twig">anotherpage</a></li>
                    <li><a href="folder1/subfolder2/yetanother.twig">yetanother</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#!">folder2</a>
        <ul>
            <li>
                <a href="#!">subfolder3</a>
                <ul>
                    <li><a href="folder1/subfolder1/heresanother.twig">heresanother</a></li>
                    <li><a href="folder1/subfolder1/anotherone.twig">anotherone</a></li>   
                </ul>
            </li>
        </ul>
    </li>
</ul>

文件夹 1、子文件夹 1 等的部分将根据遍历 JSON 中的路径条目并解析出唯一的条目来动态填充。

我正在使用 Grunt 自定义任务来生成 JSON。我也在使用通过Twig Rendering Grunt 包渲染的 Twig 。这里没有其他框架可以玩，只有纯 Twig。这一切都是通过 NPM 完成的。

到目前为止我已经尝试过了，但显然失败了

{% for folder in files %}
    {% set folders = folder.path|split('/') %}
    {% for i in folders if i (doesn't already exist) %}
        // Dynamic menu goes here
    {% endfor %}
{% endfor %}

只是卡在这里，把我的头从桌子上撞下来。:)

提前感谢您的帮助！

标签： jsonnpmgruntjstwig

解决方案

在 Gruntfile 中，工作的自定义任务是这样的：

grunt.registerTask('twigList', '创建树枝文件列表', function() { var obj = {};

   obj.files = find('sections')
       .filter(function(filePath) {
         return filePath.match(/\.twig$/);
       })
       .map(function(filePath) {
         let itemPath = path.dirname(filePath).replace('sections/','');
         let pathSeparatorPos = itemPath.indexOf('/');
         let rootPath = itemPath.substring(0, pathSeparatorPos);

         return {
           name: path.basename(filePath),
           path: itemPath,
           rootPath: rootPath,
         }
       });

   grunt.file.write('data/page-list.json', JSON.stringify(obj, null, 2));
 });

然后又快又脏的树枝就是这个

{% set _lastRootPath = false %}
    {% for folder in files if folder.rootPath is not empty %}
    {% if folder.rootPath != _lastRootPath %}
    {% set _lastRootPath = folder.rootPath %}
    <a href="">{{ folder.rootPath }}</a>
    {% endif %}
    {% endfor %}
    {% set _lastRootPath = false %}
    <ul>
    {% for folder in files if folder.rootPath is not empty %}
    {% if folder.rootPath != _lastRootPath %}
        {% if _lastRootPath != false %}</ul></li>{% endif %}
    {% set _lastRootPath = folder.rootPath %}
    <li><a href="">{{ folder.rootPath }}</a><ul>
    {% endif %}
    {% if folder.rootPath == _lastRootPath %}
    <li><a href="">{{ folder.name }}</a></li>
    {% endif %}
{% endfor %}

它没有抛光，但它可以工作

推荐阅读