mirror of
https://github.com/Vimux/Binario.git
synced 2024-11-11 01:38:28 +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)
|
||||
- [Share Buttons](#share-buttons)
|
||||
- [Featured Image](#featured-image)
|
||||
- [Breadcrumb](#breadcrumb)
|
||||
- [Footer Social Icons](#footer-social-icons)
|
||||
- [Web App Manifest](#web-app-manifest)
|
||||
- [Contributing](#contributing)
|
||||
|
@ -157,6 +158,10 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
|
|||
[Params.Featured]
|
||||
previewOnly = false # Show only preview featured image
|
||||
|
||||
[Params.Breadcrumb]
|
||||
enable = true # Enable breadcrumb block globally
|
||||
homeText = "Binario" # Home node text
|
||||
|
||||
[Params.Social]
|
||||
email = "example@example.com"
|
||||
facebook = "username"
|
||||
|
@ -348,6 +353,26 @@ featured:
|
|||
|
||||
**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
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
{{ define "main" }}
|
||||
<main class="main">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{- if or .Title .Content }}
|
||||
<div class="page block">
|
||||
{{ with .Title }}<h1 class="page__title">{{ . }}</h1>{{ end }}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
{{ define "main" }}
|
||||
<main class="main">
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
<div class="single block">
|
||||
<article class="post">
|
||||
{{- 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