From 59bea459d8e646bb9a00add483f625acfb2140f5 Mon Sep 17 00:00:00 2001 From: vimux Date: Tue, 10 Dec 2019 14:05:02 -0500 Subject: [PATCH] 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 --- README.md | 25 +++++++++++++++++++ assets/css/main.css | 42 ++++++++++++++++++++++++++++++++ layouts/_default/list.html | 1 + layouts/_default/single.html | 1 + layouts/partials/breadcrumb.html | 31 +++++++++++++++++++++++ 5 files changed, 100 insertions(+) create mode 100644 layouts/partials/breadcrumb.html diff --git a/README.md b/README.md index 1a85e6a..c85cf27 100644 --- a/README.md +++ b/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]` diff --git a/assets/css/main.css b/assets/css/main.css index 4578265..0f1d579 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; diff --git a/layouts/_default/list.html b/layouts/_default/list.html index aa23103..836dde9 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,6 @@ {{ define "main" }}
+ {{ partial "breadcrumb.html" . }} {{- if or .Title .Content }}
{{ with .Title }}

{{ . }}

{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index dde6afe..6134f74 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,6 @@ {{ define "main" }}
+ {{ partial "breadcrumb.html" . }}
{{- partial "post_featured.html" (dict "page" . "IsSingle" true) }} diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html new file mode 100644 index 0000000..33bc7a0 --- /dev/null +++ b/layouts/partials/breadcrumb.html @@ -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 }} +
  • + {{ $crumbTitle }} +
    • + {{- else }} +
  • {{ $crumbTitle }}
    • + {{- end }} +{{- end }} + +{{- if $breadcrumb }} + +{{- end }} \ No newline at end of file