# Inheritance

URL: /docs/syntax/inheritance/
Section: syntax
Tags: syntax, inheritance

--------------------------------------------------------------------------------

Inheritance Template inheritance lets you build a base template with common structure and override specific sections in child templates. Note: Unlike Jinja2, Kida does not support super(). Child blocks fully replace parent content. For &quot;add-to&quot; patterns, define explicit extension blocks in your base template (e.g., &#123;% block extra_head %&#125;&#123;% end %&#125;). Base Template Create a base template with blocks that can be overridden: {# base.html #} &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&#123;% block title %&#125;My Site&#123;% end %&#125;&lt;/title&gt; &#123;% block head %&#125;&#123;% end %&#125; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &#123;% block header %&#125; &lt;h1&gt;My Site&lt;/h1&gt; &lt;nav&gt;&#123;% block nav %&#125;&#123;% end %&#125;&lt;/nav&gt; &#123;% end %&#125; &lt;/header&gt; &lt;main&gt; &#123;% block content %&#125;&#123;% end %&#125; &lt;/main&gt; &lt;footer&gt; &#123;% block footer %&#125; &lt;p&gt;&amp;copy; 2024&lt;/p&gt; &#123;% end %&#125; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; Child Template Extend the base and override blocks: {# page.html #} &#123;% extends &quot;base.html&quot; %&#125; &#123;% block title %&#125;About - My Site&#123;% end %&#125; &#123;% block content %&#125; &lt;h2&gt;About Us&lt;/h2&gt; &lt;p&gt;Welcome to our site!&lt;/p&gt; &#123;% end %&#125; Result: The child template inherits all of base.html, with the title and content blocks replaced. Real-World Examples Documentation Site A three-column documentation layout extending a base template: {# layouts/base.html #} &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;&#123;% block title %&#125;Docs&#123;% end %&#125;&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/main.css&quot;&gt; &#123;% block extra_head %&#125;&#123;% end %&#125; &lt;/head&gt; &lt;body&gt; &lt;header&gt;&#123;% include &quot;partials/nav.html&quot; %&#125;&lt;/header&gt; &lt;main&gt;&#123;% block content %&#125;&#123;% end %&#125;&lt;/main&gt; &lt;footer&gt;&#123;% include &quot;partials/footer.html&quot; %&#125;&lt;/footer&gt; &#123;% block extra_scripts %&#125;&#123;% end %&#125; &lt;/body&gt; &lt;/html&gt; {# layouts/docs.html #} &#123;% extends &quot;layouts/base.html&quot; %&#125; &#123;% block content %&#125; &lt;div class=&quot;docs-layout&quot;&gt; &lt;nav class=&quot;docs-sidebar&quot;&gt; &#123;% block sidebar %&#125; &#123;% include &quot;partials/docs-nav.html&quot; %&#125; &#123;% end %&#125; &lt;/nav&gt; &lt;article class=&quot;docs-content&quot;&gt; &lt;h1&gt;&#123;% block page_title %&#125;&#123;% end %&#125;&lt;/h1&gt; &#123;% block article %&#125;&#123;% end %&#125; &lt;/article&gt; &lt;aside class=&quot;docs-toc&quot;&gt; &#123;% block toc %&#125;&#123;% end %&#125; &lt;/aside&gt; &lt;/div&gt; &#123;% end %&#125; {# pages/getting-started.html #} &#123;% extends &quot;layouts/docs.html&quot; %&#125; &#123;% block title %&#125;Getting Started - MyProject&#123;% end %&#125; &#123;% block page_title %&#125;Getting Started&#123;% end %&#125; &#123;% block article %&#125; &lt;p&gt;Welcome to the quick start guide.&lt;/p&gt; {{ content }} &#123;% end %&#125; &#123;% block toc %&#125; &lt;nav class=&quot;toc&quot;&gt; &lt;h3&gt;On this page&lt;/h3&gt; {{ toc_html }} &lt;/nav&gt; &#123;% end %&#125; Extension Blocks Pattern Since Kida doesn't support super(), use explicit extension blocks to add content without replacing the parent: {# base.html #} &lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/base.css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/theme.css&quot;&gt; &#123;% block extra_head %&#125;&#123;% end %&#125; {# Extension point #} &lt;/head&gt; &lt;body&gt; &#123;% block content %&#125;&#123;% end %&#125; &lt;script src=&quot;/js/main.js&quot;&gt;&lt;/script&gt; &#123;% block extra_scripts %&#125;&#123;% end %&#125; {# Extension point #} &lt;/body&gt; {# blog/post.html #} &#123;% extends &quot;base.html&quot; %&#125; &#123;% block extra_head %&#125; {# Adds to head without replacing base styles #} &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/syntax-highlight.css&quot;&gt; &lt;meta property=&quot;og:title&quot; content=&quot;{{ post.title }}&quot;&gt; &#123;% end %&#125; &#123;% block content %&#125; &lt;article class=&quot;blog-post&quot;&gt; &lt;h1&gt;{{ post.title }}&lt;/h1&gt; &lt;time&gt;{{ post.date | dateformat }}&lt;/time&gt; {{ post.content }} &lt;/article&gt; &#123;% end %&#125; &#123;% block extra_scripts %&#125; {# Adds to scripts without replacing main.js #} &lt;script src=&quot;/js/syntax-highlight.js&quot;&gt;&lt;/script&gt; &#123;% end %&#125; Blog with Author Layout Multi-level inheritance for a blog: {# layouts/base.html #} &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&#123;% block title %&#125;Blog&#123;% end %&#125;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &#123;% block body %&#125;&#123;% end %&#125; &lt;/body&gt; &lt;/html&gt; {# layouts/blog.html #} &#123;% extends &quot;layouts/base.html&quot; %&#125; &#123;% block body %&#125; &lt;div class=&quot;blog-container&quot;&gt; &lt;aside class=&quot;blog-sidebar&quot;&gt; &#123;% block sidebar %&#125; &#123;% include &quot;partials/recent-posts.html&quot; %&#125; &#123;% end %&#125; &lt;/aside&gt; &lt;main class=&quot;blog-main&quot;&gt; &#123;% block main %&#125;&#123;% end %&#125; &lt;/main&gt; &lt;/div&gt; &#123;% end %&#125; {# blog/post.html #} &#123;% extends &quot;layouts/blog.html&quot; %&#125; &#123;% block title %&#125;{{ post.title }} - Blog&#123;% end %&#125; &#123;% block main %&#125; &lt;article&gt; &lt;header&gt; &lt;h1&gt;{{ post.title }}&lt;/h1&gt; &lt;p class=&quot;byline&quot;&gt; By &lt;a href=&quot;{{ post.author.url }}&quot;&gt;{{ post.author.name }}&lt;/a&gt; on {{ post.date | dateformat(&#x27;%B %d, %Y&#x27;) }} &lt;/p&gt; &lt;/header&gt; &lt;div class=&quot;post-content&quot;&gt; {{ post.content }} &lt;/div&gt; &lt;footer&gt; &#123;% for tag in post.tags %&#125; &lt;a href=&quot;/tags/{{ tag }}/&quot; class=&quot;tag&quot;&gt;{{ tag }}&lt;/a&gt; &#123;% end %&#125; &lt;/footer&gt; &lt;/article&gt; &#123;% end %&#125; Block Scoping Blocks can be nested: {# base.html #} &#123;% block sidebar %&#125; &lt;aside&gt; &#123;% block sidebar_content %&#125; Default sidebar &#123;% end %&#125; &lt;/aside&gt; &#123;% end %&#125; {# child.html #} &#123;% extends &quot;base.html&quot; %&#125; &#123;% block sidebar_content %&#125; Custom sidebar content &#123;% end %&#125; Multiple Levels Inheritance can be multi-level. Each child completely replaces the parent's block: {# base.html #} &#123;% block content %&#125;Base&#123;% end %&#125; {# layout.html #} &#123;% extends &quot;base.html&quot; %&#125; &#123;% block content %&#125; &lt;div class=&quot;layout&quot;&gt;Layout content&lt;/div&gt; &#123;% end %&#125; {# page.html #} &#123;% extends &quot;layout.html&quot; %&#125; &#123;% block content %&#125; &lt;div class=&quot;layout&quot;&gt; &lt;p&gt;Page content&lt;/p&gt; &lt;/div&gt; &#123;% end %&#125; Dynamic Extends The parent template can be a variable: &#123;% extends parent_template %&#125; &#123;% block content %&#125; Dynamic parent! &#123;% end %&#125; template.render(parent_template=&quot;layouts/wide.html&quot;) Block Inside Loops Blocks cannot be defined inside loops or conditionals. This is intentional—blocks are resolved at compile time. {# ❌ Invalid #} &#123;% for item in items %&#125; &#123;% block item %&#125;{{ item }}&#123;% end %&#125; &#123;% end %&#125; {# ✅ Valid: Use a function instead #} &#123;% def render_item(item) %&#125; &lt;div&gt;{{ item }}&lt;/div&gt; &#123;% end %&#125; &#123;% for item in items %&#125; {{ render_item(item) }} &#123;% end %&#125; Best Practices Descriptive Block Names {# Good #} &#123;% block page_title %&#125;&#123;% end %&#125; &#123;% block sidebar_navigation %&#125;&#123;% end %&#125; &#123;% block footer_copyright %&#125;&#123;% end %&#125; {# Avoid #} &#123;% block b1 %&#125;&#123;% end %&#125; &#123;% block content2 %&#125;&#123;% end %&#125; Default Content Provide sensible defaults in base templates: &#123;% block meta_description %&#125; &lt;meta name=&quot;description&quot; content=&quot;Default site description&quot;&gt; &#123;% end %&#125; Template Hierarchy base.html ← Site-wide structure ├── docs.html ← Documentation layout │ └── tutorial.html ← Tutorial-specific ├── blog.html ← Blog layout │ └── post.html ← Single post └── home.html ← Homepage See Also Includes — Include partials Functions — Reusable template functions Loading Templates — Template loaders

--------------------------------------------------------------------------------

Metadata:
- Word Count: 923
- Reading Time: 5 minutes