🚧 ✨ 🔧 Finish the sidebar features develop tasks.

assets/css/style.css

@@ -1,21 +1,34 @@
 /** User-defined style. **/
-{{- $P := .Site.Params -}}
+{{ $P := .Site.Params -}}
 
+{{- with $P.sidebar -}}
+.main {
+{{ if eq .position "right" }}
+  flex-direction: row-reverse;
+{{- end }}
+}
+.header-inner {
+  width: {{ .width }}px;
+}
+.main-inner {
+  width: calc(100% - {{ add .width .offset }}px);
+}
 .sidebar {
+  width: {{ .width }}px;
   visibility: inherit;
 }
-
 .sidebar-inner {
-  padding: 10px;
+  padding: {{ .padding }} 10px;
 }
+{{- end }}
 
 .site-author-image {
-{{ if $P.avatar.rounded }}
+{{- if $P.avatar.rounded }}
   border-radius:50%;
-{{ end }}
+{{- end }}
-{{ if $P.avatar.rotated }}
+{{- if $P.avatar.rotated }}
   transition: transform 1s ease-out;
-{{ end }}
+{{- end }}
 }
 
 .back-to-top {
@@ -74,5 +87,9 @@
 }
 
 .cc-license {
+{{ if eq $P.creativeCommons.size "big" }}
+  margin-top: 10px;
+{{ else }}
   margin-top: 5px;
+{{- end }}
 }

exampleSite/config.yaml

@@ -72,6 +72,28 @@ params:
     #  admins: <fb:admin_id>
     #  app_id: <fb:app_id>
 
+  sidebar:
+    # Sidebar Position.
+    #position: left | right
+    position: left
+
+    # Manual define the sidebar width. If commented, will be default for:
+    # Muse | Mist: 320
+    # Pisces | Gemini: 240
+    width: 256
+
+    # Sidebar Display (only for Muse | Mist), available values:
+    #  - post    expand on posts automatically. Default.
+    #  - always  expand for all pages automatically.
+    #  - hide    expand only when click on the sidebar toggle icon.
+    #  - remove  totally remove sidebar including sidebar toggle.
+    display: post
+
+    # Sidebar padding in pixels.
+    padding: 30
+    # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
+    offset: 18
+
   # Sidebar Avatar
   avatar:
     # Replace the default image and set the url here.
@@ -81,6 +103,9 @@ params:
     # If true, the avatar will be rotated with the cursor.
     rotated: true
 
+  # Show Posts / Categories / Tags label in sidebar.
+  siteState: true
+
   # Social Links
   # Usage: `Key: permalink || icon`
   # Key is the link label showing to end users.
@@ -104,7 +129,7 @@ params:
     # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
     license: by-nc-nd
     # Available values: big | small
-    size: small
+    size: big
     sidebar: true
     post: true
     # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh

layouts/partials/header/sidebar.html

@@ -17,6 +17,7 @@
                     <div class="site-description" itemprop="description">{{ $SP.description }}</div>
                 </div>
                 <div class="site-state-wrap site-overview-item animated">
+                    {{- if $SP.siteState }}
                     <nav class="site-state">
                         <div class="site-state-item site-state-posts">
                             <a href="/archives/">
@@ -33,6 +34,7 @@
                             <span class="site-state-item-name">{{ T "SiteTagsTitle" }}</span>
                         </div>
                     </nav>
+                    {{- end }}
                     <div class="rss-link">
                       <a href="/index.xml" rel="alternate" type="application/rss+xml" target="_blank">
                           <i class="fa fa-rss"></i>