Core Concepts: Built-in Page Variables
During the build phase, Coralite automatically injects several context variables into the state 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.
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).
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.
Because these variables are injected directly into the state object, you can reference them seamlessly within your components using tokens or getters.
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'
export default defineComponent({
attributes: {
href: { type: String }
},
getters: {
// Getter that checks if the href matches the current URL
activeClass: (state) => (state.href === state.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>