From 4b2fa18ff9f55e5804633fea9b33e558822d58f5 Mon Sep 17 00:00:00 2001 From: Andrew Fong Date: Thu, 1 Jun 2017 02:39:31 -0700 Subject: [PATCH] Include category pages, links --- _includes/sidebar.html | 15 +++++++- _layouts/category.html | 21 +++++++++++ _layouts/post.html | 37 +++++++++++++++++-- _posts/2012-01-29-markup-text-readability.md | 2 + _posts/2012-01-30-markup-title-with-markup.md | 2 +- _sass/_posts.scss | 15 +++++++- _sass/_tags.scss | 13 ------- category/edge-case.md | 27 ++++++++++++++ category/markup.md | 6 +++ 9 files changed, 117 insertions(+), 21 deletions(-) create mode 100644 _layouts/category.html create mode 100644 category/edge-case.md create mode 100644 category/markup.md diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 8820e8f861..a827a16d2c 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -15,9 +15,8 @@

{% comment %} The code below dynamically generates a sidebar nav of pages with - `layout: page` in the front-matter. See readme for usage. + `sidebar_link: true` in the front-matter. See readme for usage. {% endcomment %} - {% assign pages_list = site.pages %} {% for node in pages_list %} {% if node.title != null %} @@ -27,6 +26,18 @@

{% endif %} {% endif %} {% endfor %} + + {% comment %} + Now do it again, but for category pages + {% endcomment %} + {% for node in pages_list %} + {% if node.title != null %} + {% if node.layout == "category" %} + {{ node.title }} + {% endif %} + {% endif %} + {% endfor %} Currently v{{ site.version }} diff --git a/_layouts/category.html b/_layouts/category.html new file mode 100644 index 0000000000..4c5656e19f --- /dev/null +++ b/_layouts/category.html @@ -0,0 +1,21 @@ +--- +layout: page +--- + +{% unless page.content == '' %} + {{ content }} +{% endunless %} + + diff --git a/_layouts/post.html b/_layouts/post.html index f4a92c7c72..43194df93d 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,14 +4,45 @@

{{ page.title }}

- {{ page.date | date_to_string }} +
+ {{ page.date | date_to_string }} + + {% for category in page.categories %} + • + + {% comment %} + Check if this category has a corresponding page before decide + to link to it. This is an O(n^2) operations so consider removing + it and linking for all categories (or no categories) if this + site has a lot of pages and/or a lot of categories. + {% endcomment %} + {% assign category_page = false %} + {% for node in site.pages %} + {{ node.category }} + {% if node.category == category or node.title == category %} + {% assign category_page = node %} + {% endif %} + {% endfor %} + + {% if category_page %} + + {{ category }} + + {% else %} + {{ category }} + {% endif %} + {% endfor %} + +
+ {{ content }}
{% for tag in page.tags %} - {% include svg/tags.svg %} - {{ tag }} + + {% include svg/tags.svg %} +  {{ tag }} {% endfor %}
diff --git a/_posts/2012-01-29-markup-text-readability.md b/_posts/2012-01-29-markup-text-readability.md index d2d45da6f1..c074ef747a 100644 --- a/_posts/2012-01-29-markup-text-readability.md +++ b/_posts/2012-01-29-markup-text-readability.md @@ -2,6 +2,8 @@ layout: post title: "Markup: Text Readability Test" excerpt: "A large amount of sample text to test readability of a text heavy page." +categories: + - Markup tags: - sample post - readability diff --git a/_posts/2012-01-30-markup-title-with-markup.md b/_posts/2012-01-30-markup-title-with-markup.md index b3adaeb512..29990dc767 100644 --- a/_posts/2012-01-30-markup-title-with-markup.md +++ b/_posts/2012-01-30-markup-title-with-markup.md @@ -2,7 +2,7 @@ layout: post title: "Markup: Title *with* **Markdown**" categories: - - Markdown + - Markup tags: - css - html diff --git a/_sass/_posts.scss b/_sass/_posts.scss index ccda17e365..6a80d34d62 100644 --- a/_sass/_posts.scss +++ b/_sass/_posts.scss @@ -24,13 +24,24 @@ } // Meta data line below post title -.post-date { - display: block; +.post-meta { margin-top: -.5rem; margin-bottom: 1rem; color: #9a9a9a; } +.post-tags a { + font-size: 0.8em; + margin-right: 0.5rem; + white-space:nowrap; + .tag-name { text-transform: capitalize; } + + opacity: 0.75; + &:hover { + text-decoration: none; + opacity: 1; + } +} // Related posts .related { diff --git a/_sass/_tags.scss b/_sass/_tags.scss index 4b2358e61f..b19f69109b 100644 --- a/_sass/_tags.scss +++ b/_sass/_tags.scss @@ -21,16 +21,3 @@ } } } - -.post-tags a { - font-size: 0.8em; - margin-right: 0.5rem; - white-space:nowrap; - .tag-name { text-transform: capitalize; } - - opacity: 0.75; - &:hover { - text-decoration: none; - opacity: 1; - } -} \ No newline at end of file diff --git a/category/edge-case.md b/category/edge-case.md new file mode 100644 index 0000000000..4be3b430af --- /dev/null +++ b/category/edge-case.md @@ -0,0 +1,27 @@ +--- +layout: category +title: Edge Case +--- + +Sample category page. You need to create a page for each category. +The category is inferred from the title of the page, but you can also +specify it with the `category` attribute in the front matter. + +```md +--- +layout: category +title: My Category +--- +``` + +Or ... + +```md +--- +layout: category +title: Fancy Tital +category: My Category +--- +``` + +Posts get listed below here. \ No newline at end of file diff --git a/category/markup.md b/category/markup.md new file mode 100644 index 0000000000..785074cbdb --- /dev/null +++ b/category/markup.md @@ -0,0 +1,6 @@ +--- +layout: category +title: Markup +--- + +Another sample category page. \ No newline at end of file