diff options
Diffstat (limited to 'layouts/partials')
| -rw-r--r-- | layouts/partials/custom_head.html | 18 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 12 | ||||
| -rw-r--r-- | layouts/partials/post_meta.html | 37 | ||||
| -rw-r--r-- | layouts/partials/style.html | 811 | ||||
| -rw-r--r-- | layouts/partials/toc.html | 110 |
5 files changed, 36 insertions, 952 deletions
diff --git a/layouts/partials/custom_head.html b/layouts/partials/custom_head.html index 5d5c1ed..b3e5d2a 100644 --- a/layouts/partials/custom_head.html +++ b/layouts/partials/custom_head.html @@ -1,19 +1,7 @@ <meta name="msvalidate.01" content="2E1AACF009206F2DDBAAD4B98E881460" /> <link - rel="prefetch" - as="image" - href="https://www.blogsclub.org/badge/www.glowisle.me" -/> -<link href="https://github.com/yingyu5658" rel="me" /> -<link - rel="webmention" - href="https://webmention.io/www.glowisle.me/webmention" -/> -<link - rel="stylesheet" - href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" -/><link - rel="stylesheet" - href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" + rel="prefetch" + as="image" + href="https://www.blogsclub.org/badge/www.glowisle.me" /> <link rel="shortcut icon" href="/favicon.ico" /> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5cd0d54..69e3e66 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,8 +1,8 @@ <div class="copyright"> - {{ .Site.Params.footer.content }} - <div class="rss-icon"> - <a href="/rss"> - <i class="fa fa-rss"></i> - </a> - </div> + {{ .Site.Params.footer.content | markdownify }} + <div class="rss-icon"> + <a href="/rss"> + <i class="fa fa-rss">🛜</i> + </a> + </div> </div> diff --git a/layouts/partials/post_meta.html b/layouts/partials/post_meta.html index 1c180c3..1771751 100644 --- a/layouts/partials/post_meta.html +++ b/layouts/partials/post_meta.html @@ -1,33 +1,12 @@ {{ if ne (.Params.showMeta | default true) false }} <div class="post-meta"> - - <div class="post-meta-item post-date"> - <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> - {{ .Date.Format "January 02, 2006" }} - </time> - </div> - - <div class="post-meta-item post-category"> - - {{ range .Params.categories }} - {{ $url := printf "/categories/%s/" (. | urlize) }} -• - <a href="{{ $url }}" class="category-link">{{ . }}</a> - {{ end }} - </div> - - {{ if eq .Kind "page" }} - <div class="post-meta-item post-tag"> - # - {{ $tags := .GetTerms "tags" }} - {{ $len := len $tags }} - {{ range $index, $tag := $tags }} - <a href="{{ .Permalink }}">{{ $tag.LinkTitle }}</a> - {{ if lt (add $index 1) $len }}, {{ end }} - {{ end }} - </div> - {{ end }} + {{ if eq .Kind "page" }} + <div class="post-meta-item post-tag"> + # {{ $tags := .GetTerms "tags" }} {{ $len := len $tags }} {{ range $index, + $tag := $tags }} + <a href="{{ .Permalink }}">{{ $tag.LinkTitle }}</a> + {{ if lt (add $index 1) $len }}, {{ end }} {{ end }} + </div> + {{ end }} </div> {{ end }} - - diff --git a/layouts/partials/style.html b/layouts/partials/style.html deleted file mode 100644 index f314c0e..0000000 --- a/layouts/partials/style.html +++ /dev/null @@ -1,811 +0,0 @@ -<style> - -:root { - --width-max: 550px; - --font-secondary: monospace; - --font-size-primary: 1rem; - --font-size-secondary: .93rem; - --body-bg-color: #fbfbf6; - --bold-text-color: #222; - --body-text-color: #444; - --link-color: #0355a6; - --link-visited-color: #551a8b; - --table-border-color: #f2f2f2; - --table-th-bg-color: #f2f2f2; - --img-border-color: #f2f2f2; - --code-bg-color: #f2f2f2; - --code-text-color: #222; - --blockquote-border-color: #666; - --blockquote-text-color: #646464; - --upvoted-color: #fa8072; - --caption-text-color: #666; - --toc-text-color: #e5e5e5; - --toc-hover-color: e5e5e5; - --music-bg-hover-light: #e5e5e5; - --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: #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; -} - -.e-content h2, -.e-content h3, -.e-content h4, -.e-content h5, -.e-content h6 { - font-weight: 800; - -} - -h1, h2 { - margin: 0; - padding: 0; -} - -.site-title { - margin: 15px 0 15px 0; - font-size: 2.15em; - font-weight: 700; -} - -.badge-88x31 { - display: flex; - flex-wrap: wrap; - gap: 5px; -} - -.badge-88x31 a { - flex: 0 0 auto; - line-height: 0; -} - -.badge-88x31 img { - display: block; -} - -.post-title a.item-link { - font-size: 1.25rem; - margin-bottom: 0; -} - -.e-content :is(h1, h2, h3, h4, h5, h6), .summary :is(h1, h2, h3, h4, h5, h6) { - margin-top: 1.5em; -} - -.post-meta-item a, .rss-icon a, .post-title a, a.title h1, p { - color: var(--body-text-color) -} - -.post-meta-item a { - font-size: .85rem; -} - - - -body { - font-size: var(--font-size-primary); - font-family: Noto Serif CJK SC; - margin: auto; - padding: 20px; - max-width: var(--width-max); - text-align: left; - background-color: var(--body-bg-color); - word-wrap: break-word; - overflow-wrap: break-word; - line-height: 1.6; - color: var(--body-text-color); -} - -.post-title a { - margin: 16px 0; -} - -.post-title:hover { - color: var(--link-color); -} - -p { - line-height: 2; - font-weight: 500; -} - -div.summary { - font-weight: 400; -} - -div.summary p { - line-height: 2; -} - -a { - text-decoration: none; - border-bottom: 1px dotted; - color: var(--body-text-color) !important; -} - -strong, b { - color: var(--bold-text-color); -} - -i { - font-style: normal; -} - -hr { - border: 0; - border-top: 1px dashed; -} - -time { - font-family: var(--font-primary); - color: var(--body-text-color); -} - -header { - margin-top: 30px; -} - -.title { - text-align: left; - text-decoration: none !important; -} - -.title:hover { - text-decoration: none; -} - -a.title h1 { - margin: 15px 0 15px 0; - font-size: 2.15em; -} - -.title span { - font-weight: 400; -} - - - -nav a { - margin-right: 8px; - border: none; -} - -footer { - padding: 25px 0; - text-align: left; - font-size: var(--font-size-secondary); -} - -.recent-posts-item { - margin: 0 0 120px 0; -} - -.recent-item { - margin-bottom: 4rem; -} - -.recent-list { - padding-left: 2vw; -} - -<!-- .item-link { --> -<!-- width: 100%; --> -<!-- display: inline-block; --> -<!-- text-decoration: none; --> -<!-- flex: 1; --> -<!-- overflow: hidden; --> -<!-- text-overflow: ellipsis; --> -<!-- font-size: 1.6em; --> -<!-- word-wrap: break-word; --> -<!-- white-space: nowrap; --> -<!-- } --> - - -.post-title a.item-link { -font-size: 1.8rem; -border: none; -} - -h1.post-title { - margin-top: 0; -} - -.post-title { - margin: 0 !important; - display: inline-block; -} - -.post-date, .post-date-shortcode { - font-size: 0.9em; - color: #666; - display: inline; - min-width: 80px; - flex-shrink: 0; - margin-left: auto; -} - -.recent-empty { - text-align: center; - font-style: italic; -} - -ul.blog-posts { - list-style-type: none; - padding: unset; -} - -ul.blog-posts li { - display: flex; - margin-bottom: 8px; -} - -ul.blog-posts li span { - flex: 0 0 130px; -} - -ul.blog-posts li span.grouped { - flex: 0 0 80px; -} - -.posts-list li { - margin-bottom: 12px; -} - -.post-meta { - margin-top: 20px; - margin-bottom: 5px; -} - -.recent-posts .post-meta { - margin-bottom: 3em; -} - -.post-meta-item { - margin-right: 0.3rem; - display: inline-block; -} - -.post-meta-item svg { - display: inline; - width: var(--svg-size); - height: var(--svg-size); -} - -.post-meta-item p { - margin: 0; -} - -.post-tag a { -} - -img { - max-width: 100%; - display: block; - margin-left: auto; - margin-right: auto; - content-visibility: auto; -} - -img.missing { - display: none; -} - -img[src*="#minipic"] { - max-width: 50%; - margin-left: 0; - margin-right: auto; -} - -.image-caption { - margin: auto; -} - -.image-caption figcaption { - text-align: center; - font-style: italic; - font-size: 0.8em; - margin-top: 0.6em; - color: var(--caption-text-color); -} - -.booklist { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 20px; -} - -.booklist-item { - transform: translateZ(0); - transition: transform 0.25s, box-shadow 0.25s; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.booklist-item:hover { - transform: translateY(-5px) translateZ(20px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); -} - -.booklist-item img { - height: 100%; -} - -.rss-icon { - display: inline; - font-size: 16px; - float: right; - font-family: var(--font-primary); -} - -.social-icons { - margin: 15px 15px 5px 15px; - text-align: center; -} - -.social-icons a { - padding: 5px 5px; -} - -code { - font-family: var(--font-secondary); - background-color: var(--code-bg-color); - color: var(--code-text-color); - padding: 2px; - border-radius: 4px; -} - -pre code { - display: block; - padding: 16px; - white-space: pre-wrap; - overflow-x: auto; -} - -div.highlight pre { - border-radius: 4px; -} - -div.highlight code { - background-color: var(--code-bg-color); - color: var(--code-text-color); -} - -blockquote { - color: var(--blockquote-text-color); - margin: 17px 0 0 0; - padding-left: 20px; - font-style: normal; -} - -table { - width: 100%; - border-collapse: collapse; - border: 1px solid var(--table-border-color); - border-radius: 4px; - margin-top: 16px; -} - -th, td { - border: 1px solid var(--table-border-color); - padding: 4px; -} - -th { - background-color: var(--table-th-bg-color); -} - -.wm { - border: 1px #d0d7de solid; - border-radius: 0.25em; - padding: 1.5vw; - padding-top: 0; - background-color: #fffaed; - margin-top: 1vh; -} - -.wm p { - margin-top: 1px; -} - -textarea { - width: 100%; - font-size: 16px; -} - -input { - font-size: 14px; -} - -div.footnotes hr::before { - content: "Footnotes"; - display: block; - font-size: 1.5em; - color: var(--bold-text-color); - margin-top: 16px; -} - -.music-card { - display: flex; - flex-direction: column; - gap: 0.5rem; - width: 100%; -} - -.music-card img { - border: none !important; -} - -.music-info { - display: flex; - align-items: center; - gap: 1.25rem; -} - -.music-cover { - width: 3.75rem; - height: 3.75rem; - border-radius: 0.5rem; - box-shadow: var(--music-shadow); - margin: 0 !important; - object-fit: cover; -} - -.music-title { - margin: 0; - font-size: 1rem; - font-weight: bold; - line-height: 1.2; -} - -.music-artist { - margin: 0; - font-size: 0.875rem; - color: var(--music-text-secondary); -} - -.music-links { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.music-btn { - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0 0.75rem; - height: 2rem; - border-radius: 9999px; - text-decoration: none !important; - font-size: 0.75rem; - transition: background-color 0.3s ease; - background-color: var(--music-bg-light); - color: inherit; -} - -.music-btn:hover { - background-color: var(--music-bg-hover-light); -} - -.music-icon { - display: block; - width: 0.75rem; - height: 0.75rem; - margin: 0 !important; -} - -.music-btn-text { - display: inline; -} - -div.toc { - position: fixed; - top: 50%; - left: calc((100vw + var(--width-max)) / 2); - transform: translateY(-50%); - width: calc((90vw - var(--width-max)) / 2); - max-height: 80vh; - overflow-y: auto; - border: none; - padding: 0; - margin: 0; - z-index: 99; - scrollbar-width: none; - -ms-overflow-style: none; -} - -div.toc::-webkit-scrollbar { - display: none; -} - -.toc-nav { - padding: 1.5rem; -} - -.toc-nav ul { - list-style: none; - padding: 0; - margin: 0; -} - -.toc-nav li { - margin: 8px 0; -} - -.toc-nav a { - display: block; - text-decoration: none; - padding: 0 12px; - transition: all 0.2s ease; - font-size: 0.9rem; - line-height: 1.4; - text-align: left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - color: var(--toc-text-color); -} - -.toc-nav a:hover, -.toc-nav a.active { - color: var(--toc-hover-color); -} - -.toc-nav a::before { - content: ""; - display: inline-block; - width: 16px; - height: 4px; - background-color: var(--toc-text-color); - border-radius: 16px; - margin-right: 12px; - vertical-align: middle; -} - -.toc-nav a:hover::before, -.toc-nav a.active::before { - background-color: var(--toc-hover-color); -} - -.toc-nav ul ul a::before { width: 12px; margin-right: 16px; } -.toc-nav ul ul ul a::before { width: 8px; margin-right: 20px; } - -button.upvote-btn { - padding: 0; - border: none; - background: none; - cursor: pointer; - display: flex; - flex-direction: column; - align-items: center; - color: var(--body-text-color); -} - -button.upvoted { - color: var(--upvoted-color); -} - -span.upvote-count { - margin-top: -4px; - font-size: smaller; -} - -ul li:has(input) { - list-style-type: none; - margin-left: -25.5px; -} - -@media (prefers-color-scheme: dark) { - :root { - --summary-text-color: #c9c6c5; - --body-bg-color: #262624; - --bold-text-color: #eee; - --body-text-color: #e8e6e3; - --text-color-tertiary: #a0a0a0; - --link-color: #6da6ff; - --link-visited-color: #b388ff; - --table-border-color: #999; - --table-th-bg-color: #121212; - --img-border-color: #999; - --code-bg-color: #141414; - --code-text-color: #ddd; - --blockquote-border-color: #7b7b7b; - --blockquote-text-color: #acacac; - --caption-text-color: #aaa; - --toc-text-color: #cac3c3; - --toc-hover-color: #cac3c3; - --music-bg-hover-dark: #525252; - --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 { - color: var(--link-color); - cursor: pointer; - text-decoration: none; - } - -h3.recent-post-title a { -color: var(--body-text-color); -} - - .post-meta-item svg { - filter: invert(1) hue-rotate(180deg); - } - - strong { - font-weight: 650; - } - - .music-btn { - background-color: var(--music-bg-dark); - } - .music-btn:hover { - background-color: var(--music-bg-hover-dark); - } - - .category-link { - color: #dbdbdb; - } - - .wm { - background-color: #161b22; - border-color: #30363d; - color: var(--body-text-color); - padding: 10px; - } - - .wm input { - background-color: #010409; - border: #30363d 1px solid; - color: var(--body-text-color); - outline: none; - } - - #webmention-source:focus { - border-color: var(--color-accent-fg, #0969da); - box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); - } - - .wm button { - color: var(--body-text-color); - background-color: #161b22; - border: #30363d 1px solid; - } - - .post-summary { - color: var(--text-color-primary) !important; - } - - .post-item { - border-bottom: 1px solid #414141 !important; - } - - .pagination-link { - border: 1px solid #414141 !important; - } - - -} - -@media (min-width: 768px) { - .music-card { - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - .music-btn { - padding: 1rem; - justify-content: center; - width: auto; - height: auto; - } - - .music-icon { - width: 1.25rem; - height: 1.25rem; - } - - .music-btn-text { - display: none; - } -} - -@media (max-width: 800px) { - img[src*="#minipic"] { - max-width: 100%; - margin-left: auto; - margin-right: auto; - } - - div.toc { - display: none; - } -} - -@media (max-width: 720px) { - .post-date { - min-width: auto; - font-size: 0.85em; - } - - .item-link { - white-space: normal; - overflow: visible; - } -} - -@media (max-width: 700px) { - .booklist { - grid-template-columns: repeat(3, 1fr); - gap: 10px; - } -} - -@media (max-width: 400px) { - .booklist { - grid-template-columns: repeat(2, 1fr); - gap: 10px; - } -} - -.title h1, -.title p { - margin: 15px 0 !important; - font-size: 2.15em !important; - font-weight: 700 !important; - line-height: 1.2 !important; - display: block !important; - padding: 0 !important; -} - -.post-title { - font-size: 26.4px; - line-height: 1.4 !important; - display: block !important; - padding: 0 !important; -} - -.post-title a { - display: inline-block !important; - padding: 0 !important; -} - -nav { - margin-top: 0 !important; - margin-bottom: 20px !important; - line-height: 1.6 !important; -} - -header { - margin-top: 30px; - display: block; -} - -gnu { - display: none; -} - -</style> diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 66936a4..101c5e9 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -1,91 +1,19 @@ -{{/* 根据页面内容生成目录 */}} -{{ if and .TableOfContents (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }} -<nav class="toc-nav"> - {{ .TableOfContents }} -</nav> - -<script> - // 为目录添加平滑滚动和当前位置高亮 - document.addEventListener('DOMContentLoaded', function () { - const tocLinks = document.querySelectorAll('.toc-nav a'); - const headings = Array.from(tocLinks).map(link => { - const id = link.getAttribute('href').replace('#', ''); - return document.getElementById(id); - }).filter(h => h); - - // 平滑滚动 - tocLinks.forEach(link => { - link.addEventListener('click', function (e) { - e.preventDefault(); - const targetId = this.getAttribute('href').replace('#', ''); - const target = document.getElementById(targetId); - if (target) { - target.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - - // 更新活动状态 - tocLinks.forEach(l => l.classList.remove('active')); - this.classList.add('active'); - } - }); - }); - - // 滚动时更新当前位置 - function updateActiveLink() { - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const windowHeight = window.innerHeight; - - for (let i = headings.length - 1; i >= 0; i--) { - const heading = headings[i]; - const rect = heading.getBoundingClientRect(); - - if (rect.top <= 100) { - // 移除所有活动状态 - tocLinks.forEach(link => link.classList.remove('active')); - - // 高亮当前标题 - const activeLink = document.querySelector(`.toc-nav a[href="#${heading.id}"]`); - if (activeLink) { - activeLink.classList.add('active'); - - // 高亮所有父级标题 - let currentLi = activeLink.closest('li'); - while (currentLi) { - const parentLi = currentLi.parentElement.closest('li'); - if (parentLi) { - const parentLink = parentLi.querySelector('a'); - if (parentLink) { - parentLink.classList.add('active'); - } - currentLi = parentLi; - } else { - break; - } - } - } - break; - } - } - } - - // 节流函数 - let ticking = false; - function throttleScroll() { - if (!ticking) { - requestAnimationFrame(function () { - updateActiveLink(); - ticking = false; - }); - ticking = true; - } - } - - window.addEventListener('scroll', throttleScroll); - - // 初始化时更新一次 - updateActiveLink(); - }); -</script> -{{ end }}
\ No newline at end of file +{{ $hasHeadings := false }} +{{ if .RawContent }} + {{/* 正则匹配:查找以 1 到 6 个 # 开头的行 */}} + {{ $headings := findRE "(?m)^#{1,6} " .RawContent }} + {{ if gt (len $headings) 0 }} + {{ $hasHeadings = true }} + {{ end }} +{{ end }} + +{{ if $hasHeadings }} +<aside id="ms_toc_container"> + <div id="ms_toc"> + <strong>Table Of Contents</strong> + <nav class="toc-nav"> + {{ .TableOfContents }} + </nav> + </div> +</aside> +{{ end }} |
