Templates NEW HTML starter

Usage in Nunjucks layout:

{% extends 'blades/html.njk' %}

{% block body %}...{% endblock %}

Live examples:

#}


How it works

/anyblades/blades/refs/heads/main/_includes/blades/html.njk :

<!doctype html>
<html lang="{{ site.lang | d('en') }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />

    <title>{{ title | striptags }}{{ ' | ' if title and site.title }}{{ site.title }}</title>
    <meta name="description" content="{{ description | striptags }}" />

    <link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />
    {%- for href in site.styles %}
      <link rel="stylesheet" href="{{ href }}" />
    {%- endfor %}
    {%- for src in site.scripts %}
      <script src="{{ src }}" defer></script>
    {%- endfor %}

    {{ content_for_header | safe }}
    {{ site.head_extras | d([]) | join('\n') | safe }}
  </head>

  <body {{ site.body_attrs | safe }}>
    {% block body %}
      <main>
        <h1>{{ title }}</h1>
        {{ content | safe }}
      </main>
    {% endblock %}

    {{ site.body_extras | d([]) | join('\n') | safe }}
  </body>
</html>

Usage in Liquid layout:

{% capture body %}...{% endcapture %}

{% include blades/html.liquid %}

Live example: /anyblades/buildawesome-starters/blob/main/site-liquid/_includes/default.liquid


How it works

/anyblades/blades/refs/heads/main/_includes/blades/html.liquid :

<!doctype html>
<html lang="{{ site.lang | default: 'en' }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
    {% # prettier-ignore %}
    <title>{{ title | strip_html }}{% if title and site.title %} | {% endif %}{{ site.title }}</title>
    <meta name="description" content="{{ description | strip_html }}">

    <link rel="icon" href="{{ site.favicon | default: '/favicon.ico' }}">
    {%- for href in site.styles %}
      <link rel="stylesheet" href="{{ href | relative_url }}">
    {%- endfor %}
    {%- for src in site.scripts %}
      <script src="{{ src }}" defer></script>
    {%- endfor %}

    {{ content_for_header }}
    {{ site.head_extras | default: '' | join: '\n' }}
  </head>

  <body {{ site.body_attrs }}>
    {% if body %}
      {{ body }}
    {% else %}
      <main>
        <h1>{{ title }}</h1>
        {{ content }}
      </main>
    {% endif %}

    {{ site.body_extras | default: '' | join: '\n' }}
  </body>
</html>
{% # prettier-ignore %}
{% comment %}```

Usage in Twig layout:

{% extends 'blades/html.twig' %}

{% block body %}...{% endblock %}

Pass site, title and description via the render context.

#}


How it works

/anyblades/blades/refs/heads/main/_includes/blades/html.twig :

<!doctype html>
<html lang="{{ site.lang|default('en') }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />

    <title>{{ title|striptags }}{% if title and site.title %} | {% endif %}{{ site.title }}</title>
    <meta name="description" content="{{ description|striptags }}" />

    <link rel="icon" href="{{ site.favicon|default('/favicon.ico') }}" />
    {%- for href in site.styles %}
      <link rel="stylesheet" href="{{ href }}" />
    {%- endfor %}
    {%- for src in site.scripts %}
      <script src="{{ src }}" defer></script>
    {%- endfor %}

    {{ content_for_header|raw }}
    {{ site.head_extras|default([])|join('\n')|raw }}
  </head>

  <body {{ site.body_attrs|raw }}>
    {% block body %}
      <main>
        <h1>{{ title }}</h1>
        {{ content|raw }}
      </main>
    {% endblock %}

    {{ site.body_extras|default([])|join('\n')|raw }}
  </body>
</html>