Skip to content

Templates

Templates define the layout structure for landing pages and website sections by organizing components into header, main, and footer areas. Templates support inheritance through base templates and component composition.

Basic Template Management

Creating Templates

Create a basic site template:

import konigle

# Initialize client
client = konigle.Client(api_key="your-api-key")

# First, get component IDs from your components
components = client.components.list()
header_component_id = components.payload[0].id  # Use actual component ID
hero_component_id = components.payload[1].id    # Use actual component ID
footer_component_id = components.payload[2].id  # Use actual component ID

# Create a simple landing page template with JSON layout
template_data = konigle.models.TemplateCreate(
    name="Basic Landing Page",
    handle="basic-landing",
    layout={
        "header": {
            "blocks": {
                "header_block": {
                    "type": "component",
                    "component_id": header_component_id,
                    "name": "Header Navigation"
                }
            },
            "order": ["header_block"]
        },
        "main": {
            "blocks": {
                "hero_block": {
                    "type": "component",
                    "component_id": hero_component_id,
                    "name": "Hero Section"
                }
            },
            "order": ["hero_block"]
        },
        "footer": {
            "blocks": {
                "footer_block": {
                    "type": "component",
                    "component_id": footer_component_id,
                    "name": "Site Footer"
                }
            },
            "order": ["footer_block"]
        }
    },
)

template = client.templates.create(template_data)
print(f"Created template: {template.id}")

Create Base Template

Create a base template for site-wide elements:

base_template_data = konigle.models.TemplateCreate(
    name="Site Base Template",
    handle="root",
    layout={
        "header": {
            "blocks": {
                "main_header": {
                    "type": "component",
                    "component_id": header_component_id,
                    "name": "Main Header"
                }
            },
            "order": ["main_header"]
        },
        "footer": {
            "blocks": {
                "main_footer": {
                    "type": "component",
                    "component_id": footer_component_id,
                    "name": "Main Footer"
                }
            },
            "order": ["main_footer"]
        }
    },
    is_base=True
)

base_template = client.templates.create(base_template_data)

Templates with Inheritance

Create templates that extend base templates:

# Create a template extending a base template
product_template_data = konigle.models.TemplateCreate(
    name="Product Landing Template",
    handle="product-landing",
    base="tmpl_base_123",  # Reference to base template
    layout={
        "main": {
            "blocks": {
                "product_hero": {
                    "type": "component",
                    "component_id": hero_component_id,
                    "name": "Product Hero"
                },
                "product_features": {
                    "type": "component",
                    "component_id": features_component_id,
                    "name": "Features Section"
                }
            },
            "order": ["product_hero", "product_features"]
        }
    },
    is_base=False
)

product_template = client.templates.create(product_template_data)

Template Operations

List Templates

from konigle.filters.website import TemplateFilters

# List all templates
templates = client.templates.list()

# Filter base templates only
filters = TemplateFilters(is_base=True)
base_templates = client.templates.list(filters=filters)

# Search templates by name/handle
filters = TemplateFilters(q="landing")
landing_templates = client.templates.list(filters=filters)

Get Template Details

# Get template by ID
template = client.templates.get("tmpl_123456789")
print(f"Template: {template.name}")
print(f"Handle: {template.handle}")

# Access layout structure
if template.layout:
    if template.layout.header:
        print(f"Header blocks: {len(template.layout.header.blocks)}")
    if template.layout.main:
        print(f"Main blocks: {len(template.layout.main.blocks)}")
    if template.layout.footer:
        print(f"Footer blocks: {len(template.layout.footer.blocks)}")

Update Templates

# Update template layout
update_data = konigle.models.TemplateUpdate(
    name="Enhanced Landing Page",
    layout={
        "main": {
            "blocks": {
                "enhanced_hero": {
                    "type": "component",
                    "component_id": new_hero_component_id,
                    "name": "Enhanced Hero"
                }
            },
            "order": ["enhanced_hero"]
        }
    }
)

updated_template = client.templates.update("tmpl_123456789", update_data)

The layout updates should provide the full desired structure without which the previous layout will be replaced.

Delete Templates

# Delete template
client.templates.delete("tmpl_123456789")

CLI Usage

Use the CLI for quick template management:

# Create template with inline layout JSON
konigle templates create \
  --name "Landing Page" \
  --handle "landing-page" \
  --layout '{"main": {"blocks": {"hero": {"type": "component", "component_id": "comp_123", "name": "Hero"}}, "order": ["hero"]}}'

# Create template with layout file
konigle templates create \
  --name "Product Template" \
  --handle "product-template" \
  --layout-file ./layouts/product-layout.json

# List templates
konigle templates list --query landing --is-base

# Get template details
konigle templates get tmpl_123456789

# Update template with layout file
konigle templates update tmpl_123456789 \
  --name "Updated Landing Page" \
  --layout-file ./layouts/updated-layout.json

# Delete template
konigle templates delete tmpl_123456789 --confirm

Layout Structure

Templates use a simple three-segment structure:

  • header: Top section containing navigation, logos, etc.
  • main: Primary content area with multiple blocks
  • footer: Bottom section with links, copyright, etc.

Each segment contains:

  • blocks: Dictionary of named component blocks
  • order: List defining the display order of blocks

Block keys must contain only lowercase letters, numbers, and underscores.

Site templates provide the structural foundation for creating consistent, professional landing pages and website sections using reusable components.