Default theme: Move elements into Twig blocks

Allows plugins to extend the default template
9 years ago · a3fa373119
parent 86614a3ab4
commit a3fa373119
1 changed files with 53 additions and 37 deletions
--- a/themes/default/index.twig
+++ b/themes/default/index.twig
@ -1,25 +1,33 @@
 <!DOCTYPE html>
-<html lang="en" class="no-js">
+<html class="no-js">
 <head>
    <meta charset="utf-8" />

-    <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+    {% block documentHeader %}
+        <title>{% block title %}{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}{% endblock %}</title>
        {% if meta.description %}
            <meta name="description" content="{{ meta.description|striptags }}">
        {% endif %}{% if meta.robots %}
            <meta name="robots" content="{{ meta.robots }}">
        {% endif %}
+    {% endblock %}

+    {% block stylesheets %}
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css" />
        <link rel="stylesheet" href="{{ theme_url }}/style.css" type="text/css" />
+    {% endblock %}

+    {% block javascript %}
        <script src="{{ theme_url }}/scripts/modernizr-2.6.1.min.js"></script>
+    {% endblock %}
 </head>
 <body>

+    {% block pageHeader %}
        <header id="header">
            <div class="inner clearfix">
                <h1><a href="{{ "index"|link }}" id="logo">{{ site_title }}</a></h1>
+                {% block header %}
                    <nav>
                        <a href="#" class="menu-icon"></a>
                        <ul>
@ -30,22 +38,30 @@
                            {% endfor %}
                        </ul>
                    </nav>
+                {% endblock %}
            </div>
        </header>
+    {% endblock %}

+    {% block pageContent %}
        <section id="content">
            <div class="inner">
-            {{ content }}
+                {% block content content %}
            </div>
        </section>
+    {% endblock %}

+    {% block pageFooter %}
        <footer id="footer">
            <div class="inner">
+                {% block footer %}
                    <a href="http://picocms.org/">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a>
                    and is maintained by <a href="https://github.com/picocms/Pico/graphs/contributors">The Pico Community</a>.
                    Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
+                {% endblock %}
            </div>
        </footer>
+    {% endblock %}

 </body>
 </html>