Question

我得到了一些帮助generating JSON from folder structure via Grunt。效果很好。

现在，我要使用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>

根据遍历JSON中的路径条目并解析出唯一的内容，将动态填充folder1，subfolder1等的各个部分。

我正在使用Grunt自定义任务来生成JSON。我还使用了通过Twig Rendering Grunt package渲染的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 %}

就在这里，把我的头从桌子上撞下来。：）

在此先感谢您的帮助！

Answer 1

在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 %}

它没有打磨但可以使用

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

1 个答案: