1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 10:00:52 +01:00

Reformatted HTML templates and moved L10N to inline JSON

This commit is contained in:
squidfunk 2019-11-26 10:03:53 +01:00
parent 0cfd796598
commit b5ad4ac339
11 changed files with 239 additions and 127 deletions

View File

@ -30,19 +30,6 @@
{% elif config.site_author %}
<meta name="author" content="{{ config.site_author }}">
{% endif %}
{% for key in [
"clipboard.copy",
"clipboard.copied",
"search.language",
"search.pipeline.stopwords",
"search.pipeline.trimmer",
"search.result.none",
"search.result.one",
"search.result.other",
"search.tokenizer"
] %}
<meta name="lang:{{ key }}" content="{{ lang.t(key) }}">
{% endfor %}
<link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
<meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-4.4.2">
{% endblock %}
@ -73,9 +60,9 @@
{% if font != false %}
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{
font.text | replace(' ', '+') + ':300,400,400i,700|' +
font.code | replace(' ', '+')
}}&display=fallback">
font.text | replace(' ', '+') + ':300,400,400i,700|' +
font.code | replace(' ', '+')
}}&display=fallback">
<style>body,input{font-family:"{{ font.text }}","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"{{ font.code }}","Courier New",Courier,monospace}</style>
{% endif %}
{% endblock %}
@ -215,6 +202,23 @@
{% endif %}
{% endif %}
{% endif %}
<script id="__lang" type="application/json">
{
{% for key in [
"clipboard.copy",
"clipboard.copied",
"search.language",
"search.pipeline.stopwords",
"search.pipeline.trimmer",
"search.result.none",
"search.result.one",
"search.result.other",
"search.tokenizer"
] -%}
"{{ key }}": "{{ lang.t(key) }}"{{ "," if not loop.last }}
{% endfor %}
}
</script>
<script>app({version:"{{ mkdocs_version }}",url:{base:"{{ base_url }}"}})</script>
{% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script>

View File

@ -51,7 +51,8 @@
<a href="https://www.mkdocs.org">MkDocs</a>
and
<a href="https://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
Material for MkDocs
</a>
</div>
{% include "partials/social.html" %}
</div>

View File

@ -41,8 +41,7 @@
<!-- Page description -->
{% if page and page.meta and page.meta.description %}
<meta name="description"
content="{{ page.meta.description }}" />
<meta name="description" content="{{ page.meta.description }}" />
{% elif config.site_description %}
<meta name="description" content="{{ config.site_description }}" />
{% endif %}
@ -72,28 +71,14 @@
<meta name="author" content="{{ config.site_author }}" />
{% endif %}
<!-- Localization -->
{% for key in [
"clipboard.copy",
"clipboard.copied",
"search.language",
"search.pipeline.stopwords",
"search.pipeline.trimmer",
"search.result.none",
"search.result.one",
"search.result.other",
"search.tokenizer"
] %}
<meta name="lang:{{ key }}" content="{{ lang.t(key) }}" />
{% endfor %}
<!-- Favicon -->
<link rel="shortcut icon"
href="{{ config.theme.favicon | url }}">
<link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
<!-- Generator banner -->
<meta name="generator"
content="mkdocs-{{ mkdocs_version }}, $md-name$-$md-version$" />
<meta
name="generator"
content="mkdocs-{{ mkdocs_version }}, $md-name$-$md-version$"
/>
{% endblock %}
<!-- Site title -->
@ -111,13 +96,19 @@
{% block styles %}
<!-- Theme-related stylesheets -->
<link rel="stylesheet" type="text/css"
href="{{ 'assets/stylesheets/app.css' | url }}" />
<link
rel="stylesheet"
type="text/css"
href="{{ 'assets/stylesheets/app.css' | url }}"
/>
<!-- Extra color palette -->
{% if palette.primary or palette.accent %}
<link rel="stylesheet" type="text/css"
href="{{ 'assets/stylesheets/app-palette.css' | url }}" />
<link
rel="stylesheet"
type="text/css"
href="{{ 'assets/stylesheets/app-palette.css' | url }}"
/>
{% endif %}
<!-- Theme-color meta tag for Android -->
@ -139,11 +130,14 @@
<!-- Load fonts from Google -->
{% if font != false %}
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family={{
font.text | replace(' ', '+') + ':300,400,400i,700|' +
font.code | replace(' ', '+')
}}&display=fallback" />
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family={{
font.text | replace(' ', '+') + ':300,400,400i,700|' +
font.code | replace(' ', '+')
}}&display=fallback"
/>
<style>
body, input {
font-family: "{{ font.text }}", "Helvetica Neue",
@ -158,8 +152,11 @@
{% endblock %}
<!-- Material icons as iconset -->
<link rel="stylesheet" type="text/css"
href="{{ 'assets/fonts/material-icons.css' | url }}" />
<link
rel="stylesheet"
type="text/css"
href="{{ 'assets/fonts/material-icons.css' | url }}"
/>
<!-- Progressive Web App Manifest -->
{% if config.extra.manifest %}
@ -168,8 +165,11 @@
<!-- FontAwesome for social links -->
{% if config.extra.social %}
<link rel="stylesheet" type="text/css"
href="{{ 'assets/fonts/font-awesome.css' | url }}" />
<link
rel="stylesheet"
type="text/css"
href="{{ 'assets/fonts/font-awesome.css' | url }}"
/>
{% endif %}
<!-- Custom stylesheets -->
@ -192,9 +192,11 @@
{% if palette.primary or palette.accent %}
{% set primary = palette.primary | replace(" ", "-") | lower %}
{% set accent = palette.accent | replace(" ", "-") | lower %}
<body dir="{{ lang.t('direction') }}"
data-md-color-primary="{{ primary }}"
data-md-color-accent="{{ accent }}">
<body
dir="{{ lang.t('direction') }}"
data-md-color-primary="{{ primary }}"
data-md-color-accent="{{ accent }}"
>
{% else %}
<body dir="{{ lang.t('direction') }}">
{% endif %}
@ -222,18 +224,31 @@
State toggles - we need to set autocomplete="off" in order to reset the
drawer on back button invocation in some browsers
-->
<input class="md-toggle" data-md-toggle="drawer"
type="checkbox" id="__drawer" autocomplete="off" />
<input class="md-toggle" data-md-toggle="search"
type="checkbox" id="__search" autocomplete="off" />
<input
class="md-toggle"
data-md-toggle="drawer"
type="checkbox"
id="__drawer"
autocomplete="off"
/>
<input
class="md-toggle"
data-md-toggle="search"
type="checkbox"
id="__search"
autocomplete="off"
/>
<!-- Overlay for expanded drawer -->
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<label
class="md-overlay"
data-md-component="overlay"
for="__drawer"
></label>
<!-- Render "skip to content" link -->
{% if page.toc | first is defined %}
<a href="{{ (page.toc | first).url }}" tabindex="1"
class="md-skip">
<a href="{{ (page.toc | first).url }}" tabindex="1" class="md-skip">
{{ lang.t('skip.link.title') }}
</a>
{% endif %}
@ -267,8 +282,10 @@
<!-- Main navigation -->
{% if nav %}
<div class="md-sidebar md-sidebar--primary"
data-md-component="navigation">
<div
class="md-sidebar md-sidebar--primary"
data-md-component="navigation"
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
@ -279,8 +296,10 @@
<!-- Table of contents -->
{% if page.toc %}
<div class="md-sidebar md-sidebar--secondary"
data-md-component="toc">
<div
class="md-sidebar md-sidebar--secondary"
data-md-component="toc"
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
@ -299,9 +318,11 @@
<!-- Edit button, if URL was defined -->
{% if page.edit_url %}
<a href="{{ page.edit_url }}"
title="{{ lang.t('edit.link.title') }}"
class="md-icon md-content__icon">&#xE3C9;<!-- edit --></a>
<a
href="{{ page.edit_url }}"
title="{{ lang.t('edit.link.title') }}"
class="md-icon md-content__icon"
>&#xE3C9;<!-- edit --></a>
{% endif %}
<!--
@ -326,8 +347,11 @@
{% endif %}
{% set path = page.meta.path | default([""]) %}
{% set file = page.meta.source %}
<a href="{{ [repo, path, file] | join('/') }}"
title="{{ file }}" class="md-source-file">
<a
href="{{ [repo, path, file] | join('/') }}"
title="{{ file }}"
class="md-source-file"
>
{{ file }}
</a>
{% endif %}
@ -376,7 +400,24 @@
{% endif %}
{% endif %}
<!-- Initialize application -->
<!-- Translations -->
<script id="__lang" type="application/json">
{
{% for key in [
"clipboard.copy",
"clipboard.copied",
"search.language",
"search.pipeline.stopwords",
"search.pipeline.trimmer",
"search.result.none",
"search.result.one",
"search.result.other",
"search.tokenizer"
] -%}
"{{ key }}": "{{ lang.t(key) }}"{{ "," if not loop.last }}
{% endfor %}
}
</script>
<script>
app({
version: "{{ mkdocs_version }}",

View File

@ -32,16 +32,20 @@
<!-- Link to previous page -->
{% if page.previous_page %}
<a href="{{ page.previous_page.url | url }}"
title="{{ page.previous_page.title | striptags }}"
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
rel="prev">
<a
href="{{ page.previous_page.url | url }}"
title="{{ page.previous_page.title | striptags }}"
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
rel="prev"
>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back
md-footer-nav__button"></i>
<i
class="md-icon md-icon--arrow-back md-footer-nav__button"
></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch
md-footer-nav__title">
<div
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
>
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.previous") }}
@ -54,12 +58,15 @@
<!-- Link to next page -->
{% if page.next_page %}
<a href="{{ page.next_page.url | url }}"
title="{{ page.next_page.title | striptags }}"
class="md-flex md-footer-nav__link md-footer-nav__link--next"
rel="next">
<div class="md-flex__cell md-flex__cell--stretch
md-footer-nav__title">
<a
href="{{ page.next_page.url | url }}"
title="{{ page.next_page.title | striptags }}"
class="md-flex md-footer-nav__link md-footer-nav__link--next"
rel="next"
>
<div
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
>
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.next") }}
@ -68,8 +75,9 @@
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward
md-footer-nav__button"></i>
<i
class="md-icon md-icon--arrow-forward md-footer-nav__button"
></i>
</div>
</a>
{% endif %}
@ -92,7 +100,8 @@
<a href="https://www.mkdocs.org">MkDocs</a>
and
<a href="https://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
Material for MkDocs
</a>
</div>
<!-- Social links -->

View File

@ -29,9 +29,11 @@
<!-- Link to home -->
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}"
class="md-header-nav__button md-logo">
<a
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}"
class="md-header-nav__button md-logo"
>
{% if config.theme.logo.icon %}
<i class="md-icon">{{ config.theme.logo.icon }}</i>
{% else %}
@ -42,14 +44,18 @@
<!-- Button to toggle drawer -->
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button"
for="__drawer"></label>
<label
class="md-icon md-icon--menu md-header-nav__button"
for="__drawer"
></label>
</div>
<!-- Header title -->
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title"
data-md-component="title">
<div
class="md-flex__ellipsis md-header-nav__title"
data-md-component="title"
>
{% if config.site_name == page.title %}
{{ config.site_name }}
{% else %}
@ -70,8 +76,10 @@
<!-- Button to open search dialogue -->
<div class="md-flex__cell md-flex__cell--shrink">
{% if "search" in config["plugins"] %}
<label class="md-icon md-icon--search md-header-nav__button"
for="__search"></label>
<label
class="md-icon md-icon--search md-header-nav__button"
for="__search"
></label>
<!-- Search interface -->
{% include "partials/search.html" %}

View File

@ -32,19 +32,31 @@
<!-- Active checkbox expands items contained within nested section -->
{% if nav_item.active %}
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}"
type="checkbox" id="{{ path }}" checked />
<input
class="md-toggle md-nav__toggle"
data-md-toggle="{{ path }}"
type="checkbox"
id="{{ path }}"
checked
/>
{% else %}
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}"
type="checkbox" id="{{ path }}" />
<input
class="md-toggle md-nav__toggle"
data-md-toggle="{{ path }}"
type="checkbox"
id="{{ path }}"
/>
{% endif %}
<!-- Expand active pages -->
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
</label>
<nav class="md-nav" data-md-component="collapsible"
data-md-level="{{ level }}">
<nav
class="md-nav"
data-md-component="collapsible"
data-md-level="{{ level }}"
>
<label class="md-nav__title" for="{{ path }}">
{{ nav_item.title }}
</label>
@ -67,8 +79,12 @@
{% set toc_ = page.toc %}
<!-- Active checkbox expands items contained within nested section -->
<input class="md-toggle md-nav__toggle" data-md-toggle="toc"
type="checkbox" id="__toc" />
<input
class="md-toggle md-nav__toggle"
data-md-toggle="toc"
type="checkbox"
id="__toc"
/>
<!-- Hack: see partials/toc.html for more information -->
{% if toc_ | first is defined and "\x3ch1 id=" in page.content %}
@ -81,8 +97,11 @@
{{ nav_item.title }}
</label>
{% endif %}
<a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}"
class="md-nav__link md-nav__link--active">
<a
href="{{ nav_item.url | url }}"
title="{{ nav_item.title | striptags }}"
class="md-nav__link md-nav__link--active"
>
{{ nav_item.title }}
</a>
@ -95,8 +114,11 @@
<!-- Main navigation item -->
{% else %}
<li class="{{ class }}">
<a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}"
class="md-nav__link">
<a
href="{{ nav_item.url | url }}"
title="{{ nav_item.title | striptags }}"
class="md-nav__link"
>
{{ nav_item.title }}
</a>
</li>

View File

@ -25,8 +25,11 @@
<!-- Site title -->
<label class="md-nav__title md-nav__title--site" for="__drawer">
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}" class="md-nav__button md-logo">
<a
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
title="{{ config.site_name }}"
class="md-nav__button md-logo"
>
{% if config.theme.logo.icon %}
<i class="md-icon">{{ config.theme.logo.icon }}</i>
{% else %}

View File

@ -27,14 +27,25 @@
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query"
placeholder="{{ lang.t('search.placeholder') }}"
autocapitalize="off" autocorrect="off" autocomplete="off"
spellcheck="false" data-md-component="query"
data-md-state="active" />
<input
type="text"
class="md-search__input"
name="query"
placeholder="{{ lang.t('search.placeholder') }}"
autocapitalize="off"
autocorrect="off"
autocomplete="off"
spellcheck="false"
data-md-component="query"
data-md-state="active"
/>
<label class="md-icon md-search__icon" for="__search"></label>
<button type="reset" class="md-icon md-search__icon"
data-md-component="reset" tabindex="-1">
<button
type="reset"
class="md-icon md-search__icon"
data-md-component="reset"
tabindex="-1"
>
&#xE5CD;<!-- close -->
</button>
</form>

View File

@ -24,8 +24,10 @@
{% if config.extra.social %}
<div class="md-footer-social">
{% for social in config.extra.social %}
<a href="{{ social.link }}" class="md-footer-social__link
fa fa-{{ social.type }}"></a>
<a
href="{{ social.link }}"
class="md-footer-social__link fa fa-{{ social.type }}"
></a>
{% endfor %}
</div>
{% endif %}

View File

@ -38,8 +38,12 @@
{% endif %}
<!-- Repository containing source -->
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}"
class="md-source" data-md-source="{{ repo_type }}">
<a
href="{{ config.repo_url }}"
title="{{ lang.t('source.link.title') }}"
class="md-source"
data-md-source="{{ repo_type }}"
>
{% if repo_type %}
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">

View File

@ -24,7 +24,10 @@
{% if nav_item.is_homepage %}
<li class="md-tabs__item">
{% if not page.ancestors | length and nav | selectattr("url", page.url) %}
<a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active">
<a
href="{{ nav_item.url | url }}"
class="md-tabs__link md-tabs__link--active"
>
{{ nav_item.title }}
</a>
{% else %}
@ -47,13 +50,17 @@
{% else %}
<li class="md-tabs__item">
{% if nav_item.active %}
<a href="{{ (nav_item.children | first).url | url }}"
class="md-tabs__link md-tabs__link--active">
<a
href="{{ (nav_item.children | first).url | url }}"
class="md-tabs__link md-tabs__link--active"
>
{{ title }}
</a>
{% else %}
<a href="{{ (nav_item.children | first).url | url }}"
class="md-tabs__link">
<a
href="{{ (nav_item.children | first).url | url }}"
class="md-tabs__link"
>
{{ title }}
</a>
{% endif %}