diff options
| -rw-r--r-- | hugo.toml | 36 | ||||
| -rw-r--r-- | layouts/archives/single.html | 125 | ||||
| -rw-r--r-- | layouts/partials/style.html | 74 | ||||
| -rw-r--r-- | layouts/shortcodes/recent-posts.html | 17 |
4 files changed, 140 insertions, 112 deletions
@@ -59,11 +59,7 @@ tabWidth = 4 name = "归档" url = "/archives/" weight = 4 - [[languages.zh-cn.menu.main]] - name = "书单" - url = "/readings/" - weight = 5 - [[languages.zh-cn.menu.main]] + [[languages.zh-cn.menu.main]] name = "关于" url = "/about/" weight = 6 @@ -93,41 +89,13 @@ tabWidth = 4 name = "About" url = "/about/" weight = 6 - -# [menu] - -# [[menu.main]] -# name = "分类" -# url = "/categories/" -# weight = 2 - -# [[menu.main]] -# name = "友人" -# url = "/links/" -# weight = 3 - -# [[menu.main]] -# name = "归档" -# url = "/archives" -# weight = 3 - -# [[menu.main]] -# name = "书单" -# url = "/readings" -# weight = 3 - -# [[menu.main]] -# name = "关于" -# url = "/about" -# weight = 6 - [params] upvote = true upvoteURL = "https://upvote.glowisle.me/" description = "关于互联网、书籍、生活琐事以及那些一闪而过的念头。计算机技术 & 读书感悟 & 日常随笔。映屿(GlowIsle)" postSearch = false groupByYear = true - toc = true + toc = false showPostCount = true favicon = "/favicon.png" hideMadeWithLine = true diff --git a/layouts/archives/single.html b/layouts/archives/single.html index efafdca..be44c9f 100644 --- a/layouts/archives/single.html +++ b/layouts/archives/single.html @@ -1,42 +1,107 @@ {{ define "main" }} -<header>{{- partial "header.html" . -}}</header> +<header> +{{- partial "header.html" . -}} +</header> <content> + {{ if .Data.Singular }} + <h3 style="margin-bottom:0">Filtering for "{{ .Title }}"</h3> + <small> + <a href="{{ "blog" | relURL }}">Remove filter</a> + </small> + {{ end }} + + {{ if .Site.Params.postSearch }} + <input id="search-input" type="text" placeholder="Search..." style="margin-top: 16px" /> + <script> + // 等待 DOM 完全加载后执行 + document.addEventListener('DOMContentLoaded', function () { + // 缓存 DOM 元素 + const searchInput = document.getElementById('search-input'); + const posts = document.querySelectorAll('.blog-posts li'); + const years = document.querySelectorAll('.blog-posts h3'); + + // 更新搜索结果 + function updateSearchResults(searchTerm) { + let visiblePosts = 0; + const displayedYears = new Set(); + posts.forEach(function (post) { + const title = post.querySelector('a').textContent.toLowerCase(); + const year = post.querySelector('time').getAttribute('datetime').split('-')[0]; + if (title.includes(searchTerm)) { + post.style.display = ''; + visiblePosts++; + displayedYears.add(year); + } else { + post.style.display = 'none'; + } + }); + + {{ if .Site.Params.groupByYear }} + years.forEach(function (y) { + const year = y.textContent; + y.style.display = displayedYears.has(year) ? '' : 'none'; + }); + {{ end }} + + {{ if .Site.Params.showPostCount }} + const countText = `There ${visiblePosts <= 1 ? `is ${visiblePosts} piece.` : `are ${visiblePosts} pieces.`}`; + document.getElementById('post-count').innerHTML = countText; + {{ end }} + } + + searchInput.addEventListener('input', function () { + updateSearchResults(this.value.toLowerCase().trim()); + }); + }); + </script> + {{ end }} + {{ $allPosts := where .Site.RegularPages "Type" "eq" "posts" }} {{ $excludePosts := where $allPosts "Params.categories" "intersect" (slice "1") }} - {{ $postPages := $allPosts | complement $excludePosts }} + {{ $postPages := ($allPosts | complement $excludePosts) }} {{ if .Site.Params.showPostCount }} - <p id="post-count">共 {{ len $postPages }} 篇文章</p> + <p id="post-count">There {{ if le (len $postPages) 1 }} is {{ len $postPages }} piece. {{ else }} are {{ len $postPages }} pieces. {{ end }}</p> {{ end }} - <div class="blog-posts"> - {{ if gt (len $postPages) 0 }} - {{ range $postPages.GroupByDate "2006" }} - <details> - <summary> - <p style="display: inline;">{{ .Key }} 年 ({{ len .Pages }})</p> - </summary> - - <ul> - {{ range .Pages }} - <li> - <span> - <i> - <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate> - {{ .Date.Format (default "2006-01-02" $.Site.Params.dateFormat) }} - </time> - </i> - </span> - <a href="{{ .Permalink }}">{{ .Title }}</a> - </li> - {{ end }} - </ul> - </details> + <ul class="blog-posts"> + {{ $currentYear := 0 }} + {{ range $postPages }} + {{ if .Site.Params.groupByYear }} + {{ $year := .Date.Year }} + {{ if ne $year $currentYear }} + <h3>{{ $year }}</h3> + {{ $currentYear = $year }} + {{ end }} {{ end }} + <li> + <span class="{{ if .Site.Params.groupByYear }} grouped {{ else }} ungrouped {{ end }}"> + <i> + <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate> + {{ if .Site.Params.groupByYear }} + {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }} + {{ else }} + {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }} + {{ end }} + </time> + </i> + </span> + <a href="{{ .Permalink }}">{{ .Title }}</a> + </li> {{ else }} - <p>暂无文章</p> + <li>No posts yet</li> {{ end }} - </div> + </ul> + + {{ if .Data.Singular }} + {{ else }} + <small> + <div> + {{ range .Site.Taxonomies.tags }} + <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a> + {{ end }} + </div> + </small> + {{ end }} </content> -<hr /> -{{ end }}
\ No newline at end of file +{{ end }} diff --git a/layouts/partials/style.html b/layouts/partials/style.html index 4b29810..1297f6d 100644 --- a/layouts/partials/style.html +++ b/layouts/partials/style.html @@ -1,10 +1,10 @@ <style> :root { - --width-max: 720px; + --width-max: 550px; --font-secondary: monospace; - --font-size-primary: 1.1rem; - --font-size-secondary: .83rem; + --font-size-primary: 1rem; + --font-size-secondary: .93rem; --body-bg-color: #fbfbf6; --bold-text-color: #222; --body-text-color: #444; @@ -25,11 +25,24 @@ --music-bg-light: rgba(229, 229, 229, 0.5); --music-text-secondary: #666; --music-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --summary-text-color: #4e4e4e; + --summary-text-color: #706c6c; --svg-size: 0.85em; --title-color: #444444; } +.recent-title { + font-weight: 700; + border: none; +} + +.recent-date { + display: block; +} + +summary p{ + color: var(--summary-text-color); +} + :is(article, .summary) p:not(.music-card *) { margin-top: 1.6rem; } @@ -39,7 +52,8 @@ .e-content h4, .e-content h5, .e-content h6 { - font-weight: 400; + font-weight: 800; + } h1, h2 { @@ -110,7 +124,7 @@ body { p { line-height: 2; - font-weight: 350; + font-weight: inherit; } div.summary { @@ -122,10 +136,9 @@ div.summary p { } a { - color: var(--link-color); - cursor: pointer; - text-decoration: none; - transition-duration: 0.3s; + text-decoration: none; + border-bottom: 1px dotted; + color: var(--body-text-color) !important; } strong, b { @@ -172,6 +185,7 @@ a.title h1 { nav a { margin-right: 8px; + border: none; } footer { @@ -184,16 +198,12 @@ footer { margin: 0 0 120px 0; } -.recent-list { - padding-left: 2vw; +.recent-item { + margin-bottom: 4rem; } -.recent-item { - position: relative; - margin-bottom: 8px; - display: flex; - align-items: flex-start; - list-style-type: none; +.recent-list { + padding-left: 2vw; } <!-- .item-link { --> @@ -211,6 +221,7 @@ footer { .post-title a.item-link { font-size: 1.8rem; +border: none; } h1.post-title { @@ -246,22 +257,6 @@ ul.blog-posts li { margin-bottom: 8px; } -ul.blog-posts li a { - margin-left: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-decoration: none !important; -} - -ul.blog-posts li a:hover { - text-decoration: underline 0.5px !important; -} - -ul.blog-posts li a:visited { - color: var(--link-visited-color); -} - ul.blog-posts li span { flex: 0 0 130px; } @@ -621,7 +616,7 @@ ul li:has(input) { @media (prefers-color-scheme: dark) { :root { --summary-text-color: #c9c6c5; - --body-bg-color: #121212; + --body-bg-color: #262624; --bold-text-color: #eee; --body-text-color: #e8e6e3; --text-color-tertiary: #a0a0a0; @@ -641,6 +636,7 @@ ul li:has(input) { --music-bg-dark: rgba(82, 82, 82, 0.5); --music-text-secondary: #a3a3a3; --color-background: var(--body-bg-color) !important; + --summary-text-color: #a2a2a2; } a { @@ -653,10 +649,6 @@ h3.recent-post-title a { color: var(--body-text-color); } - a:hover { - text-decoration: underline; - } - .post-meta-item svg { filter: invert(1) hue-rotate(180deg); } @@ -713,9 +705,7 @@ color: var(--body-text-color); border: 1px solid #414141 !important; } - a { - font-weight: 500 !important; - } + } @media (min-width: 768px) { diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html index ce5fba0..5c209f1 100644 --- a/layouts/shortcodes/recent-posts.html +++ b/layouts/shortcodes/recent-posts.html @@ -8,12 +8,11 @@ padding: 0; } .recent-list li { - margin-bottom: 0.5em; - line-height: 1.4; + margin-bottom: 8px; } .recent-date { font-family: monospace; - margin-right: 1.5em; + margin-right: 10px; white-space: nowrap; } .recent-title { @@ -46,14 +45,20 @@ </style> <div class="recent-posts"> - <h2>最近更新</h2> {{ if $recent }} <ul class="recent-list"> {{ range $recent }} - <li> + <div class="recent-item"> + <li> <span class="recent-date">{{ .Date.Format "2006-01-02" }}</span> <a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a> - </li> + </li> + + <summary> + {{ .Summary }} + </summary> + + </div> {{ end }} </ul> {{ else }} |