feat: group posts with any layout in archives page

Close #322

Author: g1eny0ung

docs/pages/_meta.json

@@ -14,12 +14,12 @@
   "social-comments": "Social Comments",
   "post-page": "Post Page",
   "about-page": "About Page",
+  "archives-page": "Archives Page",
   "search": "Search",
   "summary-images": "Summary Images",
   "syntax-highlighting": "Syntax Highlighting",
   "custom-archives-header": "Custom Archives Header",
   "social-links": "Social Links",
-  "custom-nav-items": "Custom Nav Items",
   "light-and-dark-mode": "Light and Dark Mode",
   "custom": "Custom Theme",
   "decap-cms": "Decap CMS",

docs/pages/archives-page.md

@@ -0,0 +1,41 @@
+# Archives Page
+
+Archives page is a list of all posts by timeline. It will be rendered as `/posts`.
+
+## Custom Header
+
+You can custom your archives page's header by placing a `_index.md` in `content/posts`.
+
+For example, paste below in `_index.md`:
+
+```markdown
+---
+title: Archives
+---
+
+All posts by timeline.
+```
+
+These will be rendered as:
+
+```html
+<h1 class="text-3xl">Archives</h1>
+<p class="text-sm">All posts by timeline.</p>
+```
+
+One is the title, and the other is the description.
+
+## Custom Group Layout
+
+The timeline is grouped by year by default. You can use a custom layout to group by month or any other way.
+This can be done by adding a `groupLayout` field in the front matter of the `_index.md` file.
+
+For example, in `content/posts/_index.md`:
+
+```markdown
+---
+groupLayout: Jan 2006
+---
+```
+
+For how to define the layout, please refer to [layout string](https://gohugo.io/methods/pages/groupbydate/#layout-string).

docs/pages/custom-archives-header.md

@@ -16,7 +16,8 @@ <h1 class="text-3xl">
 
   <div class="max-w-[65ch] mx-auto mt-8 lg:mt-12">
     <ul class="timeline timeline-vertical">
-      {{ range .Pages.GroupByDate "2006" }}
+      {{ $groupLayout := default "2006" .Params.groupLayout }}
+      {{ range .Pages.GroupByDate $groupLayout }}
       <li class="[--timeline-col-start:64px]">
         <hr class="dark:bg-base-content" />
         <div class="timeline-start !justify-self-start">