1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-09-24 03:18:21 +02:00

Updated migration guide for templates

This commit is contained in:
squidfunk 2020-03-21 17:11:06 +01:00
parent 0b622b3333
commit d807cbd1fc

View File

@ -413,9 +413,10 @@ matches the new structure:
#### `partials/footer.html`
``` diff
@@ -7,32 +7,32 @@
@@ -5,34 +5,34 @@
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
- <nav class="md-footer-nav__inner md-grid">
+ <nav class="md-footer-nav__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
{% 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">
- <div class="md-flex__cell md-flex__cell--shrink">
@ -463,10 +464,11 @@ matches the new structure:
#### `partials/header.html`
``` diff
@@ -3,50 +3,44 @@
@@ -2,51 +2,46 @@
This file was automatically generated - do not edit
-#}
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
- <nav class="md-header-nav md-grid">
- <div class="md-flex">
- <div class="md-flex__cell md-flex__cell--shrink">
- <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
@ -483,6 +485,7 @@ matches the new structure:
- <div class="md-flex__cell md-flex__cell--stretch">
- <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
- {% if config.site_name == page.title %}
+ <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
+ <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
+ {% if config.theme.logo %}
+ <img src="{{ config.theme.logo | url }}" alt="logo">
@ -598,7 +601,7 @@ matches the new structure:
+ </span>
</label>
- <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
+ <nav class="md-nav" data-md-level="{{ level }}">
+ <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}">
+ <span class="md-nav__icon md-icon">
+ {% include ".icons/material/arrow-left.svg" %}
@ -607,7 +610,7 @@ matches the new structure:
</label>
<ul class="md-nav__list" data-md-scrollfix>
@@ -39,6 +45,9 @@
{% if toc_ | first is defined %}
{% if toc | first is defined %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ nav_item.title }}
+ <span class="md-nav__icon md-icon">
@ -621,21 +624,24 @@ matches the new structure:
#### `partials/nav.html`
``` diff
@@ -2,12 +2,12 @@
@@ -1,13 +1,14 @@
{#-
This file was automatically generated - do not edit
-#}
<nav class="md-nav md-nav--primary" data-md-level="0">
-<nav class="md-nav md-nav--primary" data-md-level="0">
- <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">
- {% if config.theme.logo.icon %}
- <i class="md-icon">{{ config.theme.logo.icon }}</i>
+<nav class="md-nav md-nav--primary" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
+ <label class="md-nav__title" for="__drawer">
+ <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
+ {% if config.theme.logo %}
+ <img src="{{ config.theme.logo | url }}" alt="logo">
{% else %}
- <img alt="logo" src="{{ config.theme.logo | url }}" width="48" height="48">
+ {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
+ {% set icon = config.theme.icon.logo or "material/library" %}
+ {% include ".icons/" ~ icon ~ ".svg" %}
{% endif %}
</a>
{{ config.site_name }}
@ -648,15 +654,15 @@ matches the new structure:
<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" aria-label="search" 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" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
- <input type="text" class="md-search__input" name="query" aria-label="Search" 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" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
<label class="md-search__icon md-icon" for="__search">
+ {% include ".icons/material/magnify.svg" %}
+ {% include ".icons/material/arrow-left.svg" %}
</label>
- <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
- &#xE5CD;
+ <button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1">
+ <button type="reset" class="md-search__icon md-icon" aria-label="{{ lang.t('search.reset') }}" data-md-component="search-reset" tabindex="-1">
+ {% include ".icons/material/close.svg" %}
</button>
</form>
@ -732,7 +738,7 @@ matches the new structure:
#### `partials/source.html`
``` diff
@@ -2,24 +2,10 @@
@@ -2,24 +2,11 @@
This file was automatically generated - do not edit
-#}
{% import "partials/language.html" as lang with context %}
@ -756,7 +762,8 @@ matches the new structure:
- {% endif %}
+<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
+ <div class="md-source__icon md-icon">
+ {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
+ {% set icon = config.theme.icon.repo or "fontawesome/brands/git-alt" %}
+ {% include ".icons/" ~ icon ~ ".svg" %}
+ </div>
<div class="md-source__repository">
{{ config.repo_name }}
@ -777,11 +784,43 @@ matches the new structure:
<a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active">
```
#### `partials/tabs.html`
``` diff
@@ -5,7 +5,7 @@
{% if page.ancestors | length > 0 %}
{% set class = "md-tabs md-tabs--active" %}
{% endif %}
-<nav class="{{ class }}" data-md-component="tabs">
+<nav class="{{ class }}" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
{% for nav_item in nav %}
```
#### `partials/toc-item.html`
``` diff
@@ -6,7 +6,7 @@
{{ toc_item.title }}
</a>
{% if toc_item.children %}
- <nav class="md-nav">
+ <nav class="md-nav" aria-label="{{ toc_item.title }}">
<ul class="md-nav__list">
{% for toc_item in toc_item.children %}
{% include "partials/toc-item.html" %}
```
#### `partials/toc.html`
``` diff
@@ -8,29 +8,16 @@
@@ -2,35 +2,22 @@
This file was automatically generated - do not edit
-#}
{% import "partials/language.html" as lang with context %}
-<nav class="md-nav md-nav--secondary">
+<nav class="md-nav md-nav--secondary" aria-label="{{ lang.t('toc.title') }}">
{% endif %}
{% if toc | first is defined %}
<label class="md-nav__title" for="__toc">