2.9 KiB
2.9 KiB
Landing Page Models
Overview
The Landing Page module provides a WYSIWYG page builder with GrapesJS editor integration, reusable block library, and MkDocs export functionality.
Models (2):
- LandingPage — GrapesJS editor output with MkDocs export
- PageBlock — Reusable block library
Key Features:
- GrapesJS WYSIWYG editor (desktop only)
- Visual + code editor modes
- MkDocs export (THEMED vs STANDALONE modes)
- SEO metadata (title, description, image)
- Reusable block library (6 default blocks)
- Jinja2 Material theme integration
See Schema Reference for complete field listings.
Editor Modes
enum EditorMode {
VISUAL // GrapesJS visual editor (default)
CODE // Raw HTML/CSS code editor
}
MkDocs Export Modes
enum MkdocsExportMode {
THEMED // Extends main.html, content block only (default)
STANDALONE // Full HTML document, no Jinja2 inheritance
}
THEMED Mode:
{% extends "main.html" %}
{% block content %}
<div class="landing-page">
<!-- Page HTML here -->
</div>
{% endblock %}
STANDALONE Mode:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Full HTML document -->
</head>
<body>
<!-- Page HTML here -->
</body>
</html>
Page Blocks (6 default)
1. Hero Section (Headers)
- Schema: title, subtitle, backgroundImage, ctaText, ctaUrl
- Defaults: "Welcome to Our Campaign", "Get Involved"
2. Text Block (Content)
- Schema: heading, body
- Defaults: "About Us", "Tell your story here..."
3. Features Grid (Content)
- Schema: features[] (title, description, icon)
- Defaults: 3 features (Community Action, Advocacy, Volunteer)
4. Call to Action (Actions)
- Schema: heading, description, buttonText, buttonUrl
- Defaults: "Ready to Take Action?", "Join Now"
5. Testimonials (Content)
- Schema: quotes[] (text, author, role)
- Defaults: 2 quotes
6. Contact Form (Actions)
- Schema: heading, fields[] (name, type, required)
- Defaults: Name, Email, Message fields
GrapesJS JSON Format
blocks Field:
{
"pages": [
{
"id": "page-main",
"component": {
"type": "wrapper",
"components": [
{
"tagName": "section",
"classes": ["hero"],
"components": [
{
"tagName": "h1",
"content": "Welcome to Our Campaign"
}
]
}
]
}
}
]
}
Related Documentation
- Schema Reference — Complete field listings
- Seeding — Default page blocks
- API Pages Routes — REST endpoints
- Admin Landing Pages — Page list UI
- Admin Page Editor — GrapesJS editor UI
- Public Landing Page — Public page renderer