Defining Platen Features

Defining Features (defining)

Platen and its modules include several features that you can use in your site. These settings control their behavior.

JSON Schema

Definition
{
  "$id": "https://platen.io/modules/platen/config/site/features/defining/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Settings that control Platen's features\n\nhttps://platen.io/modules/platen/config/site/features/defining/",
  "properties": {
    "enabled": {
      "default": true,
      "description": "Choose whether the feature is turned on.\n\nhttps://platen.io/modules/platen/config/site/features/defining/#enabled",
      "title": "Enable the Feature",
      "type": "boolean"
    },
    "partials": {
      "description": "Define a map of partials for Platen to inject as needed.\n\nhttps://platen.io/modules/platen/config/site/features/defining/#partials",
      "properties": {
        "header": {
          "description": "Injects a partial into the HTML header.\n\nhttps://platen.io/modules/platen/config/site/features/defining/#header",
          "title": "Header Partial",
          "type": "string"
        },
        "menu": {
          "description": "Defines a partial for injection in the site menu.\n\nhttps://platen.io/modules/platen/config/site/features/defining/#menu",
          "title": "Menu Partial",
          "type": "string"
        },
        "renderers": {
          "$ref": "https://platen.io/modules/platen/config/site/features/renderers/schema.json"
        },
        "style": {
          "description": "Injects a partial into the site's SCSS.\n\nhttps://platen.io/modules/platen/config/site/features/defining/#style",
          "title": "Style Partial",
          "type": "string"
        },
        "title": {
          "description": "Injects a partial to override the default HTML header title.\n\nhttps://platen.io/modules/platen/config/site/features/defining/#title",
          "title": "Title Partial",
          "type": "string"
        }
      },
      "title": "Feature Partials",
      "type": "object"
    }
  },
  "title": "Defining Features",
  "type": "object"
}

Enable the Feature (enabled)

Choose whether the feature is turned on. The default is true. When this value is set to false, the feature is ignored by Platen.

Feature Partials (partials)

Define a map of partials for Platen to inject as needed. These partials are only injected when enabled is set to true.

Header Partial (header)

If specified, this partial is processed in the HTML header. This is useful for adding standalone styles, scripts, and metadata. To add a style that uses the SCSS style modules defined in the theme settings, add a new map to theme.styles or specify a style partial for the feature.

The partial is given the current page’s context.

Menu Partial (menu)

This partial is processed in the platen/menu partial, which defines the site’s menu. This partial is processed several times depending on the [sref:menu] setting.

When this partial is called, it’s passed the current page’s context and the value of the position property currently being processed.

For example, for the menu on the page content/foo/bar.md and from the following configuration:

params:
  platen:
    features:
      my_feature:
        enabled: true
        partials:
          menu: myFeature/platen/foo
        menu:
          before_main:
            apple: true
            entries:
              - first
              - second

The menu will call the myFeature/platen/foo partial after the entries from the menu.before setting in Hugo’s configuration file but before the content added from the root content section by Platen with the page context for foo/bar.md and the value of the before_main configuration item.

There’s no guaranteed ordering for the items added by multiple features and it’s up to each feature to determine ordering for their own menu items in a given position.

To effectively write a partial that takes advantage of Platen’s site menu structure:

  1. The first added element must be an unordered list <ul> element that encloses the rest of the entry. If that element doesn’t have the platen class, extra space will be added above it to separate it from other menu items.

  2. Entries must be placed inside list item (<li>) elements with either a link (<a>) or span (<span>) holding the title for the entry. Use spans only for entries that can’t be navigated to.

  3. Nested items must be placed inside list item (<li>) elements with an unordered list to contain the nested items.

  4. To add the flattened style to an entry with nested items, ensure the entry’s list item element has the platen-section-flat class.

  5. To add the collapsible style to an entry with nested items:

    1. Ensure that the first element inside the list item is an input (<input>) element with the type set to checkbox, a unique id, and the toggle class.

      Note

      To generate a unique id, you can use the md5 function in your partial to create a string unlikely to collide with any others.

    2. Ensure that the second element inside the list item is a label (<label>) element with the for attribute set to the unique id of the input and the classes flex and justify-between.

    3. Inside the label element, add a link element with the href attribute set if the entry is a webpage the site visitor can navigate to or the role attribute set to button if it isn’t. In both cases, set the inner text of the link element to the title for the entry.

    4. Ensure that the next element after the label is an unordered list. Only an unordered list following the label for a collapsible menu entry is collapsed in Platen. Add any scripts or other relevant entries after or inside the unordered list.

    For example, this is a valid collapsible entry:

    <li>
      <input type="checkbox" id="someUniqueID" class="toggle" />
      <label for="someUniqueID" class="flex justify-between">
        <a role="button">My collapsible section</a>
      </label>
      <ul>
        <li><a href="https://some.site/page">Some Site</a></li>
      </ul>
    </li>

Renderer Partials (renderers)

Defines a map of partials to use as Markdown render hooks. Like all partials, these are only processed when enabled is set to true.

Supported renderer partials include:

  • codeblock, processed for fenced code blocks with a language ID
  • heading, processed for headings
  • image, processed for image links
  • link, processed for non-image links

In all cases, all renderer partials for enabled features are checked one after the other unless they return a render string. Once an applicable partial returns a render string, no further render hook partials are processed for that specific content.

For more information, see Renderer Partials

Style Partial (style)

If specified, this partial is processed in platen.scss, which defines the site’s style. This partial is processed after the theme’s builtin styles but before the shortcode styles, allowing a shortcode to depend on it.

The partial is given the current page’s context. Note that when importing SCSS modules from this partial, the path is relative to styles/platen.scss, not the root of the assets folder. To import an SCSS module in assets/myFeature, you need to specify the path as ../myFeature/foo, not myFeature/foo.

Title Partial (title)

If specified, this partial is called when determining the HTML header title for a page, which sets the name of the browser tab and is used in Open Graph.

The partial is given the current page’s context and must return a string.

The title implementation for Platen processes every enabled feature with a defined title partial until one of them returns a non-empty string. If the title for a page shouldn’t be overridden from the default, the partial must return an empty string (""). The order the title partials are processed in isn’t deterministic.

Edit this page