Merge branch 'newsletter'

* newsletter: (28 commits)
  newsletter section: only show list when there are pages
  lower nav height in mobile
  use content-gap instead of gap for header
  consistant header gaps
  subtle adjustments
  clear debug code
  finish newsletter archives
  add newsletter sub box in single
  enhance inline links
  fix rss pages query
  newsletter regular page responsive
  enlarge post footer bottom border size from 1 to 3px
  fix all pages query issues in: list, archives, newsletter section, post_nav_links
  fixup! finish newsletter section styling
  newsletter section page responsive
  finish newsletter section styling
  adjust first-entry ul/ol margin
  styling newsletter section list
  rename .list to .list-page
  styling newsletter sub form
  ...

assets/css/common/main.css

@@ -4,8 +4,18 @@
     min-height: calc(100vh - var(--header-height) - var(--footer-height));
     max-width: calc(var(--main-width) + var(--gap) * 2);
     margin: auto;
-    padding: var(--gap);
+    padding: var(--content-gap) var(--gap) 0;
-    padding-bottom: 0;
+}
+
+@media screen and (max-width: 500px) {
+    .main {
+        padding-top: 0;
+    }
+}
+
+/* same as .post-header */
+.page-header {
+    margin: var(--content-gap) 0 calc(var(--content-gap) * 1.5);
 }
 
 .mark-line {
@@ -14,7 +24,7 @@
 }
 mark {
     margin: 0 -0.4em;
-    padding: 0.1em 0.4em;
+    padding: 0em 0.4em;
     border-radius: 0.8em 0.3em;
     background: transparent;
     background-image: linear-gradient(
@@ -27,6 +37,70 @@ mark {
     box-decoration-break: clone;
 }
 
+/* for home and section page */
+.first-entry {
+    position: relative;
+    min-height: 320px;
+    margin: var(--gap) 0 calc(var(--gap) * 2) 0;
+}
+
+.first-entry .entry-header {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    margin: var(--gap) 0 calc(var(--gap) * 2);
+}
+
+.first-entry .entry-header h1 {
+    font-size: 34px;
+    line-height: 1.3;
+}
+
+.first-entry .entry-content {
+    margin: 14px 0;
+    font-size: 17px;
+    color: var(--primary);
+    line-height: 1.6em;
+    display: block;
+    overflow: initial;  /* fix <mark> edge get cut */
+}
+
+@media screen and (max-width: 500px) {
+    .first-entry .entry-header h1 {
+        font-size: 30px;
+    }
+    .first-entry .entry-content {
+        font-size: 16px;
+    }
+}
+
+.first-entry .entry-content p {
+    margin-bottom: .8em;
+}
+.first-entry .entry-content ul,
+.first-entry .entry-content ol {
+    margin: .8em 0;
+}
+.first-entry .entry-content li p {
+    margin-bottom: .5em;
+}
+
+.first-entry .entry-footer {
+    font-size: 14px;
+}
+
+.inline-links a {
+    font-weight: 500;
+    color: var(--primary);
+    box-shadow: var(--link-underline-shadow);
+    transition: var(--link-transition);
+}
+.inline-links a:hover {
+    color: var(--link-hover-color);
+    box-shadow: var(--link-hover-underline-shadow);
+}
+
+
 /* for post page */
 .main.post {
     max-width: calc(var(--post-width) + var(--gap) * 2);

assets/css/common/post-entry.css

@@ -1,46 +1,3 @@
-.first-entry {
-    position: relative;
-    min-height: 320px;
-    margin: var(--gap) 0 calc(var(--gap) * 2) 0;
-}
-
-.first-entry .entry-header {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    margin: var(--gap) 0 calc(var(--gap) * 2);
-}
-
-.first-entry .entry-header h1 {
-    font-size: 34px;
-    line-height: 1.3;
-}
-@media screen and (max-width: 400px) {
-    .first-entry .entry-header h1 {
-        font-size: 30px;
-    }
-}
-
-.first-entry .entry-content {
-    margin: 14px 0;
-    font-size: 17px;
-    color: var(--primary);
-    line-height: 1.6em;
-    display: block;
-    overflow: initial;  /* fix <mark> edge get cut */
-}
-
-.first-entry .entry-content p {
-    margin-bottom: .8em;
-}
-.first-entry .entry-content li p {
-    margin-bottom: .5em;
-}
-
-.first-entry .entry-footer {
-    font-size: 14px;
-}
-
 .home-info .entry-content {
     -webkit-line-clamp: unset;
 }

assets/css/common/post-single.css

@@ -1,11 +1,10 @@
-.page-header,
 .post-header {
-    margin: 32px 0;
+    margin: var(--content-gap) 0 calc(var(--content-gap) * 1.5);
 }
 
 .post-title {
     font-size: 40px;
-    margin: var(--content-gap) 0;
+    margin-bottom: var(--content-gap);
 }
 
 .post-description {
@@ -401,6 +400,8 @@ h6:hover .anchor {
 
 .post-footer {
     margin-top: calc(var(--content-gap) * 1.5);
+    padding-bottom: calc(var(--content-gap) * 2);
+    border-bottom: 3px solid var(--tertiary);
 }
 
 .share-buttons {
@@ -453,7 +454,7 @@ h6:hover .anchor {
 }
 
 .paginav {
-    margin: var(--content-gap) 0;
+    margin-top: var(--content-gap);
     display: flex;
     line-height: 30px;
     border-radius: var(--radius);
@@ -574,10 +575,7 @@ h6:hover .anchor {
 }
 
 .comments {
-    border-top: 1px solid var(--tertiary);
+    margin: var(--content-gap) 0;
-}
-.comments {
-    margin: 40px 0 20px;
 }
 .comments .title {
     margin: 20px 0;
@@ -593,6 +591,7 @@ h6:hover .anchor {
     vertical-align: super;
 }
 
+/* footnotes */
 .footnotes {
     font-size: .8em;
     color: var(--primary-dim);

assets/css/core/reset.css

@@ -117,7 +117,7 @@ img {
     background: 0 0;
 }
 
-.list:not(.dark)::-webkit-scrollbar-track {
+.list-page:not(.dark)::-webkit-scrollbar-track {
     background: var(--code-bg);
 }
 
@@ -127,7 +127,7 @@ img {
     border-radius: var(--radius);
 }
 
-.list:not(.dark)::-webkit-scrollbar-thumb {
+.list-page:not(.dark)::-webkit-scrollbar-thumb {
     border: 5px solid var(--code-bg);
 }
 

assets/css/core/theme-vars.css

@@ -27,6 +27,12 @@
     --link-transition: all 0.3s ease;
     --line-yellow: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' width='120' height='6' viewBox='0 0 120 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M119 0.8C60 4 50-0.5 1 1.5' stroke='%23fc0' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
 }
+@media screen and (max-width: 500px) {
+    :root {
+        --header-height: 52px;
+    }
+
+}
 
 .dark {
     --theme: rgb(29, 30, 32);
@@ -47,10 +53,10 @@
     --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
 }
 
-.list {
+.list-page {
     background: var(--code-bg);
 }
 
-.dark.list {
+.dark.list-page {
     background: var(--theme);
 }

assets/css/core/zmedia.css

@@ -39,7 +39,7 @@
 
 /* footer */
 @media screen and (max-width: 900px) {
-    .list .top-link {
+    .list-page .top-link {
         transform: translateY(-5rem);
     }
 }

assets/css/extended/newsletter.scss

@@ -0,0 +1,300 @@
+/*
+color candidates:
+#CB3A56 茜色
+#F05654 銀紅
+#F20C00 石榴紅
+#FF2D51 火紅
+*/
+
+$medium: 960px;
+$small: 500px;
+
+body.type-newsletter {
+  --signature: #CB3A56;
+  --signature-bg: rgba(203, 58, 87, 0.239);
+  --signature-bg-dim: rgba(203, 58, 87, 0.147);
+  --main-border: 5px solid var(--signature);
+  --icon-length: 50px;
+  --icon-font-size: 32px;
+
+  // override theme-vars
+  --link-hover-color: var(--signature);
+  --link-hover-underline-color: var(--signature);
+  --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
+
+  @media screen and (max-width: $small) {
+    --icon-length: 40px;
+    --icon-font-size: 24px;
+  }
+
+  /* a links in section/archives page content and regular page post-content */
+  &.kind-section .main .content a,
+  &.layout-archives .main .content a,
+  &.kind-page .post-content a {
+    font-weight: 500;
+    color: var(--primary);
+    box-shadow: var(--link-underline-shadow);
+    // transition: var(--link-transition);
+    &:hover {
+      color: var(--link-hover-color);
+      box-shadow: var(--link-hover-underline-shadow);
+    }
+  }
+
+  /* shared */
+  .sub-form {
+    display: flex;
+    flex-direction: column;
+    margin: calc(var(--content-gap) * 1.5) 0;
+    form {
+      display: flex;
+      line-height: 1.2em;
+      flex-wrap: wrap;
+    }
+    input {
+      border: 3px solid var(--signature-bg-dim);
+      color: var(--secondary);
+      border-radius: 0px;
+      appearance: none;
+      outline: none;
+      background-color: var(--theme);
+      flex-grow: 1;
+      padding: 9px 15px;
+      transition: var(--link-transition);
+
+      &:focus {
+        color: var(--primary);
+        border-color: var(--signature);
+      }
+    }
+    button {
+      display: block;
+      background-color: var(--signature);
+      color: var(--theme);
+      padding: 12px 15px;
+      margin-left: var(--content-gap);
+      white-space: nowrap;
+    }
+  }
+  @media screen and (max-width: $small) {
+    .sub-form {
+      button {
+        margin-left: 0;
+        margin-top: calc(var(--content-gap)/2);
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+body.type-newsletter.kind-section,
+body.type-newsletter.layout-archives {
+  /* section/archives page */
+
+  .main {
+    border: var(--main-border);
+    background-color: var(--theme);
+    margin-top: var(--content-gap);
+    padding-top: 0;
+    padding-bottom: var(--icon-length);
+    min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap));
+    max-width: var(--nav-width);
+
+    @media screen and (max-width: $medium) {
+      margin-left: var(--gap);
+      margin-right: var(--gap);
+    }
+  }
+
+  .main-icon {
+    position: absolute;
+    left: 0; top: 0;
+    width: var(--icon-length);
+    height: var(--icon-length);
+    line-height: calc(var(--icon-length) - 3px);
+    border-right: var(--main-border);
+    border-bottom: var(--main-border);
+    background-color: var(--signature);
+    color: var(--theme);
+    font-size: var(--icon-font-size);
+    text-align: center;
+  }
+
+  .main {
+    .content {
+      max-width: calc(var(--post-width));
+      margin: var(--icon-length) auto 0;
+    }
+
+    .first-entry {
+      margin-bottom: 0;
+    }
+
+    h1 {
+      text-align: center;
+      margin-bottom: 10px;
+    }
+    .subtitle {
+      text-align: center;
+      color: var(--secondary);
+      line-height: 1.2em;
+      margin-bottom: var(--content-gap);
+    }
+
+    h2 {
+      margin: 40px 0 20px;
+
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: var(--content-gap);
+
+      .item {
+        display: flex;
+        border-bottom: 1px solid var(--tertiary-bg);
+        padding: 8px 0;
+
+        .date, .issueno {
+          font-size: .9em;
+          color: var(--secondary);
+        }
+        .date {
+          width: 150px;
+        }
+        .title {
+          flex-grow: 1;
+          font-weight: 500;
+          a {
+            display: block;
+            width: 100%;
+            box-shadow: none;
+          }
+          a:hover {
+            color: var(--signature);
+          }
+          em {
+            color: var(--secondary);
+            font-style: normal;
+            font-size: .8em;
+            margin-inline-start: 1em;
+            vertical-align: top;
+          }
+        }
+        .issueno {
+          width: 50px;
+          text-align: right;
+        }
+      }
+    }
+    @media screen and (max-width: $small) {
+      .list {
+        .item {
+          flex-wrap: wrap;
+          .date {
+            flex-grow: 1;
+            order: 1;
+          }
+          .issueno {
+            order: 2;
+          }
+          .title {
+            order: 3;
+            flex-grow: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* regular page */
+body.type-newsletter.kind-page {
+  .newsletter-brand {
+    --icon-length: 50px;
+    --padding: 15px;
+    display: flex;
+    background-color: var(--signature-bg-dim);
+    transition: var(--link-transition);
+    font-size: 32px;
+    margin-bottom: var(--content-gap);
+    line-height: var(--icon-length);
+    box-shadow: none; // reset
+
+    .icon, .name {
+      height: var(--icon-length);
+    }
+    .icon {
+      width: var(--icon-length);
+      color: var(--theme);
+      text-align: center;
+      background-color: var(--signature);
+    }
+    .name {
+      padding: 0 var(--padding);
+      font-weight: bolder;
+      color: var(--signature);
+    }
+    .remark {
+      color: var(--signature);
+      font-weight: 300;
+      transition: var(--link-transition);
+    }
+    .arrow {
+      margin-left: auto;
+      color: transparent;
+      display: flex;
+      align-items: center;
+      padding-right: var(--padding);
+      transition: var(--link-transition);
+    }
+
+    &:hover, &:active {
+      box-shadow: none; // reset
+      background-color: var(--signature-bg);
+      .arrow {
+        color: var(--signature);
+      }
+      .remark {
+        color: transparent;
+      }
+    }
+  }
+  @media screen and (max-width: $small) {
+    .newsletter-brand {
+      font-size: 24px;
+      .remark {
+        margin-left: auto;
+        padding-right: var(--padding);
+      }
+      .arrow {
+        display: none;
+      }
+    }
+  }
+
+  .post-title {
+    font-size: 36px;
+  }
+  .post-footer {
+    border-bottom-color: var(--signature);
+  }
+
+  .newsletter-sub {
+    margin-top: calc(var(--content-gap) * 1.5);
+    background-color: var(--signature-bg-dim);
+    padding: 1em;
+    .notice {
+      font-size: .8em;
+      color: var(--signature);
+      line-height: 1.6;
+    }
+    .sub-form {
+      margin: 1em 0;
+      input {
+        border-color: var(--signature-bg);
+      }
+    }
+  }
+}

layouts/_default/archives.html

@@ -9,7 +9,13 @@
   {{- end }}
 </header>
 
-{{- $pages := where site.AllPages "Type" "in" site.Params.mainSections }}
+{{/* get pages from the current page's section */}}
+{{/* in this way, archives.html could be used for section archives other than the only one archives of the whole site */}}
+{{- $sections := site.Params.mainSections }}
+{{- if .Section }}
+  {{- $sections = slice .Section }}
+{{- end }}
+{{- $pages := where (where site.RegularPages "Section" "in" $sections) "Params.hidden" "!=" true }}
 
 {{- range $pages.GroupByPublishDate "2006" }}
 {{- if ne .Key "0001" }}
@@ -22,7 +28,6 @@
     <h3 class="archive-month-header">{{- .Key }}<sup class="archive-count">&nbsp;&nbsp;{{ len .Pages }}</sup></h3>
     <div class="archive-posts">
       {{- range .Pages }}
-      {{- if eq .Kind "page" }}
       <div class="archive-entry">
         <h3 class="archive-entry-title">
           {{- .Title | markdownify }}
@@ -34,7 +39,6 @@
         <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
       </div>
       {{- end }}
-      {{- end }}
     </div>
   </div>
   {{- end }}

layouts/_default/baseof.html

@@ -8,11 +8,11 @@
 
 <body class="
 {{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`)) -}}
-{{- print "list" -}}
+{{- print "list-page" -}}
 {{- end -}}
 {{- if eq site.Params.defaultTheme `dark` -}}
 {{- print " dark" }}
-{{- end -}}
+{{- end }} type-{{ .Type }} kind-{{ .Kind }} layout-{{ .Layout -}}
 " id="top">
     {{- partialCached "header.html" . .Page -}}
     <main class="main {{- if (eq .Kind `page`) -}}{{- print " post" -}}{{- end -}}">

layouts/_default/list.html

@@ -13,6 +13,14 @@
     {{ .Description | markdownify }}
   </div>
   {{- end }}
+  <div class="inline-links">
+    {{- with .Param "archivesSlug" }}
+      <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
+    {{- end }}
+    {{ with .OutputFormats.Get "rss" -}}
+      • <a href="{{ .Permalink }}" target="_blank">RSS</a>
+    {{ end -}}
+  </div>
 </header>
 {{- end }}
 
@@ -27,7 +35,8 @@
 
 {{- $pages := .Pages }}
 {{- if .IsHome }}
-  {{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
+  {{/* get all regular pages instead of pages in a section */}}
+  {{- $pages = where site.RegularPages "Section" "in" site.Params.mainSections }}
 {{- end }}
 {{- $pages = where $pages "Params.hidden" "!=" true }}
 

layouts/_default/rss.xml

@@ -1,15 +1,15 @@
-{{- $pctx := . -}}
+{{- $pages := .Pages -}}
-{{- if .IsHome -}}{{ $pctx = site }}{{- end -}}
+{{- if $.IsHome -}}
-{{- $pages := slice -}}
+  {{/* get all regular pages instead of pages in a section */}}
-{{- if or $.IsHome $.IsSection -}}
+  {{- $pages = where site.RegularPages "Section" "in" site.Params.mainSections -}}
-{{- $pages = where $pctx.RegularPages "Type" "in" site.Params.mainSections }}
+{{- end }}
-{{- else -}}
+{{- $pages = where $pages "Params.hidden" "!=" true -}}
-{{- $pages = $pctx.Pages -}}
+
-{{- end -}}
 {{- $limit := site.Config.Services.RSS.Limit -}}
 {{- if ge $limit 1 -}}
 {{- $pages = $pages | first $limit -}}
 {{- end -}}
+
 {{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>

layouts/_default/single.html

@@ -1,15 +1,24 @@
 {{- define "main" }}
+{{- $isNewsletter := eq .Type "newsletter" }}
 
 <article class="post-single">
   <header class="post-header">
     {{ partial "breadcrumbs.html" . }}
+
+    {{- if $isNewsletter -}}
+      {{- partial "newsletter_brand.html" . }}
+    {{- end -}}
     <h1 class="post-title">
-      {{ .Title }}
+      {{- if $isNewsletter -}}
-      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
+        {{- replace .Title (.Param "titlePrefix") (.Param "titlePrefixReplace") -}}
+      {{- else -}}
+        {{- .Title -}}
+      {{- end -}}
+      {{- if .Draft -}}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end -}}
     </h1>
     {{- if .Description }}
     <div class="post-description">
-      {{ .Description }}
+      {{- .Description -}}
     </div>
     {{- end }}
     {{- if not (.Param "hideMeta") }}
@@ -43,6 +52,15 @@
     {{- if (.Param "ShowPostNavLinks") }}
     {{- partial "post_nav_links.html" . }}
     {{- end }}
+
+    {{- if $isNewsletter }}
+      <div class="newsletter-sub">
+        <div class="notice">
+          感谢你能读到这里，如果觉得有趣的话，欢迎在下方输入邮箱进行订阅。
+        </div>
+        {{- partial "newsletter_sub_form.html"}}
+      </div>
+    {{- end }}
   </footer>
 
   {{- if not (.Param "noComments") }}

layouts/newsletter/archives.html

@@ -0,0 +1,33 @@
+{{- define "main" }}
+<div class="main-icon">＠</div>
+
+<div class="content">
+  <h1>{{ .Title }}</h1>
+  {{- partial "newsletter_sub_form.html"}}
+
+  {{/* get pages from the current page's section */}}
+  {{- $sections := slice .Section }}
+  {{- $pages := where (where site.RegularPages "Section" "in" $sections) "Params.hidden" "!=" true }}
+
+  {{/* TODO statistics */}}
+  <div class="list">
+  {{- range $pages }}
+    <div class="item">
+      <div class="date">
+        {{- if not .Date.IsZero -}}
+          {{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}
+        {{- end }}
+      </div>
+      <div class="title">
+        <a href="{{ .Permalink }}">{{- .Title }}
+          {{- if .Draft }}<em>[Draft]</em>{{- end }}
+          {{- if .Weight }}<em>[Pinned]</em>{{- end }}
+        </a>
+      </div>
+      <div class="issueno">{{ with .Param "issueno" }}#{{ . }}{{ end }}</div>
+    </div>
+  {{- end }}
+  </div>
+
+</div>
+{{ end }}

layouts/newsletter/section.html

@@ -0,0 +1,50 @@
+{{/* section is AKA list */}}
+
+{{- define "main" }}
+<div class="main-icon">＠</div>
+
+<div class="content">
+  <h1>{{ .Title }}</h1>
+  {{ with .Param "subtitle" }}<div class="subtitle">{{ . }}</div>{{ end }}
+
+  <div class="first-entry">
+    <section class="entry-content">{{ .Description | markdownify }}</section>
+    {{- partial "newsletter_sub_form.html"}}
+  </div>
+
+  {{ $pages := where .Pages "Params.hidden" "!=" true }}
+  {{ if $pages }}
+  <h2>最新通讯</h2>
+
+  <div class="list">
+  {{- range first 5 $pages }}
+    <div class="item">
+      <div class="date">
+        {{- if not .Date.IsZero -}}
+          {{ .Date | time.Format (default "January 2, 2006" site.Params.DateFormat) }}
+        {{- end }}
+      </div>
+      <div class="title">
+        <a href="{{ .Permalink }}">{{- .Title }}
+          {{- if .Draft }}<em>[Draft]</em>{{- end }}
+          {{- if .Weight }}<em>[Pinned]</em>{{- end }}
+        </a>
+      </div>
+      <div class="issueno">{{ with .Param "issueno" }}#{{ . }}{{ end }}</div>
+    </div>
+  {{- end }}
+  </div>
+  {{ end }}
+
+  <h2>相关链接</h2>
+  <div class="inline-links">
+    {{- with .Param "archivesSlug" }}
+      <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
+    {{- end }}
+    {{ with .OutputFormats.Get "rss" -}}
+      • <a href="{{ .Permalink }}" target="_blank">RSS</a>
+    {{ end -}}
+  </div>
+
+</div>
+{{ end }}

layouts/partials/head.html

@@ -47,10 +47,11 @@
 {{- /* order is important */}}
 {{- $core := (slice $theme_vars $reset $common $commonHighlight $media) | resources.Concat "assets/css/core.css" }}
 {{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" }}
+{{- $extendedScss := (resources.Match "css/extended/*.scss") | resources.Concat "assets/css/extended.scss" | resources.ToCSS }}
 
 {{- /* bundle all required css */}}
 {{- /* Add extended css after theme style */ -}}
-{{- $stylesheet := (slice $core $extended) | resources.Concat "assets/css/stylesheet.css" | minify }}
+{{- $stylesheet := (slice $core $extended $extendedScss) | resources.Concat "assets/css/stylesheet.css" | minify }}
 
 {{- if not site.Params.assets.disableFingerprinting }}
 {{- $stylesheet := $stylesheet | fingerprint }}
@@ -125,15 +126,15 @@
                 --border: rgb(51, 51, 51);
             }
 
-            .list {
+            .list-page {
                 background: var(--theme);
             }
 
-            .list:not(.dark)::-webkit-scrollbar-track {
+            .list-page:not(.dark)::-webkit-scrollbar-track {
                 background: 0 0;
             }
 
-            .list:not(.dark)::-webkit-scrollbar-thumb {
+            .list-page:not(.dark)::-webkit-scrollbar-thumb {
                 border-color: var(--theme);
             }
         }

layouts/partials/header.html

@@ -133,7 +133,7 @@ function toggleThemeListener() {
                 <a href="{{ $menu_item_url }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
                 {{- if $is_search -}}data-no-instant{{- end -}}
                 {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
-                {{- if eq $menu_item_url $page_url }} class="active" {{- end }}
+                {{- if strings.HasPrefix $page_url $menu_item_url }} class="active" {{- end }}
                 {{- if .Params.External }} target="_blank" {{- end }}
                 >
                     {{- .Pre }}

layouts/partials/newsletter_brand.html

@@ -0,0 +1,8 @@
+<a class="newsletter-brand" href="{{ .Parent.Permalink }}">
+  <div class="icon">＠</div>
+  <div class="name">{{ .Param "newsletterName" }}</div>
+  {{ with .Param "issueno" }}<div class="remark">#{{ . }}</div>{{ end }}
+  <div class="arrow">
+    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+  </div>
+</a>

layouts/partials/newsletter_sub_form.html

@@ -0,0 +1,8 @@
+{{/* Add `layouts/partials/newsletter_sub_form.html` in your own code to customize the form */}}
+
+<div class="sub-form">
+  <form action="">
+    <input type="text" name="email" placeholder="Your email address">
+    <button>订阅 | Subscribe</button>
+  </form>
+</div>

layouts/partials/post_nav_links.html

@@ -1,4 +1,10 @@
-{{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{/* get pages from the current page's section */}}
+{{- $sections := site.Params.mainSections }}
+{{- if .Section }}
+  {{- $sections = slice .Section }}
+{{- end }}
+{{- $pages := where (where site.RegularPages "Section" "in" $sections) "Params.hidden" "!=" true }}
+
 {{- if and (gt (len $pages) 1) (in $pages . ) }}
 <nav class="paginav">
   {{- with $pages.Next . }}