Add initial breadcrumb partial

* Add initial breadcrumb partial
* Add aria-current=page property
* Add separators via CSS to be comply with screen readers
* Use ordered list to the set of links
* Update README.md: add breadcrumb section
This commit is contained in:
vimux 2019-12-10 14:05:02 -05:00
parent a9f995eb1d
commit 59bea459d8
No known key found for this signature in database
GPG key ID: 5A34FDC4EE832E34
5 changed files with 100 additions and 0 deletions

View file

@ -33,6 +33,7 @@
- [Related Content](#related-content) - [Related Content](#related-content)
- [Share Buttons](#share-buttons) - [Share Buttons](#share-buttons)
- [Featured Image](#featured-image) - [Featured Image](#featured-image)
- [Breadcrumb](#breadcrumb)
- [Footer Social Icons](#footer-social-icons) - [Footer Social Icons](#footer-social-icons)
- [Web App Manifest](#web-app-manifest) - [Web App Manifest](#web-app-manifest)
- [Contributing](#contributing) - [Contributing](#contributing)
@ -157,6 +158,10 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
[Params.Featured] [Params.Featured]
previewOnly = false # Show only preview featured image previewOnly = false # Show only preview featured image
[Params.Breadcrumb]
enable = true # Enable breadcrumb block globally
homeText = "Binario" # Home node text
[Params.Social] [Params.Social]
email = "example@example.com" email = "example@example.com"
facebook = "username" facebook = "username"
@ -348,6 +353,26 @@ featured:
**Note**: `caption` and `credit` appear only on single pages, not summaries. **Note**: `caption` and `credit` appear only on single pages, not summaries.
#### Breadcrumb
Breadcrumb navigation is a hierarchical navigation menu presented as a trail of links. The main purpose of breadcrumb is
to help users navigate in the site hierarchy.
For enabling breadcrumb partial globally (for all single and list pages), use `enable` param under the
`[Params.Breadcrumb]` section of your config.toml file:
```toml
[Params.Breadcrumb]
enable = true
```
The global `.Site.Params.Breadcrumb.enable` param can be overridden for specific posts with `breadcrumb` page's front
matter param:
```yaml
breadcrumb: false
```
#### Footer Social Icons #### Footer Social Icons
With Binario, you have the option to display social icons in the footer. To display them, set up `[Params.Social]` With Binario, you have the option to display social icons in the footer. To display them, set up `[Params.Social]`

View file

@ -555,6 +555,48 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
stroke: #fff; stroke: #fff;
} }
.breadcrumb {
padding: .875rem;
margin: .1875rem 0 -.1875rem;
color: #c3c3c3;
border-width: 1px 0 0;
}
.breadcrumb--separated {
margin: .1875rem 0 .3125rem;
border-width: 1px 0;
}
@media screen and (min-width: 480px) {
.breadcrumb {
margin: .625rem .3125rem -.625rem;
border-width: 1px 1px 0;
}
.breadcrumb--separated {
margin: .625rem .3125rem .3125rem;
border-width: 1px;
}
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}
.breadcrumb__item {
display: flex;
}
.breadcrumb__item::after {
display: block;
margin: 0 .3125rem;
content: "";
}
.alignleft { .alignleft {
float: left; float: left;
margin: 1rem 1rem 1rem 0; margin: 1rem 1rem 1rem 0;

View file

@ -1,5 +1,6 @@
{{ define "main" }} {{ define "main" }}
<main class="main"> <main class="main">
{{ partial "breadcrumb.html" . }}
{{- if or .Title .Content }} {{- if or .Title .Content }}
<div class="page block"> <div class="page block">
{{ with .Title }}<h1 class="page__title">{{ . }}</h1>{{ end }} {{ with .Title }}<h1 class="page__title">{{ . }}</h1>{{ end }}

View file

@ -1,5 +1,6 @@
{{ define "main" }} {{ define "main" }}
<main class="main"> <main class="main">
{{ partial "breadcrumb.html" . }}
<div class="single block"> <div class="single block">
<article class="post"> <article class="post">
{{- partial "post_featured.html" (dict "page" . "IsSingle" true) }} {{- partial "post_featured.html" (dict "page" . "IsSingle" true) }}

View file

@ -0,0 +1,31 @@
{{- $breadcrumb := default .Site.Params.breadcrumb.enable .Params.breadcrumb -}}
{{- define "breadcrumbnav" }}
{{- if .p1.Parent -}}
{{- template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2) -}}
{{- else if not .p1.IsHome }}
{{- template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2) -}}
{{- end }}
{{- $crumbTitle := .p1.Title | default "..." -}}
{{- $crumbTitleHome := .p1.Site.Params.Breadcrumb.homeText | default .p1.Site.Title -}}
{{- if .p1.IsHome -}}
{{- $crumbTitle = $crumbTitleHome -}}
{{- end -}}
{{- if ne .p1 .p2 }}
<li class="breadcrumb__item">
<a class="breadcrumbs__link" href="{{ .p1.RelPermalink }}">{{ $crumbTitle }}</a>
</li>
{{- else }}
<li class="breadcrumbs__item breadcrumb__item--active" aria-current="page">{{ $crumbTitle }}</li>
{{- end }}
{{- end }}
{{- if $breadcrumb }}
<nav class="breadcrumb{{ if not (or $.Title $.Content) }} breadcrumb--separated{{ end }} block" aria-label="breadcrumb">
<ol class="breadcrumb__list">
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ol>
</nav>
{{- end }}