Core Concepts: Built-in Page Variables
During the build phase, Coralite automatically injects several context variables into the values object of your components. These variables provide essential information about the current page's URL and file path, making it easy to create dynamic logic like highlighting active navigation links or generating breadcrumbs.
These core variables all follow the page_* snake_case naming convention and are provided natively by the framework.
Available Page Variables #
page_url_pathname: The final URL path that the user navigates to (e.g.,/docs/guide/page-variables.html).page_url_dirname: The directory component of the URL path (e.g.,/docs/guide).page_pathname: The physical file path name relative to your pages directory (e.g.,docs/guide/page-variables.html).page_dirname: The physical directory name of the source page file (e.g.,docs/guide).page_filename: The filename of the source page file (e.g.,page-variables.html).
Metadata Variables #
In addition to the path-related variables, if you are using the built-in metadata plugin, it injects the following special variables from the page's <head>:
page_title: Extracted from the page's<title>tag.page_lang: Extracted from thelangattribute on the root<html>tag.
Example Usage #
Because these variables are injected directly into the values object, you can reference them seamlessly within your components using tokens or computed properties.
Here is an example of a navigation link component that automatically adds an "active" class if the current URL matches its target URL:
<!-- src/components/nav-link.html -->
<template id="nav-link">
<a href="{{ href }}" class="link {{ activeClass }}">
<slot></slot>
</a>
</template>
<script type="module">
import { defineComponent } from 'coralite/plugins'
export default defineComponent({
tokens: {
// Computed token that checks if the href prop matches the current URL
activeClass: (values) => (values.href === values.page_url_pathname ? 'active' : '')
}
})
</script>You can also use these variables purely declaratively inside your static templates:
<!-- src/components/page-info.html -->
<template id="page-info">
<div class="page-info-box">
<p>Current URL: <strong>{{ page_url_pathname }}</strong></p>
<p>Source File: <strong>{{ page_filename }}</strong></p>
<p>Language: <strong>{{ page_lang }}</strong></p>
</div>
</template>