0

我的文件夹结构如下

index.html
post/
  post1.html
  post2.html
pages/
  about.html
  interior.html
  exterior.html
  gallery.html
  post.html //listing blog post
  contact.html
  interior/
    in1.html
    in2.html
    ...
    in5.html
  exterior/
    ex1.html
    ex2.html
    ...
    ex7.html
  gallery/
    img1,2,3,4

我的菜单结构是这样的

主页 | 关于我们 | 内饰 | 外观 | 画廊 | 帖子 | 接触

我通过列出页面集合来创建菜单，没关系！

.navigation
nav
  ul.nav.topnav
    li.dropdown.active
      a(href='/')
        | Home
    each doc in getCollection('pages').toJSON()
      - clazz = (document.url === doc.url) ? 'active' : null
      li.dropdown(typeof="sioc:Page", about=doc.url, class=clazz)
        a(href=doc.url, property="dc:title")= doc.title

如何通过列出内部/外部文件夹中的页面来为内部和外部添加子菜单项

预先感谢！

4

4 回答 4

1

可能你使用docpad-menu ..？

于 2013-07-26T08:20:12.340 回答
0

你可以给你的顶级页面一个元数据标签locationOfChildren，它是子页面所在文件夹的路径。如果顶级页面（例如 index.html）没有子页面，那么就不要定义标签或给它一个值。

然后，您可以添加一个 if 语句，该语句将为子文档列表运行循环，如果locationOfChildren已定义。

.navigation
  nav
    ul.nav.topnav
      li.dropdown.active
        a(href='/')
          | Home
      each doc in getCollection('pages').toJSON()
        - clazz = (document.url === doc.url) ? 'active' : null
        li.dropdown(typeof="sioc:Page", about=doc.url, class=clazz)
          a(href=doc.url)= doc.title
          if doc.locationOfChildren
            ul.dropdown
              each childDoc in getFilesAtPath(doc.locationOfChildren).toJSON()
                - clazz = (document.url === childDoc.url) ? 'active' : null
                li.dropdown(typeof="sioc:Page", about=childDoc.url, class=clazz)
                  a(href=childDoc.url)= childDoc.title

您可能不希望您的页面按字母顺序排序，因此您可以将navOrder标签添加到每个页面的元数据，并为其分配整数值。在你的两个查询字符串（getCollection 和 getFilesAtPath）中，在方法.findAllLive({isPage:true},[{navigationOrder:1}])之前添加.toJSON()，你应该很高兴。

前任： getFilesAtPath(doc.locationOfChildren).findAllLive({isPage:true},[{navOrder:1}]).toJSON()

于 2014-04-12T09:58:32.290 回答
0

您可以在其各自的 YAML 中根据文档进行标记，例如

---
submenu: interior
title: in1
---

并使用它从您的导航中的匹配集合中呈现，或者像例如

<ul>
<% for entry in @getCollection("html").findAllLive({submenu: interior}).toJSON(): %>    
   <li><%= entry.title %></li>
<% end %>
</ul>

要使用匹配文件夹而不是 YAML，您需要将查询从更改submenu: interior为relativeOutDirPath: /interior/

于 2013-10-02T08:07:15.673 回答
0

这可能是一种低效的方法来处理这个问题，但这是我到目前为止所想到的类似这样的事情（CoffeeKup + Bootstrap）：

  li class: "dropdown", ->
    a href: "#", class: "dropdown-toggle", "data-toggle": "dropdown", ->
      text "API"
      b class: "caret"
    ul class: "dropdown-menu", ->
      for file in @getFilesAtPath("api").toJSON()
        li ->
          if @document.relativeOutDirPath == "."
            a href: file.relativeOutPath, file.title
          else
            a href: "../" + file.relativeOutPath, file.title

注意@getFilesAtPath("api").toJSON()部分。我有一个名为“/api”的文件夹，其中包含文件。<li>使用这种类型的结构，该文件夹内每个文件的相应标签。

当然，使用它，您需要为您创建的每个文件夹创建另一个这样的东西（我找不到循环遍历目录名称的方法）。

真正的垃圾开始飞扬（也许你对此有更好的攻击），是<li>标签本身。注意需要检查我们是否在index.html页面或某个子文件夹上的 if 语句。然后我必须附加"../"到文件的路径。我一直在寻找，但还没有找到一个简单的@document.pathToRoot样式属性。

于 2013-09-18T14:37:52.827 回答