diff options
| -rw-r--r-- | assets/css/components/_pages.scss | 53 | ||||
| -rw-r--r-- | assets/css/components/_utility.scss | 4 | ||||
| -rw-r--r-- | content/posts/_index.md | 5 | ||||
| -rw-r--r-- | layouts/index.html | 11 | ||||
| -rw-r--r-- | layouts/section/posts.html | 57 |
5 files changed, 122 insertions, 8 deletions
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss index c7d679de..503af72e 100644 --- a/assets/css/components/_pages.scss +++ b/assets/css/components/_pages.scss @@ -1,6 +1,6 @@ /* posts list */ -#posts-list { +.posts-list { min-height: 600px; & > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div { @@ -236,3 +236,54 @@ section.taxonomy { display: none; } } + +/* posts archive */ + +#posts-archive { + @mixin section-title { + display: flex; + justify-content: space-between; + align-items: center; + small { + color: var(--secondary-text-color); + font-size: .8rem; + } + } + + .posts-year-archive { + .posts-year-title { + border-bottom: 2px solid var(--border-color); + padding: .5rem 0; + font-size: 1.5rem; + @include section-title; + } + } + + .posts-month-archive { + summary { + list-style: none; + + .posts-month-title { + font-size: 1.1rem; + border-bottom: 1px dashed var(--border-color); + display: inline-block; + width: 100%; + padding: 0.5rem 0.25rem; + margin: 0; + @include section-title; + } + } + } +} + +#previous-post-link { + display: block; + width: fit-content; + margin: 2rem auto; + + &::before, &::after { + content: "-"; + margin: 0 0.5rem; + text-decoration: none; + } +} diff --git a/assets/css/components/_utility.scss b/assets/css/components/_utility.scss index f247c850..a9907339 100644 --- a/assets/css/components/_utility.scss +++ b/assets/css/components/_utility.scss @@ -46,3 +46,7 @@ figure { margin: 0 -10rem; } } + +.font-mono { + font-family: var(--mono-font-family); +} diff --git a/content/posts/_index.md b/content/posts/_index.md index 7da8fe23..87d6b868 100644 --- a/content/posts/_index.md +++ b/content/posts/_index.md @@ -1,6 +1,3 @@ --- -title: Posts +title: 所有文章 --- - - - diff --git a/layouts/index.html b/layouts/index.html index 6faabe06..a90d5712 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -53,12 +53,13 @@ </header> {{ end }} - <div id="posts-list"> + <div id="posts-list" class="posts-list"> {{ $currentYear := now.Format "2006" }} <!-- 获取当前年份 --> {{ $isFirstPost := true }} <!-- 用于标记首页的第一篇文章 --> - {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}} + {{ $currentYear := now.Format "2006" }} + {{ range (where (where site.RegularPages "Type" "in" site.Params.mainSections) "Date.Year" "eq" (int $currentYear)).GroupByDate "2006" -}} <section class="posts-year-section"> <h1 class="posts-year-title">{{ .Key }}</h1> @@ -107,7 +108,11 @@ {{ end }} </section> - <hr> + {{ end }} + {{ if eq .Site.Language.Lang "en" }} + <a href="/en/posts/" class="font-mono" id="previous-post-link">PREVIOUS POSTS</a> + {{ else if eq .Site.Language.Lang "zh" }} + <a href="/posts/" id="previous-post-link">往年的文章</a> {{ end }} </div> </article> diff --git a/layouts/section/posts.html b/layouts/section/posts.html new file mode 100644 index 00000000..3c2c862c --- /dev/null +++ b/layouts/section/posts.html @@ -0,0 +1,57 @@ +{{ partial "snippets/document-start.html" . }} + <article class="posts"> + {{ partial "header.html" . }} + <div id="posts-archive" class="posts-list"> + + {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}} + <section class="posts-year-archive"> + <h1 class="posts-year-title"> + {{ .Key }} + <small class="font-mono">{{ len .Pages }} TOTAL POSTS</small> + </h1> + + {{ range .Pages.GroupByDate "January" }} + <details class="posts-month-archive"> + <summary> + <h2 class="posts-month-title"> + {{ .Key }} + <small class="font-mono">{{ len .Pages }} POSTS</small> + </h2> + </summary> + <ul> + {{ range .Pages }} + <li> + <div class="row posts-line"> + <div class="posts-date col-xs-3 col-sm-2"> + <time datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "Jan 02" }}</time> + </div> + <div class="posts-title col-xs-9 col-sm-10"> + <div class="row"> + <div class="col-xs-11 col-sm-10"> + <a + class="posts-title-link" + href="{{ .RelPermalink }}" + data-umami-event="Click Post Link from Index" + >{{ .Title }}</a> + </div> + <div class="col-xs-1 col-sm-2 posts-categories"> + {{ with .Params.categories }} + <div class="posts-category"> + <a href="/categories/{{ . }}/"><strong>{{ . }}</strong></a> + </div> + {{ end }} + </div> + </div> + </div> + </div> + </li> + {{ end }} + </ul> + </details> + {{ end }} + + </section> + {{ end }} + </div> + </article> +{{ partial "snippets/document-end.html" . }} |