Question

我的文档文件夹结构如下

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

如何通过列出内部/外部文件夹

中的页面来添加内部和外部的子菜单项

提前谢谢！

Answer 1

你可以使用docpad-menu ..？

Answer 2

这可能是一种处理这种情况的低效方法，但这是我迄今为止想到的（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>标签本身。注意if语句需要检查我们是否在index.html页面或某个子文件夹。然后我必须将"../"添加到文件的路径上。我一直在搜索，但还没有找到一个简单的@document.pathToRoot样式属性。

Answer 3

您可以在各自的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/

Answer 4

您可以为顶级页面提供元数据标记locationOfChildren，该标记将是子页面所在文件夹的路径。如果顶级页面（例如index.html）没有子级，那么就不要定义标记或为其赋值。

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

.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()

如何在Docpad中创建子菜单项？

4 个答案: