better support blog, exampleSite update

archetypes/default.md

@@ -4,4 +4,5 @@ date: {{ .Date }}
 draft: false
 weight: 0
 enableToc: true
+tocLevels: ["h2", "h3", "h4"]
 ---

assets/sass/base/_helpers.scss

@@ -18,4 +18,16 @@
 
 .flexbox {
   @include flexbox();
+}
+
+.jc-center {
+  @include justify-content(center);
+}
+
+.ai-center {
+  @include align-items(center);
+}
+
+.flex-wrap {
+  @include flex-wrap(wrap);
 }

assets/sass/components/_breadcrumb.scss

@@ -1,6 +1,18 @@
 .breadcrumb {
-  margin: 0 1rem;
-  padding: 0.5rem 0;
+  &[data-is-blog="true"] {
+    margin: 1.5rem 1rem 0 1rem;
+    padding-bottom: 1.5rem;
+
+    @include themify($themes) {
+      border-bottom: 1px solid themed('hr-color');
+      background-color: themed('breadcrumb-background-color');
+    }
+  }
+
+  &[data-is-blog="false"] {
+    margin: auto 1rem;
+    padding: 0.5rem 0;
+  }
 
   @include truncate($grid-body-width);
 

assets/sass/components/_summary.scss

@@ -1,8 +1,7 @@
 .summary-card {
-  padding: 0.5rem;
+  padding: 1rem;
   padding-bottom: 0;
-  margin-top: 0.5rem;
-  margin-bottom: 2rem;
+  margin: 1.5rem 0;
   position: relative;
 
   @include themify($themes) {
@@ -11,13 +10,14 @@
   }
 
   .title {
+    text-align: center;
     a {
       font-family: $title-font;
       font-weight: 700;
       word-break: break-word;
 
       @include themify($themes) {
-        color: themed('title-color');
+        color: themed('link');
         @include on-event {
           color: themed('link-hover');
         }
@@ -26,8 +26,11 @@
   }
 
   .subtitle {
+    padding: 1rem 0;
+
     @include flexbox();
     @include align-items(center);
+    @include justify-content(center);
     @include themify($themes) {
       color: themed('meta-color');
     }
@@ -78,7 +81,7 @@
       height: 100%;
       width: auto;
       margin: 0 auto;
-      padding: 1rem;
+      padding: 1rem 0;
       padding-bottom: 0;
     }
   }

assets/sass/components/_tag.scss

@@ -0,0 +1,29 @@
+.tag {
+  display: inline-block;
+  margin: 0.25rem 0.4rem;
+  text-decoration: none !important;
+
+  @include themify($themes) {
+    color: darken(themed('subtitle-color'), 5%);
+    @include on-event {
+      color: themed('link-hover');
+    }
+  }
+
+  &__wrapper {
+    padding: 0.3rem 0;
+    margin: auto 0;
+  }
+
+  &__text {
+    font-size: 0.95rem;
+    font-weight: bold;
+    color: inherit;
+  }
+
+  &__num {
+    font-size: 0.75rem;
+    font-weight: bold;
+    color: inherit;
+  }
+}

assets/sass/layout/_header.scss

@@ -10,15 +10,23 @@
   @include align-items(center);
   @include flex-direction(column);
 
-  .title {
-    font-family: $title-font;
-    font-weight: 900;
-  }
-
   &__wrapper {
     @include themify($themes) {
       border-bottom: 1px solid themed('border-line-color');
     }
+
+    .title {
+      font-size: 3rem;
+      font-weight: 900;
+      font-family: $title-font;
+      line-height: 3rem;
+      overflow-wrap: break-word;
+      margin: 2rem 1.5rem;
+
+      @include themify($themes) {
+        color: themed("title-color");
+      }
+    }
   }
 }
 
@@ -29,8 +37,15 @@
 
   &__title {
     line-height: 1.1;
-    font-weight: 700;
+    font-weight: 900;
     font-family: $title-font;
+    font-size: 3rem;
+    line-height: 3rem;
+    overflow-wrap: break-word;
+
+    @include themify($themes) {
+      color: themed("title-color");
+    }
   }
 
   &__subtitle {

assets/sass/main.scss

@@ -36,6 +36,7 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'components/summary';
 @import 'components/expand';
 @import 'components/bgcolor';
+@import 'components/tag';
 
 @import 'layout/grid';
 @import 'layout/footer';
@@ -46,5 +47,4 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'pages/home';
 @import 'pages/single';
 @import 'pages/list';
-@import 'pages/blog';
-@import 'pages/taxo';
+@import 'pages/blog';

assets/sass/pages/_blog.scss

@@ -14,4 +14,8 @@
     @include justify-content(center);
     @include align-items(center);
   }
+
+  .subtitle {
+    margin: 0.25rem 0;
+  }
 }

assets/sass/pages/_single.scss

@@ -23,10 +23,10 @@
     font-family: $title-font;
     line-height: 3rem;
     overflow-wrap: break-word;
-    margin: 1.5rem 1rem 0.5rem;
+    margin: 2rem 1rem 0.25rem;
 
     @include themify($themes) {
-      color: themed("single-header-title-color");
+      color: themed("title-color");
     }
   }
 

assets/sass/pages/_taxo.scss

@@ -1,31 +0,0 @@
-.taxo {
-  &__header {
-    height: 170px;
-    width: 100%;
-    font-size: 44px;
-    font-weight: bold;
-    text-transform: capitalize;
-    
-    @include flexbox();
-    @include align-items(center);
-    @include justify-content(center);
-  }
-
-  &__key {
-    margin: 0 1rem;
-    font-size: 1.5rem;
-  }
-
-  &__ul {
-    margin: 1rem;
-  }
-
-  &__li {
-    margin: 0.125rem 0;
-  }
-
-  &__title {
-    font-size: 1.25rem;
-
-  }
-}

assets/sass/themes/_dark.scss

@@ -3,6 +3,8 @@ $dark: (
   link-hover: $dark-link-hover-color,
   body-color: #FCFCFA,
   hr-color: #595B5C,
+  title-color: #FCFCFA,
+  subtitle-color: darken(#FCFCFA, 5%),
   border-line-color: rgba(243, 242, 241, 0.1),
   active-font-color: $dark-active-font-color,
   body-background-color: #2D2A2E,
@@ -35,10 +37,11 @@ $dark: (
   breadcrumb-background-color: #2D2A2E,
   single-hr-background-color: #727072,
   single-blockquote-border-color: #FCFCFA,
-  single-header-title-color: #FCFCFA,
   single-contents-title-color: #ccc,
   single-header-title-background-color: #212121,
   single-contents-subtitle-color: #FCFCFA,
   expand-background-color: darken(#2D2A2E, 2%),
   expand-background-color-hover: #212121,
+  tag-num-background-color: #595B5C,
+  tag-text-background-color: #595B5C,
 );

assets/sass/themes/_light.scss

@@ -3,6 +3,8 @@ $light: (
   link-hover: $light-link-hover-color,
   body-color: #242729,
   hr-color: #bdbdbd,
+  title-color: #424242,
+  subtitle-color: darken(#424242, 5%),
   border-line-color: rgba(12, 13, 14, 0.1),
   active-font-color: $light-active-font-color,
   body-background-color: #fff,
@@ -36,9 +38,10 @@ $light: (
   breadcrumb-background-color: #fff,
   single-hr-background-color: #bdbdbd,
   single-blockquote-border-color: #bdbdbd,
-  single-header-title-color: #424242,
   single-header-title-background-color: #eee,
   single-contents-title-color: #607d8b,
   expand-background-color: #f7f8f9,
   expand-background-color-hover: darken(#f7f8f9, 3%),
+  tag-num-background-color: #bdbdbd,
+  tag-text-background-color: #eee,
 );

data/color.toml

@@ -3,6 +3,6 @@ dark_link_color = "#FFD866"
 dark_link_hover_color = "#FF6188"
 
 
-light_active_font_color = "#0071bc"
-light_link_color = "#1565c0"
-light_link_hover_color = "#379fef"
+light_active_font_color = "#007d9c"
+light_link_color = "#007d9c"
+light_link_hover_color = "#00ACD7"

layouts/_default/summary.html

@@ -14,10 +14,10 @@
         {{ .Summary }}
       {{ end }}
     </div>
-    {{ if $params.featured_image }}
+    {{ if $params.image }}
     <div class="summary-card__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-card__image"/>
+        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-card__image"/>
       </a>
     </div>
     {{ else if $params.featured_video }}

layouts/_default/taxonomy.html

@@ -1,28 +1,42 @@
 {{ define "main" }}
 <div class="top">
-  <header class="main">
-    <div class="sv" data-view="full">
-      {{ partial "header/taxo-header.html" . }}
+  <header class="header__wrapper bgcolor__header">
+    <div class="divider">
+      <div class="lmr">
+        {{ partial "header/taxo-header.html" . }}
+      </div>
     </div>
   </header>
-</div>
-<div class="mid">
-  <main class="main">
-    <div class="sv" data-view="full">
-      {{ $paginator := .Paginate (.Pages.GroupByDate (.Site.Params.taxoGroupByDate | default "2006")) .Site.Params.taxoPaginate }}
-      
-      {{ range ($paginator).PageGroups }}
-        <span class="taxo__key">{{ .Key }}</span>
-        <ul class="taxo__ul">
-          {{ range .Pages }}
-          <li class="taxo__li">
-            <a href="{{ .Permalink }}" class="taxo__title">{{ .Title }}</a>
-          </li>
+
+  <div class="header__wrapper bgcolor__breadcrumb">
+    <div class="divider">
+      <div class="lmr flexbox jc-center flex-wrap tag__wrapper">
+        {{ range $index, $element := .Site.Taxonomies.tags }}
+          {{ if $index }}
+            <a href="{{ $element.Page.RelPermalink }}" class="tag">
+              <span class="tag__text">
+                {{ $element.Page.Title }}
+              </span>
+              <span class="tag__num" dir="auto">
+                {{ printf "%#v" (len $element) }}
+              </span>
+            </a>
           {{ end }}
-        </ul>
-      {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>
 
-      {{ partial "main/component/pagination.html" . }}
+<div class="mid blog__bg">
+  <main class="main blog__bg">
+    <div class="sv" data-view="full">
+      <div class="blog">
+        {{ range .RegularPages }}
+          {{ .Render "summary" }}
+        {{ end }}
+        {{ partial "main/component/pagination.html" . }}
+      </div>
     </div>
 
   </main>

layouts/blog/section.html

@@ -1,10 +1,31 @@
 {{ define "main" }}
 <div class="top">
-  <header class="main blog__bg">
-    <div class="sv" data-view="full">
-      {{ partial "header/blog-header.html" . }}
+  <header class="header__wrapper bgcolor__header">
+    <div class="divider">
+      <div class="lmr">
+        {{ partial "header/blog-header.html" . }}
+      </div>
     </div>
   </header>
+  
+  <div class="header__wrapper bgcolor__breadcrumb">
+    <div class="divider">
+      <div class="lmr flexbox jc-center flex-wrap tag__wrapper">
+        {{ range $index, $element := .Site.Taxonomies.tags }}
+          {{ if $index }}
+            <a href="{{ $element.Page.RelPermalink }}" class="tag">
+              <span class="tag__text">
+                {{ $element.Page.Title }}
+              </span>
+              <span class="tag__num" dir="auto">
+                {{ printf "%#v" (len $element) }}
+              </span>
+            </a>
+          {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
 </div>
 <div class="mid blog__bg">
   <main class="main blog__bg">

layouts/blog/single.html

@@ -6,6 +6,9 @@
     </nav>
 
     <article id="list-main" class="m">
+      {{ if $.Param "enableBlogBreadcrumb" }}
+        {{ partial "main/component/breadcrumb.html" . }}
+      {{ end }}
       {{ partial "main/sections/list-main.html" . }}
       {{ partial "main/component/pagination-single.html" . }}
     </article>

layouts/partials/header/blog-header-text.html

@@ -1,7 +1,7 @@
 {{ if .Params.header }}
   {{ range .Params.header }}
     {{ if eq .type "text" }}
-    <div class="blog-header blog-header__align-{{ .align }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
+    <div class="blog-header blog-header__align-{{ .align }}" style="width: 100%; height: {{ $.Param "headerHeight" | default 112 }}px;">
       {{ $header := . }}
       {{ if .title }}
         {{ range .title }}

layouts/partials/header/taxo-header.html

@@ -1,3 +1,5 @@
-<header class="taxo__header">
-  {{ .Title }}
-</header>
+<div class="blog-header blog-header__align-center" style="width: 100%; height: {{ $.Param "headerHeight" | default 112 }}px;">
+  <div class="blog-header__title">
+    {{ .Title }}
+  </div>
+</div>

layouts/partials/main/component/breadcrumb.html

@@ -1,4 +1,4 @@
-<nav class="breadcrumb" aria-label="breadcrumbs">
+<nav class="breadcrumb" aria-label="breadcrumbs" data-is-blog="{{ if eq .Type "blog" }}true{{ else }}false{{ end }}">
   <ol>
     {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
   </ol>

layouts/partials/main/header.html

@@ -2,7 +2,7 @@
   <div class="header__wrapper bgcolor__header">
     <div class="divider">
       <div class="lmr">
-        <h2 class="single__title">{{ .Title }}</h2>
+        <h2 class="title">{{ .Title }}</h2>
       </div>
     </div>
   </div>