From ce149d8063e8e082c820e54602f7ecdda9f88184 Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 1 Apr 2025 10:08:22 +0800 Subject: feat: new home page - new post list structure and style - move categories page link to postnav, a new navigation component used between homepage and categories page - search anywhere instruction - move posts archive page link to top navigation - some more skeletons! Former-commit-id: 9b8ac5fe0115f4b7609ca6b990a35077c8221c45 --- assets/css/components/_pages.scss | 79 +------------------------- assets/css/components/_postlist.scss | 89 +++++++++++++++++++++++++++++ assets/css/components/_variables.scss | 2 +- assets/css/index.scss | 1 + hugo.yaml | 6 +- i18n/en.yml | 1 + i18n/zh.yml | 1 + layouts/_default/section.html | 4 +- layouts/_default/single.html | 3 +- layouts/_default/taxonomy.html | 6 +- layouts/index.html | 97 +++++++++++--------------------- layouts/partials/components/postnav.html | 16 ++++++ static/img/little-skeleton.svg | 14 +++++ 13 files changed, 164 insertions(+), 155 deletions(-) create mode 100644 assets/css/components/_postlist.scss create mode 100644 layouts/partials/components/postnav.html create mode 100644 static/img/little-skeleton.svg diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss index db5f83d5..3bc0de1c 100644 --- a/assets/css/components/_pages.scss +++ b/assets/css/components/_pages.scss @@ -1,81 +1,3 @@ -/* 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 { - align-items: flex-start; - } - - .posts-year-section { - --section-height: 9rem; - min-height: var(--section-height); - position: relative; - margin: 2rem 0; - - .posts-year-title { - font-size: 2rem; - font-weight: 900; - position: absolute; - right: 0; - color: var(--text-color); - opacity: 0.25; - font-size: calc(var(--section-height) / 2); - margin: 0; - line-height: 1; - z-index: -1; - } - } - - ul { - list-style-type: none; - padding-inline-start: 0; - padding: 0; - - .posts-line { - font-size: 1.2rem; - margin: 12px 0; - - &.featured-post a.posts-title-link { - font-weight: 800; - display: block; - } - - .posts-date { - font-family: var(--mono-font-family); - color: var(--secondary-text-color); - } - - .posts-categories { - font-size: 0.8rem; - text-align: center; - } - - .posts-category { - padding: 3px 0; - border: var(--border-color) 2px solid; - border-radius: 5px; - background-color: var(--background-color); - } - } - } - - hr { - border: 1px solid var(--border-color); - margin: 3rem 0; - } -} - -.posts-subtitle { - color: var(--secondary-text-color); -} - /* post series */ #post-series-list { @@ -243,6 +165,7 @@ section.taxonomy { } .posts-year-archive { + width: 100%; .posts-year-title { border-bottom: 2px solid var(--border-color); padding: 0.5rem 0; diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss new file mode 100644 index 00000000..27016245 --- /dev/null +++ b/assets/css/components/_postlist.scss @@ -0,0 +1,89 @@ +.posts-list { + display: flex; + flex-direction: column; + margin: 1rem 0; + .posts-item { + width: 100%; + border-bottom: 1px solid var(--border-color); + margin: 0.5rem 0; + header { + width: 100%; + + @media screen and (min-width: 768px) { + display: flex; + justify-content: space-between; + } + + .posts-item-meta { + time { + color: var(--secondary-text-color); + font-family: var(--mono-font-family); + } + } + + .posts-item-category { + margin: 0.5rem 0; + a { + border: 2px solid var(--border-color); + border-radius: 0.2rem; + padding: 0.2rem 0.5rem; + text-decoration: none; + font-size: 0.8rem; + display: inline-block; + } + } + } + .posts-item-summary { + h1, h2, h3, h4, h5, h6 { + display: none; + } + font-size: 1em; + } + } +} + +#posts-list-navigation { + ul { + position: relative; + width: 100%; + padding-inline-start: 0; + display: flex; + list-style: none; + gap: 0.2rem; + li { + flex-shrink: 0; + flex-grow: 0; + &.active { + font-weight: bolder + } + a { + background-color: var(--block-background-color); + padding: 0.2rem 0.5rem; + text-decoration: none; + border-radius: 0.2rem; + border: 1px solid var(--background-color); + transition: border-color 0.3s ease; + &:hover, .active & { + border: 1px solid var(--text-color) + } + } + } + + .search-instruction { + font-size: 0.9rem; + color: var(--secondary-text-color); + margin-left: 0.5rem; + + } + + .list-decoration { + position: absolute; + right: 0; + img { + opacity: 0.55; + height: 2rem; + width: 2rem; + } + } + } +} diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss index b27babfc..455fa5b9 100644 --- a/assets/css/components/_variables.scss +++ b/assets/css/components/_variables.scss @@ -16,7 +16,7 @@ --serif-font-family: "Noto Serif", "Noto Serif SC", serif; --content-font-size: 20px; - --page-width: 700px; + --page-width: 650px; --page-header-top: 5rem; /* pagefind custom css */ diff --git a/assets/css/index.scss b/assets/css/index.scss index 80bef56e..90a9cb18 100644 --- a/assets/css/index.scss +++ b/assets/css/index.scss @@ -3,6 +3,7 @@ @import "components/markdown"; @import "components/header"; @import "components/pages"; +@import "components/postlist"; @import "components/post"; @import "components/content"; @import "components/comment"; diff --git a/hugo.yaml b/hugo.yaml index 6eb77d70..edf6fa84 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -15,15 +15,15 @@ languages: params: headTitle: 極客死亡計劃 nav: + - name: 文章 + link: /posts/ + target: _self - name: 卡片 link: /cards/ target: _self - name: 书籍 link: /library/ target: _self - - name: 分类 - link: /categories/ - target: _self - name: 关于 link: /about/ target: _self diff --git a/i18n/en.yml b/i18n/en.yml index 6b3573d6..4391c91a 100644 --- a/i18n/en.yml +++ b/i18n/en.yml @@ -9,3 +9,4 @@ postPage: footer: wordCount: '🪦 {{ . }} words are buried here' licenseStatement: 'Licensed under {{ . }}' +searchInstruction: '⌘+K to search anywhere' diff --git a/i18n/zh.yml b/i18n/zh.yml index 85079559..38c576e1 100644 --- a/i18n/zh.yml +++ b/i18n/zh.yml @@ -9,3 +9,4 @@ postPage: footer: wordCount: '🪦 {{ . }} 字在这里死去' licenseStatement: '以 {{ . }} 协议授权' +searchInstruction: '⌘+K 在任何地方搜索' diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 55de607c..d18246ad 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -1,10 +1,8 @@ {{ define "main" }}
- {{ partial "components/breadcrumbs.html" . }} + {{ partial "header.html" . }}
- {{ partial "components/heatmap.html" . }} - {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 5b64f3bc..781270f9 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -50,7 +50,8 @@ -
+
{{ if .Params.toc }}
{{ end }} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index 570d920d..f0dd979a 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -1,7 +1,7 @@ {{ define "main" }}
{{ partial "header.html" . }} - + {{ partial "components/postnav.html" . }}
{{ range sort .Site.Taxonomies.tags "Count" "desc" }} @@ -12,10 +12,6 @@ {{ end }}
-
- {{ partial "components/welcome" . }} -
-
{{ range .Site.Taxonomies.categories.Alphabetical }} diff --git a/layouts/index.html b/layouts/index.html index e866d0e2..1d1c9347 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,72 +1,41 @@ {{ define "main" }}
{{ partial "header.html" . }} - -
- {{ $currentYear := now.Format "2006" }} - - {{ $isFirstPost := true }} - - {{ $currentYear := now.Format "2006" }} - {{ range (where (where site.RegularPages "Type" "in" site.Params.mainSections) "Date.Year" "eq" (int $currentYear)).GroupByDate "2006" -}} -
-

{{ .Key }}

- - {{ range .Pages.GroupByDate "January" }} -

{{ .Key }}

-
    - {{ range .Pages }} -
  • - -
    -
    - -
    -
    -
    -
    - {{ .Title }} -
    - {{ if $isFirstPost }} - {{ if .Params.description }} -

    {{.Params.description }}

    - {{ else }} -

    {{ .Summary }}

    - {{ end }} - {{ $isFirstPost = false }} - {{ end }} -
    -
    -
    - {{ with .Params.categories }} -
    - {{ . }} -
    - {{ end }} -
    -
    -
    -
    -
    • - {{ end }} -
+ {{ partial "components/postnav.html" . }} +
+ {{ $firstPost := true }} + {{ range first 8 (where site.RegularPages "Type" "in" site.Params.mainSections) }} +
+
+
+ +

+ {{ .Title }} +

+
+
+ {{ with .Params.categories }} + + {{ . }} + + {{ end }} +
+
+ + {{ if $firstPost }} +
+ {{ .Summary }} +
+ {{ $firstPost = false }} {{ end }} - -
- {{ end }} - {{ if eq .Site.Language.Lang "en" }} - - {{ else if eq .Site.Language.Lang "zh" }} - - {{ end }} +
+ {{ end }}
+ 查看所有
{{ partial "footer.html" . }} {{ end }} diff --git a/layouts/partials/components/postnav.html b/layouts/partials/components/postnav.html new file mode 100644 index 00000000..d7d21cc6 --- /dev/null +++ b/layouts/partials/components/postnav.html @@ -0,0 +1,16 @@ +
+ +
diff --git a/static/img/little-skeleton.svg b/static/img/little-skeleton.svg new file mode 100644 index 00000000..2a6b9559 --- /dev/null +++ b/static/img/little-skeleton.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3