mirror of
https://github.com/Vimux/Binario.git
synced 2024-11-24 23:18:33 +00:00
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:
parent
a9f995eb1d
commit
59bea459d8
5 changed files with 100 additions and 0 deletions
25
README.md
25
README.md
|
@ -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]`
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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) }}
|
||||||
|
|
31
layouts/partials/breadcrumb.html
Normal file
31
layouts/partials/breadcrumb.html
Normal 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 }}
|
Loading…
Reference in a new issue