Fepper Documentation

image/svg+xml

Pattern Links

Pattern pages can link to one another with a simplified syntax not requiring exact paths. This is especially useful when generating a static site, as the linking will be preserved on the static site. The basic syntax is:

 {{ link.[patternType]-[patternName] }}

For example, say you wanted to link an article page to your homepage. If the article were at 04-pages/articles-/00-top-story.mustache, you could write:

<a href="{{ link.pages-top-story }}">Article Headline</a>

In the public/patterns directory, this would be built as:

<a href="../04-pages-articles--00-top-story/04-pages-articles--00-top-story.html">Article Headline</a>

Appending a hyphen (-) to the "articles" directory is just a recommended convention for static sites. The Static Site Generator flattens nested source directories, but the double-hyphen suggests that "articles" categorizes the more specific parts that follow. The final output of the link would be:

<a href="articles--top-story.html">Article Headline</a>
  • Get Started

    • Install
    • Configure
    • Run
    • Edit
    • Update
  • Work with Data

    • Intro to JSON & Mustache
    • Global Data
    • Partial Data
    • Pattern Data
    • Markdown Content
  • Work with Patterns

    • Pattern Organization
    • Pattern Partials
    • Pattern Parameters
    • Pseudo-Patterns
    • Hidden Patterns
    • Global Head and Foot
    • Pattern Links
    • Pattern Annotations
    • Pattern States
  • Advanced Features

    • Code Viewer
    • Requerio Inspector
    • Static Site Generator
    • The Backend
    • Templater
    • Webserved Directories
    • HTML Scraper
    • variables.styl
    • UI Customization
    • Extensions
    • Express App
    • Mobile Devices
    • I18N
    • Keyboard Shortcuts
    • Query String Variables
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
This website is pure frontend hotness, created in Fepper.
  • Homepage
  • Download
  • Documentation
  • Discussion