page_type_markers

What it does

Most Drupal themes end up sprinkled with selectors like .page-node-type-product .has-side-image or JavaScript blocks like if (location.pathname === '/contact'). This module gives you a single, stable, taxonomy-managed key per page that survives renames, URL changes and content type refactors.

The result is a data-page-type attribute on every rendered body:

body data-page-type="system.site:page.404" 

You define the catalogue once as taxonomy terms — then themes, JS and analytics target pages by function, not by URL or content type id.

Features

• Taxonomy-managed catalogue of page types (Semantic Pages vocabulary).
• One reference field (field_semantic_page_type) attached to every content type. New content types receive it automatically via hook_node_type_insert.
• Resolution order:
  1. Node's field_semantic_page_type → referenced term key.
  2. Bundle default configured in the content-type form or in /admin/config/system/semantic-page-type.
  3. Built-in route catalog: 404, 403, login, register, password reset, user profile.
• Editor-friendly UI:
  • On node edit forms the field appears as a collapsible vertical tab in the sidebar, next to Menu settings, URL alias, etc.
  • Combobox widget with searchable dropdown — HTML5 datalist, no JavaScript dependency.
  • Inline validation: typing an unknown term name surfaces a clear error.
• Auto-mapped system routes — no configuration needed for the common ones: system.404, system.403, user.login, user.register, user.pass, entity.user.canonical. Override only the ones you want.
• Single source of truth: bundle defaults persist on the FieldConfig default_value, so the content-type form, the module settings form and the node edit form stay in sync.
• Cache-aware: invalidates the body attribute via the config:semantic_page_type.settings cache tag.

Requirements

• Drupal 10.3+ or Drupal 11
• Core modules: taxonomy, node, field, options

Installation

composer require drupal/semantic_page_type
drush en semantic_page_type

The install hook will:

1. Create the semantica vocabulary if it does not already exist.
2. Install field_semantic_page_type (entity reference to taxonomy terms) and field_semantic_key (optional override on terms).
3. Attach field_semantic_page_type to every existing content type.

Configuration

Once enabled, populate the vocabulary with the page types your project needs. The term name is the technical key that ends up in the data-page-type attribute.

A common starting set:

Term name Suggested label system.site:page.home Home system.site:page.404 Not found system.site:page.403 Access denied system.site:page.login Sign in system.site:page.article Blog article system.site:page.product Product detail system.site:page.contact Contact system.site:page.search Search results

Then configure defaults in Configuration → System → Semantic Page Type (/admin/config/system/semantic-page-type):

• Default per content type — pick a fallback term per content type.
• System pages — override the built-in route catalog only when needed; the catalog already maps system.404 → system.site:page.404, and so on.

To pre-populate a specific term on every new node of a given type, edit the content type itself (Structure → Content types → edit) and use the Semantic Page Type vertical tab.

Theming usage

CSS:

body[data-page-type="system.site:page.404"] .helpful-links {
  display: block;
}

body[data-page-type^="system.site:page.product"] {
  --page-bg: #fafafa;
}

JavaScript:

if (document.body.dataset.pageType === 'system.site:page.login') {
  // Track login impressions, focus the username field, etc.
}

Extending

The catalog of system routes is exposed as SemanticPageTypeResolver::ROUTE_DEFAULTS. Override individual entries from the settings form, or implement your own SemanticPageTypeResolverInterface and decorate the semantic_page_type.resolver service.

Translation

UI strings ship in English. A Spanish translation is included in translations/es.po. Drupal core's locale module picks it automatically on Spanish-language sites.