fixed #112

assets/ananke/css/custom.css

@@ -40,3 +40,7 @@ reference:
 - https://jsntn.com/internet/anti-spam.html
 */
 span.displaynone { display: none; }
+
+.sticky {
+    background-color: #408bc9;
+}

config.yaml

@@ -9,7 +9,7 @@ hasCJKLanguage: true
 summaryLength: 4000
 paginate: 6 # setting the number of posts per page, and Hugo defaults to 10
             # posts per page
-timeZone: Asia/Shanghai 
+timeZone: Asia/Shanghai
 
 markup:
   goldmark:

content/blog/10-years.md

@@ -32,8 +32,9 @@ readers:
 - xiali
 - yitiaodahai
 - xiaoxu
-- youmai 
+- youmai
 toc: true
+sticky_post: true
 ---
 
 <p style="text-align: center;">
@@ -120,4 +121,4 @@ toc: true
 
 于是在段老板的支持下，朗读者们从 2022 年初开始了书房 2.0 的计划，建立了「一个人的书房」网站：https://shufang.org。希望能寻回并收集那些曾经给我们力量和安慰的声音，寻回那片我们曾经的[精神栖息地](https://shufang.org/blog/2022-04-25-1950.html)。
 
-👉 书房节目收听方式 https://shufang.org/listen.html
+👉 书房节目收听方式 https://shufang.org/listen.html

i18n/zh.toml

@@ -71,4 +71,7 @@ other = "朗读者"
 other = "作家说"
 
 [books]
-other = "书目"
+other = "书目"
+
+[sticky]
+other = "置顶"

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-  <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+  <article class="cf ph3 ph5-l pv3 pv4-l f5 center measure-wide lh-copy mid-gray">
     {{ .Content }}
   </article>
   {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
@@ -24,12 +24,26 @@
 
       {{ $n_posts := $.Param "recent_posts_number" | default 3 }}
 
+{{/* start - show the sticky posts */}}
+{{ $allBlogPosts := where .Site.RegularPages "Section" "blog" }}
+{{ range $allBlogPosts }}
+{{ if .Params.sticky_post }}
+{{ partial "summary-with-image.html" . }}
+{{ end }}
+{{ end }}
+{{/* end - show the sticky posts */}}
+
       <section class="w-100 mw8">
         {{/* Range through the first $n_posts items of the section */}}
         {{ range (first $n_posts $section) }}
-          <div class="relative w-100 mb4">
-            {{ partial "summary-with-image.html" . }}
-          </div>
+	  {{/* start - exclude the sticky posts */}}
+	  {{ if .Params.sticky_post }}
+	  {{/* do nothing */}}
+	  {{ else }}
+	  <div class="relative w-100 mb4">
+	      {{ partial "summary-with-image.html" . }}
+	  </div>
+	  {{ end }} {{/* end - exclude the sticky posts */}}
         {{ end }}
       </section>
 

layouts/partials/summary-with-image.html

@@ -0,0 +1,34 @@
+{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+<article class="bb b--black-10">
+  <div class="db pv4 ph3 ph0-l no-underline dark-gray">
+    <div class="flex flex-column flex-row-ns">
+      {{ if $featured_image }}
+          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+        {{ $featured_image := (trim $featured_image "/") | absURL }}
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <a href="{{.RelPermalink}}" class="db grow">
+            <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+          </a>
+        </div>
+      {{ end }}
+      <div class="blah w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
+        <h1 class="f3 fw1 athelas mt0 lh-title">
+          <a href="{{.RelPermalink}}" class="color-inherit dim link">
+	      {{/* This is a sticky post, to be fixed later */}}
+	      {{ if .Params.sticky_post }}
+	      <span class="sticky f5 pv1 ph3 br2 ba white b--blue">{{ i18n "sticky" }}</span> {{ .Title }}
+	      {{ else }}
+	      {{ .Title }}
+	      {{ end }}
+            </a>
+        </h1>
+        <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
+          {{ .Summary }}
+        </div>
+          <a href="{{.RelPermalink}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{ $.Param "read_more_copy" | default (i18n "readMore") }}</a>
+        {{/* TODO: add author
+        <p class="f6 lh-copy mv0">By {{ .Author }}</p> */}}
+      </div>
+    </div>
+  </div>
+</article>

layouts/readers/list.html

@@ -3,7 +3,7 @@
     <section class="cf ph3 ph5-l pv3 pv4-l f4 center measure-wide lh-copy mid-gray">
       {{- .Content -}}
     </section>
-    <section class="flex-ns flex-wrap justify-around mt5">    
+    <section class="flex-ns flex-wrap justify-around mt5">
 {{/* fix from https://discourse.gohugo.io/t/sort-order-only-bydate-or-byweight/6961/6 */}}
 {{ range (.Paginate (.Pages.ByParam "number") 50).Pages }}
         <div class="relative w-100 w-30-l mb4 bg-white">
@@ -13,4 +13,4 @@
     </section>
     {{- template "_internal/pagination.html" . -}}
   </article>
-{{ end }}
+{{ end }}