{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"customize-page-templates","__idx":0},"children":["Customize page templates"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Custom page templates is a feature that allows you to create more complex templates for your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".md"]}," pages."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the default template, you have main content in the left column and Table of Content (TOC) on the right."," ","The TOC can be disabled by theme config."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["But there may be types of pages where you would want to display some additional metadata."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Let's consider a blog post page as an example."," ","On that page except the text of the blog itself you may want to display:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["information about the author"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["length of the article"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["published date"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["related articles or just newer/older articles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["list of search tags"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["etc."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Also you need to know how you want to display that additional information."," ","Here's where you can use custom page templates."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"about-custom-templates","__idx":1},"children":["About custom templates"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A custom page template is a regular react component."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The file that defines that component should be placed within the custom theme structure (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/Templates/YourTemplate"]},")."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Below is a simplified example of a blog page template:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"import React from 'react';\nimport { Markdown as MarkdownWrapper } from '@redocly/theme/components/Markdown/Markdown';\nimport { PostInfo } from '../Blog/PostInfo';\nexport default function BlogPost({ pageProps, children }) {\n  return (\n    <Wrapper data-component-name=\"Templates/BlogPost\">\n      <PostInfo data={pageProps.frontmatter} />\n      <MarkdownWrapper>{children}</MarkdownWrapper>\n    </Wrapper>\n  );\n}\n","lang":"jsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-to-apply-a-custom-page-template","__idx":2},"children":["How to apply a custom page template"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can assign a template in one of two ways:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Front matter"]}," — set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["template"]}," on an individual Markdown page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["markdown.template"]}]}," — map patterns to template paths in the root ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"apply-a-template-to-a-single-page-using-frontmatter","__idx":3},"children":["Apply a template to a single page using frontmatter"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In your blog file use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["template"]}," property of frontmatter to apply custom template."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," frontmatter can be used to pass any additional data to the template."," ","Please check out the example of blog post page."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","header":{"controls":{"copy":{}}},"source":"---\ntitle: Redocly as Remockly\ntemplate: '../@theme/Templates/BlogPost'\nauthor:\n  name: Adam Altman\n  avatar: https://redocly.com/static/adam-b2e77696e09f69bff10f9bc393f45249.png\ndate: 05-03-2022\ntimeToRead: 10 min\nsidebar: false\n---\n\n## Redocly rebrands as Remockly\n\nThe Redocly brand is synonymous with quality API documentation.\nAnd we're so much more than that.\n\n\"Redocly does much more than API docs.\nWe searched the world far and wide for marketing experts and determined the fastest way to communicate the breadth of our offering is to rename the company,\" said co-founder and CTO Roman Hotsiy.\n\n...\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Redocly as Remockly"]}," blog post will use the custom template located at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/Templates/BlogPost"]},"."," ","Other data like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["author"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["date"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["timeToRead"]}," will be passed to that template in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pageProps.frontmatter"]}," property (see the example of a custom template above)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"apply-templates-in-redoclyyaml","__idx":4},"children":["Apply templates in redocly.yaml"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["markdown.template"]}," in the root ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redocly.yaml"]}," file to assign templates to one or more Markdown files without editing each page."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each key can target files in three ways:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Pattern type"},"children":["Pattern type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Example key"},"children":["Example key"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Matches"},"children":["Matches"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["File path"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'demos/new-api.md'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A single Markdown file"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Folder path"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'blog/drafts'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All Markdown files in that folder and its subfolders"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Glob"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'blog/**'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Files that match the glob pattern"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When multiple patterns match a file, the most specific pattern is applied."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"redocly.yaml","header":{"title":"redocly.yaml","controls":{"copy":{}}},"source":"markdown:\n  template:\n    'blog/**': './@theme/Templates/BlogPost'\n    'blog/drafts': './@theme/Templates/Draft'\n    'demos/new-api.md': './@theme/Templates/SimpleApi'\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Every Markdown file under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blog/"]}," uses the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BlogPost"]}," template."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Files under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blog/drafts/"]}," use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Draft"]}," template instead."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Only ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["demos/new-api.md"]}," uses the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SimpleApi"]}," template."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"examples","__idx":5},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["One column template with metadata above main content"]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/one-column-blog-post-template-da9a26ccc7df95a1.png","alt":"Screenshot of one column blog post template","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Two columns template with metadata on the right"]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/two-columns-blog-post-template-3414a6bfadcd668a.png","alt":"Screenshot of two columns blog post template","framed":true,"withLightbox":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":6},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization"},"children":["Extend with code"]}]}," - Discover customizable components and customization options for your project"]}]}]},"frontmatter":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["configOptionRequirements","img","table"],"title":"Customize page templates","lastModified":"2026-10-01T23:00:57.000Z"}