Folders & Indexes

Folders group pages and collections together for use in submenus, drop-down menus, and/or index pages.

Folder Configuration

To add folders on your site, create a folders.conf file in your collections folder. The standard settings for a folder.conf file are below.

{
  "title" : "My Folder",
  "folder": true,
  "addText": "Add Page",
  "icon" : "folder"
}

Folders in Navigations

The contents of a folder can be added to a site navigation in one of two ways:

1. A dropdown menu beneath a main navigation item.
2. A submenu, which is separate from the main navigation template and is displayed on pages within the folder.

For more information on using folders in navigations see the Menus and Navigation page.

Indexes

An index is a folder with a main page that allows developers to aggregate data from the collections and pages contained within it.

Examples of the indexes used in Squarespace templates include, see the homepages on the Avenue and Flatiron templates.

Creating an Index

To create an index, add an index.conf file to your collections folder. The standard settings for an index.conf file are below.

{
  "title" : "My Index",
  "folder" : true,
  "index" : true,
  "addText" : "Add Collection",
  "acceptTypes" : [ "page", "gallery" ],
  "icon" : "index",
  "indexType" : "grid",
  "fullData" : false
}

To make an index page template, add an index.list file to your collections folder.

The JSON data that's returned on an index page includes a unique array nested inside the collection object titled "collections." The code sample below shows a pared down version of the data, along with template code to loop through each collection.

NOTE: Most (standard collection) acceptTypes are supported within an index.conf with the exception of 'folder'. Including 'folder' in the acceptTypes array of an index.conf is not supported.

JSON

{
    "collection" : [ {
        "title" : "My Index",
        "collections" : [ {
            "title" : "Blog",
            "items" : [ {
                "title" : "First Post"
            }, {
                "title" : "Second Post"
            } ]
        }, {
            "title" : "Gallery",
            "items" : [ {
                "title" : "First Photo"
            }, {
                "title" : "Second Photo"
            } ]
        }, {
            "title" : "Events",
            "items" : [ {
                "title" : "First Event"
            }, {
                "title" : "Second Event"
            } ]
        } ]
    } ]
}

HTML

{.section collection}
    <h1>{title}</h1>
    {.repeated section collections}
        <h2>{title}</h2>
        {.repeated section items}
            <ul>
                <li>{title}</li>
            </ul>
        {.end}
    {.end}
{.end}

Compiled HTML

<h1>My Index</h1>

<h2>Blog</h2>
<ul>
    <li>First Post</li>
    <li>Second Post</li>
</ul>

<h2>Gallery</h2>
<ul>
    <li>First Photo</li>
    <li>Second Photo</li>
</ul>

<h2>Events</h2>
<ul>
    <li>First Event</li>
    <li>Second Event</li>
</ul>