PureWiki utilizes a straightforward, PHP-based templating system for rendering the public frontend. This system prioritizes simplicity and performance over complex template languages like Twig or Blade.

Architecture

Themes are located in the themes/ directory. The core layout file is always named page.php.

Directory Structure

themes/default/
├── page.php          # Main layout file
├── other-layout.php  # Optional: further layouts, selectable per page
├── elements/         # Reusable HTML snippets
│   ├── header.php
│   ├── content.php
│   └── footer.php
├── style.css         # Stylesheet
├── script.js         # Theme script
└── theme.json        # Optional: adjustable theme colors

Placeholders and Variables

Placeholders are denoted by {{ variable_name }}. The renderer replaces these during the build process.

Available System Variables

• {{ content }}: The rendered HTML content of the page blocks.
• {{ title }}: The page title in the format set in the SEO settings (for the <title> tag).
• {{ page_title }}: The title of the current page.
• {{ description }}: The description of the current page.
• {{ tags }}: The tags of the page as a list.
• {{ wiki_name }}: The name configured in global settings.
• {{ wiki_description }}: The global wiki description.
• {{ wiki_logo }}: URL to the wiki logo.
• {{ wiki_favicon }}: URL to the favicon.
• {{ author }}: The last author who saved the page.
• {{ date_created }} / {{ date_modified }}: Localized date strings.
• {{ date_created_iso }} / {{ date_modified_iso }}: ISO format (Y-m-d).
• {{ current_year }}: Useful for copyright footers.
• {{ current_theme }}: Name of the active theme folder.
• {{ theme_url }}: URL of the active theme folder, for CSS, JS and images.
• {{ base_url }}: Link target of the logo: the root of the current language.
• {{ pw_base_path }}: Installation path, empty unless PureWiki runs in a subdirectory.
• {{ context_path }}: Relative URL path of the current page.
• {{ nav_links }}: The navigation links of pages shown in the header.
• {{ show_left_sidebar }} / {{ show_right_sidebar }}: Whether the sidebars are visible on this page.
• {{ assets_head }}: Injects CSS and head-scripts (Required in <head>).
• {{ assets_footer }}: Injects footer scripts (Required before </body>).

Conditional Logic

The renderer supports simple {{ if variable }} and {{ endif }} blocks.

{{ if show_left_sidebar }}
  <aside>
    {{ virtual:left_sidebar }}
  </aside>
{{ endif }}

Virtual Pages and Macros

Themes rely on Virtual Pages ({{ virtual:name }}) for global content and Macros ({{ macro:name }}) for dynamic logic like search or navigation.

Layout Templates

Besides page.php, a theme can contain more layout files. The Layout Template setting of a page selects the file by name, see Page Settings. If the file does not exist, page.php is used.

Theme Colors

A theme can offer colors that administrators change under Global Settings > Appearance > Theme Colors, separately for light and dark mode. The colors are declared in theme.json:

{
    "colors": {
        "--pw-primary": {
            "label": "settings.theme_color_primary",
            "light": "#0172ad",
            "dark": "#3fa9dd"
        }
    }
}

• Key: The CSS custom property to override.
• label: A language key or plain text for the label in the settings. Available keys are settings.theme_color_primary, settings.theme_color_background and settings.theme_color_text.
• light / dark: The default colors as six-digit hex values.

For every color that differs from its default, PureWiki adds an override to the head, for example :root{--pw-primary:light-dark(#ff0000,#ff4242)}. The stylesheet therefore has to use the variable and set color-scheme so light-dark() works. A theme without theme.json has no adjustable colors.

Default Theme

The default theme is written in plain CSS without a framework. It reads its design from CSS variables in :root. The adjustable base colors are the source for derived colors, which follow automatically when a color changes.

Light and dark mode use light-dark(). Without a choice, the theme follows the system setting. The toggle in the header sets data-theme="light" or data-theme="dark" on the <html> element and stores the choice in the browser. Custom CSS and landing pages can use the same variables.