RoamJS is becoming a part of SamePage! To check out the inter-tool network we're building, click here to learn more!



Table of Contents

Filter Types

Filters determine which subset of your graph will be included as pages in your public website. By default, only your index page will be deployed. However, the extension supports four types of filters to help specify which other pages in your graph are included:

TAGGED WITH - All pages that reference a given tag will be included. The default value uses the #Website tag

STARTS WITH - All pages that have a given prefix will be included. Useful for pages with namespaces.

DAILY - Include all of the daily note pages in your graph, each with its own webpage.

ALL - Includes all of the pages in your graph, each with its own webpage

Filter Layouts

Just as you could define a template to apply to all pages in your website, you could also define a template to apply to all pages that match a given filter. Next to each filter is a grid icon where you could define what layouts each page that matches it should render.

Clicking on the button will take you to an editor displaying the current HTML Layout for that filter. Edit this value and click save to assign a new HTML template to pages that match this filter.

Layouts defined in filters stack with the Main Template that applies to all pages. If a page matches multiple filters, they will all apply sequentially before applying the main template.

Be sure to keep the ${PAGE_CONTENT} placeholder in the layout. This is where all of the page's content will be inserted. Similar to main templates, filter layouts are able to render page variables.

Layout Variables

On the bottom right corner of the edit layout dialog, there is a plus icon. Clicking it will add a Layout Variable to the filter. This gives every page that matches the filter a new variable and value, similar to how Template Variables worked per page.

The above example gives all pages in the graph that are tagged with Website the same image as the thumbnail variable value. You could then use this to, for example, give all pages that match a given filter the same preview image.

On the bottom left, you could toggle and delete a given layout variable. Toggling a layout variable as "Dynamic" will allow you to write JavaScript code for the variable that has access to the graph. This could be used to give a specific variable to all pages that match a filter, but for that value to be dynamic based on the page's uid.