Tweak some layouts for index

1 files changed, 100 insertions, 54 deletions

diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html
index 5c209f1..e720d33 100644
--- a/layouts/shortcodes/recent-posts.html
+++ b/layouts/shortcodes/recent-posts.html
@@ -1,67 +1,113 @@
+<!-- 1: 展示标题摘要；2：标题列表 -->
+{{ $mode := 2 }}
+
 {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
-{{ $recent := first 10 $pages.ByDate.Reverse }}
+{{ $recent := first 20 $pages.ByDate.Reverse }}
+
+{{ if eq $mode 1 }}
 
 <style>
-  .recent-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .recent-list li {
-    margin-bottom: 8px;
-  }
+	.recent-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.recent-list li {
+		margin-bottom: 8px;
+	}
+
+	.recent-date {
+		font-family: monospace;
+		margin-right: 10px;
+		white-space: nowrap;
+	}
+
+	.recent-title {
+		word-wrap: break-word;
+	}
+
+	.recent-empty {
+		text-align: center;
+		font-style: italic;
+	}
+
+	@media (max-width: 720px) {
+		.recent-list li {
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		.recent-date {
+			width: auto;
+			margin-right: 0.5em;
+		}
+	}
+
+	.recent-posts {
+		margin-top: .8rem;
+	}
+
+	.recent-posts h2 {
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+
+	}
+</style>
+
+<div class="recent-posts">
+	{{ if $recent }}
+	<ul class="recent-list">
+		{{ range $recent }}
+		<div class="recent-item">
+			<li>
+				<span class="recent-date">{{ .Date.Format "2006-01-02" }}</span>
+				<a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a>
+			</li>
+
+			<summary>
+				{{ .Summary }}
+			</summary>
+
+		</div>
+		{{ end }}
+	</ul>
+	{{ else }}
+	<div class="recent-empty">暂无文章</div>
+	{{ end }}
+</div>
+{{ end }}
+
+
+
+{{ if eq $mode 2 }}
+<style>
   .recent-date {
-    font-family: monospace;
-    margin-right: 10px;
-    white-space: nowrap;
-  }
-  .recent-title {
-    word-wrap: break-word;
-  }
-  .recent-empty {
-    text-align: center;
-    font-style: italic;
-  }
-  @media (max-width: 720px) {
-    .recent-list li {
-      display: flex;
-      flex-wrap: wrap;
-    }
-    .recent-date {
-      width: auto;
-      margin-right: 0.5em;
-    }
+      display: inline-block;
+      margin-right: 0.4rem;
   }
 
-  .recent-posts {
-      margin-top: .8rem;
+  .recent-item-2 {
+      margin-bottom: .5rem;
   }
 
-  .recent-posts h2 {
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-
+  .recent-title {
+      border-bottom: none !important;
   }
+
 </style>
 
+
 <div class="recent-posts">
-  {{ if $recent }}
-  <ul class="recent-list">
-    {{ range $recent }}
-    <div class="recent-item">
-      <li>
-      <span class="recent-date">{{ .Date.Format "2006-01-02" }}</span>
-      <a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a>
-      </li>
-
-      <summary>
-	{{ .Summary }}
-      </summary>
-
-      </div>
-    {{ end }}
-  </ul>
-  {{ else }}
-  <div class="recent-empty">暂无文章</div>
-  {{ end }}
+	{{ range $recent }}
+	<div class="recent-item-2">
+	<span class="recent-date">{{ .Date.Format "2006-01-02" }}</span>
+	<a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a>
+	<br>
+	</div>
+	{{ end }}
 </div>
+
+
+
+{{ end }}