OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed blog sidebar navigation

Browse Source
This commit is contained in:
squidfunk 2023-09-23 14:41:44 +02:00
parent 521f7272ee
commit 3fbcb3ed83
No known key found for this signature in database
GPG Key ID: 5ED40BC4F9C436DF
9 changed files with 139 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/templates/assets/stylesheets/main.7e9791b1.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/templates/assets/stylesheets/main.7e9791b1.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/templates/assets/stylesheets/main.82baac91.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/templates/assets/stylesheets/main.82baac91.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/templates/base.html
View File

@ -44,7 +44,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.82baac91.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7e9791b1.min.css' | url }}">
{% if config.theme.palette %} {% if config.theme.palette %}
{% set palette = config.theme.palette %} {% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}">

108
material/templates/blog-post.html
View File

@ -8,7 +8,7 @@
<div class="md-sidebar md-sidebar--post" data-md-component="sidebar" data-md-type="navigation"> <div class="md-sidebar md-sidebar--post" data-md-component="sidebar" data-md-type="navigation">
<div class="md-sidebar__scrollwrap"> <div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner md-post"> <div class="md-sidebar__inner md-post">
<nav class="md-nav"> <nav class="md-nav md-nav--primary">
<div class="md-post__back"> <div class="md-post__back">
<div class="md-nav__title md-nav__container"> <div class="md-nav__title md-nav__container">
<a href="{{ page.parent.url | url }}" class="md-nav__link"> <a href="{{ page.parent.url | url }}" class="md-nav__link">
@ -35,62 +35,66 @@
</div> </div>
{% endif %} {% endif %}
<ul class="md-post__meta md-nav__list"> <ul class="md-post__meta md-nav__list">
<li class="md-nav__item md-nav__title"> <li class="md-nav__item md-nav__item--section">
<div class="md-nav__link"> <div class="md-post__title">
<span class="md-ellipsis"> <span class="md-ellipsis">
{{ lang.t("blog.meta") }} {{ lang.t("blog.meta") }}
</span> </span>
</div> </div>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar.svg" %}
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
{{- page.config.date.created | date -}}
</time>
</div>
</li>
{% if page.config.date.updated %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar-clock.svg" %}
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
{{- page.config.date.updated | date -}}
</time>
</div>
</li>
{% endif %}
{% if page.categories %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/bookshelf.svg" %}
<span class="md-ellipsis">
{{ lang.t("blog.categories.in") }}
{% for category in page.categories %}
<a href="{{ category.url | url }}">
{{- category.title -}}
</a>
{%- if loop.revindex > 1 %}, {% endif -%}
{% endfor -%}
</span>
</div>
</li>
{% endif %}
{% if page.config.readtime %}
{% set time = page.config.readtime %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/clock-outline.svg" %}
<span class="md-ellipsis">
{% if time == 1 %}
{{ lang.t("readtime.one") }}
{% else %}
{{ lang.t("readtime.other") | replace("#", time) }}
{% endif %}
</span>
</div>
</li>
{% endif %}
</ul>
</nav>
</li> </li>
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar.svg" %}
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
{{- page.config.date.created | date -}}
</time>
</div>
</li>
{% if page.config.date.updated %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar-clock.svg" %}
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
{{- page.config.date.updated | date -}}
</time>
</div>
</li>
{% endif %}
{% if page.categories %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/bookshelf.svg" %}
<span class="md-ellipsis">
{{ lang.t("blog.categories.in") }}
{% for category in page.categories %}
<a href="{{ category.url | url }}">
{{- category.title -}}
</a>
{%- if loop.revindex > 1 %}, {% endif -%}
{% endfor -%}
</span>
</div>
</li>
{% endif %}
{% if page.config.readtime %}
{% set time = page.config.readtime %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/clock-outline.svg" %}
<span class="md-ellipsis">
{% if time == 1 %}
{{ lang.t("readtime.one") }}
{% else %}
{{ lang.t("readtime.other") | replace("#", time) }}
{% endif %}
</span>
</div>
</li>
{% endif %}
</ul> </ul>
</nav> </nav>
{% if "toc.integrate" in features %} {% if "toc.integrate" in features %}

2
src/templates/assets/stylesheets/main/components/_nav.scss
View File

@ -125,7 +125,7 @@
} }
// Navigation link on focus/hover // Navigation link on focus/hover
&:not(.md-nav__container):is(:focus, :hover) { @at-root :is(a#{&}, label#{&}):is(:focus, :hover) {
color: var(--md-accent-fg-color); color: var(--md-accent-fg-color);
cursor: pointer; cursor: pointer;
} }

14
src/templates/assets/stylesheets/main/components/_post.scss
View File

@ -53,7 +53,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: px2rem(12px); gap: px2rem(12px);
margin: 0 px2rem(12px); margin: 0 px2rem(12px) px2rem(24px);
} }
// Post metadata // Post metadata
@ -70,6 +70,12 @@
} }
} }
// Post navigation title @todo - generalize
&__title {
font-weight: 700;
color: var(--md-default-fg-color--light);
}
// Post excerpt // Post excerpt
&--excerpt { &--excerpt {
margin-bottom: px2rem(64px); margin-bottom: px2rem(64px);
@ -104,12 +110,6 @@
margin-top: 0; margin-top: 0;
} }
} }
// Adjust spacing for navigation
> .md-nav:first-child > .md-nav__list,
> .md-nav--secondary {
margin: 1em 0;
}
} }
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------

134
src/templates/blog-post.html
View File

@ -36,7 +36,7 @@
> >
<div class="md-sidebar__scrollwrap"> <div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner md-post"> <div class="md-sidebar__inner md-post">
<nav class="md-nav"> <nav class="md-nav md-nav--primary">
<!-- Back to overview link --> <!-- Back to overview link -->
<div class="md-post__back"> <div class="md-post__back">
@ -50,7 +50,7 @@
</div> </div>
</div> </div>
<!-- Page authors --> <!-- Post authors -->
{% if page.authors %} {% if page.authors %}
<div class="md-post__authors md-typeset"> <div class="md-post__authors md-typeset">
{% for author in page.authors %} {% for author in page.authors %}
@ -67,72 +67,82 @@
</div> </div>
{% endif %} {% endif %}
<!-- Page metadata --> <!-- Post metadata -->
<ul class="md-post__meta md-nav__list"> <ul class="md-post__meta md-nav__list">
<li class="md-nav__item md-nav__title"> <li class="md-nav__item md-nav__item--section">
<div class="md-nav__link"> <div class="md-post__title">
<span class="md-ellipsis"> <span class="md-ellipsis">
{{ lang.t("blog.meta") }} {{ lang.t("blog.meta") }}
</span> </span>
</div> </div>
<nav class="md-nav">
<ul class="md-nav__list">
<!-- Post date -->
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar.svg" %}
<time
datetime="{{ page.config.date.created }}"
class="md-ellipsis"
>
{{- page.config.date.created | date -}}
</time>
</div>
</li>
<!-- Post date updated -->
{% if page.config.date.updated %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar-clock.svg" %}
<time
datetime="{{ page.config.date.updated }}"
class="md-ellipsis"
>
{{- page.config.date.updated | date -}}
</time>
</div>
</li>
{% endif %}
<!-- Post categories -->
{% if page.categories %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/bookshelf.svg" %}
<span class="md-ellipsis">
{{ lang.t("blog.categories.in") }}
{% for category in page.categories %}
<a href="{{ category.url | url }}">
{{- category.title -}}
</a>
{%- if loop.revindex > 1 %}, {% endif -%}
{% endfor -%}
</span>
</div>
</li>
{% endif %}
<!-- Post readtime -->
{% if page.config.readtime %}
{% set time = page.config.readtime %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/clock-outline.svg" %}
<span class="md-ellipsis">
{% if time == 1 %}
{{ lang.t("readtime.one") }}
{% else %}
{{ lang.t("readtime.other") | replace("#", time) }}
{% endif %}
</span>
</div>
</li>
{% endif %}
</ul>
</nav>
</li> </li>
<!-- Page date -->
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar.svg" %}
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
{{- page.config.date.created | date -}}
</time>
</div>
</li>
<!-- Page date updated -->
{% if page.config.date.updated %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/calendar-clock.svg" %}
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
{{- page.config.date.updated | date -}}
</time>
</div>
</li>
{% endif %}
<!-- Page categories -->
{% if page.categories %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/bookshelf.svg" %}
<span class="md-ellipsis">
{{ lang.t("blog.categories.in") }}
{% for category in page.categories %}
<a href="{{ category.url | url }}">
{{- category.title -}}
</a>
{%- if loop.revindex > 1 %}, {% endif -%}
{% endfor -%}
</span>
</div>
</li>
{% endif %}
<!-- Page readtime -->
{% if page.config.readtime %}
{% set time = page.config.readtime %}
<li class="md-nav__item">
<div class="md-nav__link">
{% include ".icons/material/clock-outline.svg" %}
<span class="md-ellipsis">
{% if time == 1 %}
{{ lang.t("readtime.one") }}
{% else %}
{{ lang.t("readtime.other") | replace("#", time) }}
{% endif %}
</span>
</div>
</li>
{% endif %}
</ul> </ul>
</nav> </nav>