From fd6a8caa2f34a5f74b2fa939bf4ea7bd738604ff Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Sun, 29 Dec 2019 19:33:38 +0000 Subject: [PATCH 01/12] Omit dates from breadcrumbs --- _config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/_config.yml b/_config.yml index 5e8d060..7a198e4 100644 --- a/_config.yml +++ b/_config.yml @@ -14,6 +14,7 @@ sass: title: jekyll-theme-seanh github_ribbon: true +breadcrumbs_omit_date: true relative_links: enabled: true From 032d0f7c0fbad7d51e423704acfed2d81fb199bd Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Sun, 29 Dec 2019 19:34:55 +0000 Subject: [PATCH 02/12] Replace anchor_headings.html with anchor.js Replace the anchor_headings.html include (from https://github.com/allejo/jekyll-anchor-headings) with anchor.js (https://www.bryanbraun.com/anchorjs/) because anchor_headings.html has bugs. For example it messes up
tags (thinking they're tags). --- _includes/anchor_headings.html | 100 --------------------------------- _layouts/default.html | 14 ++++- 2 files changed, 13 insertions(+), 101 deletions(-) delete mode 100644 _includes/anchor_headings.html diff --git a/_includes/anchor_headings.html b/_includes/anchor_headings.html deleted file mode 100644 index 082423d..0000000 --- a/_includes/anchor_headings.html +++ /dev/null @@ -1,100 +0,0 @@ -{% capture headingsWorkspace %} - {% comment %} - Version 1.0.3 - https://github.com/allejo/jekyll-anchor-headings - - "Be the pull request you wish to see in the world." ~Ben Balter - - Usage: - {% include anchor_headings.html html=content %} - - Parameters: - * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll - - Optional Parameters: - * beforeHeading (bool) : false - Set to true if the anchor should be placed _before_ the heading's content - * anchorBody (string) : '' - The content that will be placed inside the anchor; the `%heading%` placeholder is available - * anchorClass (string) : '' - The class(es) that will be used for each anchor. Separate multiple classes with a space - * anchorTitle (string) : '' - The `title` attribute that will be used for anchors - * h_min (int) : 1 - The minimum header level to build an anchor for; any header lower than this value will be ignored - * h_max (int) : 6 - The maximum header level to build an anchor for; any header greater than this value will be ignored - * bodyPrefix (string) : '' - Anything that should be inserted inside of the heading tag _before_ its anchor and content - * bodySuffix (string) : '' - Anything that should be inserted inside of the heading tag _after_ its anchor and content - - Output: - The original HTML with the addition of anchors inside of all of the h1-h6 headings. - {% endcomment %} - - {% assign minHeader = include.h_min | default: 1 %} - {% assign maxHeader = include.h_max | default: 6 %} - {% assign beforeHeading = include.beforeHeading %} - {% assign nodes = include.html | split: ' - {% if headerLevel == 0 %} - {% if nextChar != '<' and nextChar != '' %} - {% capture node %}' | first }}>{% endcapture %} - {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} - - - {% capture anchor %}{% endcapture %} - - {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %} - {% capture anchor %}href="#{{ html_id}}"{% endcapture %} - - {% if include.anchorClass %} - {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %} - {% endif %} - - {% if include.anchorTitle %} - {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %} - {% endif %} - - {% capture anchor %}{{ include.anchorBody | replace: '%heading%', header | default: '' }}{% endcapture %} - - - {% if beforeHeading %} - {% capture anchor %}{{ anchor }} {% endcapture %} - {% else %} - {% capture anchor %} {{ anchor }}{% endcapture %} - {% endif %} - {% endif %} - - {% capture new_heading %} -
- {% include anchor_headings.html html=content anchorBody="ยง" anchorClass="anchor" %} + {{ content }}
@@ -49,5 +49,17 @@
+ + + From f4e431d3f8213658856b646d3bacb1343b650380 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 19:43:47 +0000 Subject: [PATCH 03/12] Add breadcrumbs Extract the page header that was in both the page.html and post.html layouts into a shared page_header.html include. Add the breadcrumbs.html include (and its helper breadcrumb_text.html) and call it from page_header.html. --- _includes/breadcrumb_text.html | 16 ++++ _includes/breadcrumbs.html | 138 +++++++++++++++++++++++++++++++++ _includes/page_header.html | 6 ++ _layouts/page.html | 4 +- _layouts/post.html | 4 +- 5 files changed, 162 insertions(+), 6 deletions(-) create mode 100644 _includes/breadcrumb_text.html create mode 100644 _includes/breadcrumbs.html create mode 100644 _includes/page_header.html diff --git a/_includes/breadcrumb_text.html b/_includes/breadcrumb_text.html new file mode 100644 index 0000000..9d14cea --- /dev/null +++ b/_includes/breadcrumb_text.html @@ -0,0 +1,16 @@ +{% assign breadcrumb_page = nil %} +{% for page in site.pages %} + {% if page.url == include.url %} + {% assign breadcrumb_page = page %} + {% break %} + {% endif %} +{% endfor %} + +{% assign breadcrumb_text = breadcrumb_page.breadcrumb_text | default: breadcrumb_page.title | default: include.default %} + +{% unless breadcrumb_page == nil %} + {{ breadcrumb_text }} +{% else %} + {{ breadcrumb_text }} +{% endunless %} +> diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html new file mode 100644 index 0000000..9015c28 --- /dev/null +++ b/_includes/breadcrumbs.html @@ -0,0 +1,138 @@ +{% comment %} +Render the breadcrumbs for the current page or a given page. + +Usage +===== + +To render the breadcrumbs for the current page: + + {% include breadcrumbs.html %} + +To render the breadcrumbs for another page: + + {% include breadcrumbs.html page=another_page %} + +To render breadcrumbs with the home page and date omitted (see Options below +for more options): + + {% include breadcrumbs.html omit_home=true omit_date=true %} + +Options +======= + +omit_home +: Don't include the home page as the first breadcrumb. + +omit_collection +: Don't include the page's collection ("posts" by default, for posts) in the breadcrumbs. + +omit_categories +: Don't include the page's categories in the breadcrumbs. + +omit_date +: Don't include the post's date (year, month and day) in the breadcrumbs. + +omit_year +: Don't include the post's year in the breadcrumbs. + +omit_month +: Don't include the post's month in the breadcrumbs. + +omit_date +: Don't include the post's date in the breadcrumbs. +{% endcomment %} + +{% assign omit_home = include.omit_home %} +{% if omit_home == nil %} + {% assign omit_home = site.breadcrumbs_omit_home %} +{% endif %} + +{% assign omit_collection = include.omit_collection %} +{% if omit_collection == nil %} + {% assign omit_collection = site.breadcrumbs_omit_collection %} +{% endif %} + +{% assign omit_categories = include.omit_categories %} +{% if omit_categories == nil %} + {% assign omit_categories = site.breadcrumbs_omit_categories %} +{% endif %} + +{% assign omit_date = include.omit_date %} +{% if omit_date == nil %} + {% assign omit_date = site.breadcrumbs_omit_date %} +{% endif %} + +{% assign omit_year = include.omit_year %} +{% if omit_year == nil %} + {% assign omit_year = site.breadcrumbs_omit_year %} +{% endif %} + +{% assign omit_month = include.omit_month %} +{% if omit_month == nil %} + {% assign omit_month = site.breadcrumbs_omit_month %} +{% endif %} + +{% assign omit_day = include.omit_day %} +{% if omit_day == nil %} + {% assign omit_day = site.breadcrumbs_omit_day %} +{% endif %} + + diff --git a/_includes/page_header.html b/_includes/page_header.html new file mode 100644 index 0000000..33eac10 --- /dev/null +++ b/_includes/page_header.html @@ -0,0 +1,6 @@ +
+

{{ page.title }}

+
+ {% include breadcrumbs.html comma=page.date %} +
+
diff --git a/_layouts/page.html b/_layouts/page.html index 6ce9a5e..3eec440 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -3,9 +3,7 @@ ---
-
-

{{ page.title }}

-
+ {% include page_header.html %}
{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html index 6bd152a..041f8e7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,9 +4,7 @@
-
-

{{ page.title }}

-
+ {% include page_header.html %}
{{ content }}
From 5988a448bd469457430e3ad6a04101eb7551bf3e Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 19:45:16 +0000 Subject: [PATCH 04/12] Move the time from the bottom to the top of posts --- _includes/page_header.html | 3 +++ _layouts/post.html | 3 +-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/_includes/page_header.html b/_includes/page_header.html index 33eac10..0465ca4 100644 --- a/_includes/page_header.html +++ b/_includes/page_header.html @@ -2,5 +2,8 @@

{{ page.title }}

{% include breadcrumbs.html comma=page.date %} + {% if page.date %} + . + {% endif %}
diff --git a/_layouts/post.html b/_layouts/post.html index 041f8e7..5863c1f 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,8 +8,7 @@
{{ content }}
From ff15c40f522078391f275058eb2f9b9a7d7255b3 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 20:00:43 +0000 Subject: [PATCH 05/12] Move author from post footer to header And remove the now empty post footer and its CSS. --- _includes/breadcrumbs.html | 4 ++-- _includes/page_header.html | 5 ++++- _layouts/post.html | 5 +---- _sass/_layout.scss | 6 ------ _sass/_typography.scss | 12 ------------ 5 files changed, 7 insertions(+), 25 deletions(-) diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html index 9015c28..a5cf646 100644 --- a/_includes/breadcrumbs.html +++ b/_includes/breadcrumbs.html @@ -129,8 +129,8 @@ {% endunless %} {% unless is_front_page %} - {% if include.comma %} - {{ page.title }}, + {% if include.full_stop %} + {{ page.title }}. {% else %} {{ page.title }} {% endif %} diff --git a/_includes/page_header.html b/_includes/page_header.html index 0465ca4..a9886ce 100644 --- a/_includes/page_header.html +++ b/_includes/page_header.html @@ -1,7 +1,10 @@

{{ page.title }}

- {% include breadcrumbs.html comma=page.date %} + {% include breadcrumbs.html full_stop=page.date %} + {% if include.author %} + Sean Hammond, + {% endif %} {% if page.date %} . {% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 5863c1f..68f4f05 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,12 +4,9 @@
- {% include page_header.html %} + {% include page_header.html author=true %}
{{ content }} -
diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 6230919..3480763 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -160,12 +160,6 @@ body { margin-right: auto; } -.post-footer { - margin-top: 90px; -} - -.post-footer__time { - padding-right: 6px; } .content .posts-list { diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 17f4993..a87cfaf 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -88,18 +88,6 @@ summary { color: var(--muted-color); } -.post-footer { - color: var(--muted-color); - font-size: var(--small-font-size); - line-height: var(--small-line-height); -} - -.post-footer__link { - color: var(--muted-color); - border-bottom: none; - text-decoration: none; -} - .site-footer { font-size: smaller; } From 9496f33cd1180c9589dd262384df3467f7ca8c03 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 20:07:50 +0000 Subject: [PATCH 06/12] Use site.author for author name --- _includes/page_header.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_includes/page_header.html b/_includes/page_header.html index a9886ce..a707c12 100644 --- a/_includes/page_header.html +++ b/_includes/page_header.html @@ -2,8 +2,8 @@

{{ page.title }}

{% include breadcrumbs.html full_stop=page.date %} - {% if include.author %} - Sean Hammond, + {% if site.author and include.author %} + , {% endif %} {% if page.date %} . From ca36b304f264b0d6bf3c504e14df9628f951941d Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 20:43:37 +0000 Subject: [PATCH 07/12] Change front page breadcrumb text to "Home" --- index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.md b/index.md index 252c942..e084099 100644 --- a/index.md +++ b/index.md @@ -1,6 +1,8 @@ --- layout: page +breadcrumb_text: Home --- + jekyll-theme-seanh ================== From fddb521fd5e5ebfcb137ab4b90abe539d7dd7b0e Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 20:58:57 +0000 Subject: [PATCH 08/12] Fix up CSS related to new page header --- _includes/fullbleed.html | 4 ++-- _includes/page_header.html | 6 +++--- _includes/wide.html | 4 ++-- _layouts/default.html | 16 ++++++++-------- _layouts/page.html | 4 ++-- _layouts/post.html | 4 ++-- _sass/_code.scss | 2 +- _sass/_images.scss | 4 ++-- _sass/_layout.scss | 11 ++++------- _sass/_typography.scss | 15 ++++++++------- 10 files changed, 34 insertions(+), 36 deletions(-) diff --git a/_includes/fullbleed.html b/_includes/fullbleed.html index f743e89..a1a597f 100644 --- a/_includes/fullbleed.html +++ b/_includes/fullbleed.html @@ -1,9 +1,9 @@ {::nomarkdown} -
+
{{ include.content }}
-
+
{:/} diff --git a/_includes/page_header.html b/_includes/page_header.html index a707c12..26bb0fc 100644 --- a/_includes/page_header.html +++ b/_includes/page_header.html @@ -1,6 +1,6 @@ -
-

{{ page.title }}

-
+
+

{{ page.title }}

+
{% include breadcrumbs.html full_stop=page.date %} {% if site.author and include.author %} , diff --git a/_includes/wide.html b/_includes/wide.html index 9653944..9240fc3 100644 --- a/_includes/wide.html +++ b/_includes/wide.html @@ -1,5 +1,5 @@ {::nomarkdown} -
+
{{ include.content }} -
+
{:/} diff --git a/_layouts/default.html b/_layouts/default.html index 7296dd5..f14d0db 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -36,8 +36,8 @@
{{ content }} -
-
+
+
    {% include view_source_link.html %} {% include edit_page_link.html %} @@ -54,12 +54,12 @@ diff --git a/_layouts/page.html b/_layouts/page.html index 3eec440..e882f57 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -4,8 +4,8 @@
    {% include page_header.html %} -
    +
    {{ content }} -
    +
    diff --git a/_layouts/post.html b/_layouts/post.html index 68f4f05..3b9e521 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -5,9 +5,9 @@
    {% include page_header.html author=true %} -
    +
    {{ content }} -
    +
diff --git a/_sass/_code.scss b/_sass/_code.scss index 4d2e0d4..e741431 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -30,7 +30,7 @@ pre { overflow: auto; } -.content__inner-container pre { +.inner-container pre { border-radius: 4px; } diff --git a/_sass/_images.scss b/_sass/_images.scss index 4789e68..5c79a0c 100644 --- a/_sass/_images.scss +++ b/_sass/_images.scss @@ -5,12 +5,12 @@ img { max-width: 100%; } -.content__inner-container img { +.inner-container img { margin-bottom: 0; height: auto; border-radius: 4px; } -.content__inner-container img { +.inner-container img { box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35); } diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 3480763..63235e0 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -145,21 +145,18 @@ body { padding: 0 20px; } -.content__header { +.page-header { padding: 50px 0; } -.content__title { - text-align: center; -} - -.content__inner-container, -.site-footer__inner { +.inner-container { max-width: 650px; margin-left: auto; margin-right: auto; } +.page-header__title { + margin-bottom: 0; } .content .posts-list { diff --git a/_sass/_typography.scss b/_sass/_typography.scss index a87cfaf..36c8b5e 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -15,8 +15,8 @@ p, ul, ol, figure, -.content__inner-container pre, -.content__inner-container iframe, +.inner-container pre, +.inner-container iframe, dd, details, .scroll, @@ -88,17 +88,18 @@ summary { color: var(--muted-color); } -.site-footer { +.meta { font-size: smaller; + line-height: var(--small-line-height); } -.site-footer, -.site-footer b, -.site-footer strong { +.meta, +.meta b, +.meta strong { color: var(--muted-color); } -.site-footer a { +.meta a { border-bottom: none; color: inherit; } From 3fc5390f4501e7b86821401ff00e489b1d40c006 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 21:48:52 +0000 Subject: [PATCH 09/12] Fix breadcrumb text when page has no title --- _includes/breadcrumbs.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html index a5cf646..4e1d11f 100644 --- a/_includes/breadcrumbs.html +++ b/_includes/breadcrumbs.html @@ -129,10 +129,15 @@ {% endunless %} {% unless is_front_page %} + {% if page.title == nil %} + {% assign title = page.name %} + {% else %} + {% assign title = page.title %} + {% endif %} {% if include.full_stop %} - {{ page.title }}. + {{ title }}. {% else %} - {{ page.title }} + {{ title }} {% endif %} {% endunless %} From df97d1537521bfdf7e4fff87419916d7f7016c75 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 21:49:16 +0000 Subject: [PATCH 10/12] Add tags support --- _includes/page_header.html | 1 + _includes/tags.html | 27 +++++++++++++++++++++++++++ _posts/2019-12-24-tags.md | 34 ++++++++++++++++++++++++++++++++++ tags/example-tag.md | 6 ++++++ tags/foo.md | 6 ++++++ 5 files changed, 74 insertions(+) create mode 100644 _includes/tags.html create mode 100644 _posts/2019-12-24-tags.md create mode 100644 tags/example-tag.md create mode 100644 tags/foo.md diff --git a/_includes/page_header.html b/_includes/page_header.html index 26bb0fc..12db176 100644 --- a/_includes/page_header.html +++ b/_includes/page_header.html @@ -2,6 +2,7 @@

{{ page.title }}

{% include breadcrumbs.html full_stop=page.date %} + {% include tags.html %} {% if site.author and include.author %} , {% endif %} diff --git a/_includes/tags.html b/_includes/tags.html new file mode 100644 index 0000000..b0e9c4e --- /dev/null +++ b/_includes/tags.html @@ -0,0 +1,27 @@ +{% assign tags = "" | split: "" %} +{% for tag in page.tags %} + {% assign tag_slug = tag | replace: " ", "-" | downcase | url_encode %} + {% assign tag_url = "/tags/" | append: tag_slug | append: "/" %} + + {% assign tag_page = nil %} + {% for page in site.pages %} + {% if page.url == tag_url %} + {% assign tag_page = page %} + {% break %} + {% endif %} + {% endfor %} + + {% if tag_page %} + {% capture tag_str %}{{ tag }}{% endcapture %} + {% else %} + {% capture tag_str %}{{ tag }}{% endcapture %} + {% endif %} + + {% assign tag_str = tag_str | split: "๐Ÿ—พ" %} + {% assign tags = tags | concat: tag_str %} +{% endfor %} + +{% if tags != empty %} + +{% endif %} + diff --git a/_posts/2019-12-24-tags.md b/_posts/2019-12-24-tags.md new file mode 100644 index 0000000..873a282 --- /dev/null +++ b/_posts/2019-12-24-tags.md @@ -0,0 +1,34 @@ +--- +tags: [foo, bar, Example Tag] +--- + +Tags +==== + +You can assign tags to a page or post in Jekyll by adding a `tags` variable to its +YAML front matter. For example: + +```yaml +--- +tags: [foo, bar, Example Tag] +--- +``` + +See [Categories and Tags](https://jekyllrb.com/docs/posts/#categories-and-tags) +in the Jekyll docs for more details. + +When a post or page has tags they'll be listed in the metadata beneath the title. + +Creating pages for tags to link to +---------------------------------- + +If your site has a page with the URL `/tags/foo/` then the `foo` tag will link to that +page. +You might use this page to [list all posts with the tag](../example-category/_posts/2019-12-22-post-lists.md#listing-posts-in-a-category). + +The tag page's URL must be equal to the name of the tag with spaces replaced by +`-`'s and uppercase letters downcased. For example a tag named `Example Tag` +would match a page with a `/tags/example-tag/` URL. + +You can create such a page by creating a `tags/example-tag.md` or +`tags/example-tag/index.md` file. diff --git a/tags/example-tag.md b/tags/example-tag.md new file mode 100644 index 0000000..8a48903 --- /dev/null +++ b/tags/example-tag.md @@ -0,0 +1,6 @@ +Example Tag +=========== + +All posts tagged "Example Tag": + +{% include post_list.html tag="Example Tag" %} diff --git a/tags/foo.md b/tags/foo.md new file mode 100644 index 0000000..fd6d66a --- /dev/null +++ b/tags/foo.md @@ -0,0 +1,6 @@ +Foo Tag +======= + +All posts tagged "foo": + +{% include post_list.html tag="foo" %} From b0be4e44c7e60472644a3c7f25b61de88b965057 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 21:49:27 +0000 Subject: [PATCH 11/12] Add post about breadcrumbs --- _posts/2019-12-23-breadcrumbs.md | 143 +++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 _posts/2019-12-23-breadcrumbs.md diff --git a/_posts/2019-12-23-breadcrumbs.md b/_posts/2019-12-23-breadcrumbs.md new file mode 100644 index 0000000..27c6748 --- /dev/null +++ b/_posts/2019-12-23-breadcrumbs.md @@ -0,0 +1,143 @@ +--- +categories: [Example Category, Another Category] +--- + +Page and post headings have a line of navigation breadcrumbs beneath the title. +For example, here are this page's breadcrumbs: + +

+{% include breadcrumbs.html omit_date=false %} +

+ +Breadcrumbs help users locate themselves within the hierarchy of your site. +While [header links](./2019-11-25-header-and-footer-links.md) +act as the site's primary navigation, +breadcrumbs show the user exactly where they currently are. They show the +path from the home page down to the current page and provide links for moving back +up the site hierarchy. + +The breadcrumbs are made up of: + +* A breadcrumb for the site's front page: **Home** in this post's breadcrumbs +* A breadcrumb for the page or post's collection, if it has one: **> Posts** in this post's breadcrumbs + (posts belong to the collection "posts" by default) +* One breadcrumb for each of the page or post's categories, if it has any: + **> Example Category** and **> Another Category** in this post's breadcrumbs +* For posts: breadcrumbs for the post's year, month and day: **> 2019 > Dec > 23** in this post's breadcrumbs +* Finally, a breadcrumb for the page or post's title: **> Breadcrumbs** for this post + +Creating pages for breadcrumbs to link to +----------------------------------------- + +Breadcrumbs will automatically find and link to their corresponding pages if they exist: + +* If the site has a front page then the **Home** breadcrumb will be a link to the front page + +* If there's a page whose URL matches the page or post's collection, the collection breadcrumb will be a link to that page. + + For example to create a page for the default "posts" collection create a `posts.md` or `posts/index.md` file. + You might use this page to [render a list of all your posts](../example-category/_posts/2019-12-22-post-lists.md#listing-all-published-posts). + + The collection page's URL must be equal to the name of the collection with spaces replaced by `-`'s and uppercase letters downcased. + For example a `Foo Bar` collection would match a page with a `/foo-bar/` URL. + +* For each category, if there's a page whose URL matches the category's name then the category's breadcrumb will be a link to that page. + + For example to create a page for "Example Category" create a `example-category.md` or `example-category/index.md` file + (as with collection pages: replacing spaces with `-`'s and downcasing uppercase letters). + + You might use this page to [list all posts in the category](../example-category/_posts/2019-12-22-post-lists.md#listing-posts-in-a-category). + +* For a post's year, month and day, if there's a page whose URL matches that + year, month, or day, then the year, month or day breadcrumb will link to it. + + For example the breadcrumb for the year 2019 will match a `2019.md` or `2019/index.md` file. + You could use this page to list all posts from 2019. + + December 2019 matches a `2019/12.md` or `2019/12/index.md` file, + and 23rd December 2019 matches a `2019/12/23.md` or `2019/12/23/index.md` file. + +Controlling breadcrumb text +--------------------------- + +Whenever a breadcrumb finds a corresponding page to link to, it also takes on that page's title as the breadcrumb text. + +For example if the `example-category.md` page has the title "All Posts in +Example Category" then "All Posts in Example Category" will appear as the +breadcrumb text for the category, in the breadcrumbs of posts that belong to +the category. + +Or if `posts.md` has the title "Archive" then the post's collection will appear +as "Archive" in the breadcrumbs of posts belonging to that collection. + +The title of the front page of the site (the top-level `index.md` file) +controls the text of the Home breadcrumb. + +You can override this for any page by adding a `breadcrumb_text` variable to the page's frontmatter: + +```yaml +--- +breadcrumb_text: Example Category +--- + +All Posts in Example Category +============================= + +... +``` + +Hiding breadcrumbs +------------------ + +You can turn off any of the breadcrumb components using these `_config.yml` settings: + +`breadcrumbs_omit_home: true` +: Hide the home breadcrumb + +`breadcrumbs_omit_collection: true` +: Hide the collection breadcrumb + +`breadcrumbs_omit_categories: true` +: Hide the category breadcrumbs + +`breadcrumbs_omit_date: true` +: Hide the year, month and day breadcrumbs for posts + +`breadcrumbs_omit_year: true` +: Hide just the year breadcrumb for posts + +`breadcrumbs_omit_month: true` +: Hide just the month breadcrumb for posts + +`breadcrumbs_omit_day: true` +: Hide just the day breadcrumb for posts + +For example, here are this page's breadcrumbs with `omit_collection: true` and `omit_date: true`: + +

+{% include breadcrumbs.html omit_collection=true omit_date=true %} +

+ +Making breadcrumbs match URLs +----------------------------- + +You might want your pages' and posts' breadcrumbs to match the `/`-separated parts of their permalink URLs. +You can achieve this either by changing your [`permalink` setting](https://jekyllrb.com/docs/permalinks/) +in `_config.yml` to match the default breadcrumbs or by configuring the +breadcrumbs to match your `permalink` setting. + +For example this permalink setting: + +```yaml +permalink: /:collection/:categories/:year/:month/:day/:title/ +``` + +will make your permalink URLs match the default breadcrumbs. + +Another example: if you use the built-in `permalink: pretty` format then adding +this breadcrumbs setting to `_config.yml` will change your breadcrumbs to match +your pretty permalinks: + +```yaml +breadcrumbs_omit_collection: true +``` From 18d47b522972e2b4784d0f05fc3a577e292128cf Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Mon, 30 Dec 2019 22:09:18 +0000 Subject: [PATCH 12/12] Tweak page heading and meta style --- _includes/breadcrumbs.html | 2 +- _includes/tags.html | 2 +- _sass/_layout.scss | 5 +++-- _sass/_typography.scss | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html index 4e1d11f..c64b6fc 100644 --- a/_includes/breadcrumbs.html +++ b/_includes/breadcrumbs.html @@ -77,7 +77,7 @@ {% assign omit_day = site.breadcrumbs_omit_day %} {% endif %} -