style: refactor index layout

1 files changed, 123 insertions, 17 deletions

diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html
index ea6ed2b..a666a4c 100644
--- a/layouts/shortcodes/recent-posts.html
+++ b/layouts/shortcodes/recent-posts.html
@@ -1,30 +1,136 @@
 {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} {{
-$recent := first 5 $pages.ByDate.Reverse }}
+$recent := first 6 $pages.ByDate.Reverse }}
 
 <style>
-.item-link {
-word-wrap: break-word;
-  white-space: normal;
- }
-</style>
+  .item-link {
+      word-wrap: break-word;
+      white-space: normal;
+  }
+  .recent-list {
+      margin: 0;
+  }
+  .post-meta {
+      margin-bottom: 5px;
+  }
+  .recent-item {
+      position: relative;
+      margin-bottom: 8px;
+      flex-shrink: 0;
+  }
+  .split {
+      margin: 0;
+      padding: 0;
+      display: inline;
+  }
+  .recent-posts-item {
+      margin-top: 0;
+      margin-bottom: 35px;
 
+  }
+  .recent-post-title {
+      margin-top: 2px;
+      margin-bottom: -10px;
 
-<!-- <div class="recent-posts"> -->
-<!-- {{ range $index, $page := $recent }} -->
-<!-- {{ end }} -->
-<!-- </div> -->
+  }
+  @media (max-width: 720px) {
+      .post-date {
+	  min-width: auto;
+	  font-size: 1.05em;
+      }
+      .item-link {
+	  white-space: normal; /* 允许换行 */
+	  word-wrap: break-word; /* 强制长单词/链接换行 */
+	  overflow: visible; /* 取消隐藏 */
+	  text-overflow: clip; /* 取消省略号 */
+      }
+  }
+  .category-link {
+      font-size: 0.9em;
+  }
+  .recent-empty {
+      text-align: center;
+      font-style: italic;
+  }
+</style>
 
 <div class="recent-posts">
-  {{ if $recent }} {{ range $index, $page := $recent }}
+
+  {{ if $recent }}
+  {{ range $index, $page := $recent }}
   <div class="recent-posts-item">
-    <h2 class="recent-post-title post-title">
+    <h3 class="recent-post-title">
       <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a>
-    </h2>
-    <div class="summary">{{ .Summary }}</div>
+    </h3>
 
-    {{ partial "post_meta.html" . }}
+{{ if ne (.Params.showMeta | default true) false }}
+<div class="post-meta">
 
-  {{ if not (eq (add $index 1) (len $recent)) }} {{ end }} {{ end }} {{ else }}
-  <div class="recent-empty">暂无文章</div>
+    <div class="post-meta-item post-date">
+        <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+            {{ .Date.Format "January 02, 2006" }}
+        </time>
+    </div>
+
+    <div class="post-meta-item post-category">
+
+        {{ range .Params.categories }}
+        {{ $url := printf "/categories/%s/" (. | urlize) }}
+•
+        <a href="{{ $url }}" class="category-link">{{ . }}</a>
+        {{ end }}
+    </div>
+</div>
+{{ end }}
+
+
+
+
+
+
+
+    <!-- <div class="post-meta"> -->
+    <!--   <span class="post-date"> -->
+    <!--     <time datetime='{{ .Date.Format "Jan 02, 2006" }}'>{{- .Date.Format (default "Jan 02, 2006" .Site.Params.dateFormat) -}}•</time> -->
+
+
+    <!--   </span> -->
+    <!--   {{ with .Params.categories }} -->
+    <!--   {{ range . }} -->
+    <!--   {{ $category := . }} -->
+    <!--   {{ with $.Site.GetPage (printf "categories/%s" $category) }} -->
+    <!--   <a href="{{ .Permalink }}" class="category-link">{{ .Title }}</a> -->
+    <!--   {{ else }} -->
+    <!--   <a href="{{ "categories/" | relLangURL}}{{ $category | urlize}}" class="category-link">{{ $category }}</a> -->
+    <!--   {{ end }} -->
+    <!--   {{ end }} -->
+    <!--   {{ end }} -->
+    <!-- </div> -->
+  </div>
   {{ end }}
+  {{ else }}
+  <div class="recent-empty">暂无文章</div>
+  
+
 </div>
+
+{{ end }}
+
+<!-- <div class="recent-posts"> -->
+  <!-- {{ range $index, $page := $recent }} -->
+  <!-- {{ end }} -->
+  <!-- </div> -->
+
+<!-- <div class="recent-posts"> -->
+  <!--   {{ if $recent }} {{ range $index, $page := $recent }} -->
+  <!--   <div class="recent-posts-item"> -->
+    <!--     <h2 class="recent-post-title post-title"> -->
+      <!--       <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a> -->
+      <!--     </h2> -->
+    <!--     <div class="summary">{{ .Summary }}</div> -->
+
+    <!--     {{ partial "post_meta.html" . }} -->
+
+    <!--   {{ if not (eq (add $index 1) (len $recent)) }} {{ end }} {{ end }} {{ else }} -->
+    <!--   <div class="recent-empty">暂无文章</div> -->
+    <!--   {{ end }} -->
+    <!-- </div> -->