seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化 UI 组件样式与布局并规范化 Hugo 头部解析

Browse Source
This commit is contained in:
seahi committed 2026-08-07 12:53:43 +08:00
1 parent 879e8e0692
commit e54ef0202d
7 files changed
+392 -125
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app.css
+256 -81
View File
@@ -1,4 +1,4 @@
@import "highlight.js/styles/github.css"; @import 'highlight.js/styles/github.css';
:root { :root {
--bg-color: #ffffff; --bg-color: #ffffff;
@@ -13,7 +13,9 @@
--accent-color: #419b38; --accent-color: #419b38;
--font-sans: 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, -apple-system, system-ui, sans-serif; --font-sans:
'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei',
'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, -apple-system, system-ui, sans-serif;
--font-serif: 'Noto Serif SC', var(--font-sans); --font-serif: 'Noto Serif SC', var(--font-sans);
--layout-width: 860px; --layout-width: 860px;
@@ -48,7 +50,12 @@ body {
flex: 1 0 auto; flex: 1 0 auto;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--title-color); color: var(--title-color);
font-weight: 600; font-weight: 600;
@@ -67,14 +74,16 @@ a:hover {
} }
/* Base Layout */ /* Base Layout */
.wrapper, .container { .wrapper,
.container {
max-width: var(--layout-width); max-width: var(--layout-width);
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.wrapper.wide, .container.wide { .wrapper.wide,
.container.wide {
max-width: 1024px; max-width: 1024px;
} }
} }
@@ -160,7 +169,7 @@ a:hover {
.header nav a.active::after, .header nav a.active::after,
.header nav .nav-dropdown-trigger.active::after { .header nav .nav-dropdown-trigger.active::after {
content: ""; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -208,7 +217,9 @@ a:hover {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transform: translateY(-4px); transform: translateY(-4px);
transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition:
opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1100; z-index: 1100;
padding: 4px 0; padding: 4px 0;
} }
@@ -276,8 +287,14 @@ a:hover {
} }
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translateY(20px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
/* Post List & Grid Layout */ /* Post List & Grid Layout */
@@ -358,7 +375,9 @@ body.single-col .post-list {
color: rgba(0, 0, 0, 0.125); color: rgba(0, 0, 0, 0.125);
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 3px; margin-bottom: 3px;
} }
@@ -447,7 +466,9 @@ body.single-col .post-list {
} }
.article-content { .article-content {
font: 400 18px/1.75 'Open Sans', var(--font-sans); font:
400 18px/1.75 'Open Sans',
var(--font-sans);
word-break: break-word; word-break: break-word;
} }
@@ -498,7 +519,7 @@ body.single-col .post-list {
font-weight: 500; font-weight: 500;
} }
.article-content a:not([data-fancybox="gallery"]):not(.post-like):not(.edit-button) { .article-content a:not([data-fancybox='gallery']):not(.post-like):not(.edit-button) {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@@ -506,7 +527,7 @@ body.single-col .post-list {
text-decoration: none; text-decoration: none;
} }
.article-content a:not([data-fancybox="gallery"]):not(.post-like):not(.edit-button):hover { .article-content a:not([data-fancybox='gallery']):not(.post-like):not(.edit-button):hover {
border-color: #000; border-color: #000;
opacity: 1; opacity: 1;
} }
@@ -534,7 +555,7 @@ body.single-col .post-list {
.highlight, .highlight,
.code-block { .code-block {
font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace; font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -622,6 +643,10 @@ body.single-col .post-list {
line-height: 1; line-height: 1;
} }
.code-header-actions .check-icon {
display: none;
}
.code-header-actions svg { .code-header-actions svg {
display: block; display: block;
} }
@@ -658,13 +683,19 @@ body.single-col .post-list {
border-radius: 0; border-radius: 0;
} }
.code-block .code-pre {
counter-reset: codeblock;
}
/* code — max-height + padding 同时过渡，收缩彻底无残留 */ /* code — max-height + padding 同时过渡，收缩彻底无残留 */
.code-block pre code { .code-block pre code {
display: block !important; display: block !important;
margin: 0; margin: 0;
max-height: 0; max-height: 0;
padding: 0; padding: 0;
transition: max-height 0.3s ease-out, padding 0.3s ease-out; transition:
max-height 0.3s ease-out,
padding 0.3s ease-out;
overflow: hidden; overflow: hidden;
line-height: 1.6; line-height: 1.6;
} }
@@ -712,7 +743,7 @@ body.single-col .post-list {
border-radius: 4px; border-radius: 4px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
font-size: 85%; font-size: 85%;
font-family: monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier; font-family: monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier;
color: #e96900; color: #e96900;
border: none; border: none;
display: inline-block; display: inline-block;
@@ -763,7 +794,7 @@ body.single-col .post-list {
} }
.admonition .admonition-title::after { .admonition .admonition-title::after {
content: ""; content: '';
position: absolute; position: absolute;
right: 0.75rem; right: 0.75rem;
top: 0.85rem; top: 0.85rem;
@@ -817,88 +848,228 @@ body.single-col .post-list {
} }
/* 1. note */ /* 1. note */
.admonition.note { border-left-color: #448aff; background-color: rgba(68, 138, 255, 0.1); } .admonition.note {
.admonition.note .admonition-title { border-bottom-color: rgba(68, 138, 255, 0.1); background-color: rgba(68, 138, 255, 0.25); } border-left-color: #448aff;
.admonition.note.open .admonition-title { background-color: rgba(68, 138, 255, 0.1); } background-color: rgba(68, 138, 255, 0.1);
.admonition.note span.icon > svg { color: #448aff; } }
.admonition.note .admonition-title {
border-bottom-color: rgba(68, 138, 255, 0.1);
background-color: rgba(68, 138, 255, 0.25);
}
.admonition.note.open .admonition-title {
background-color: rgba(68, 138, 255, 0.1);
}
.admonition.note span.icon > svg {
color: #448aff;
}
/* 2. abstract */ /* 2. abstract */
.admonition.abstract { border-left-color: #00b0ff; background-color: rgba(0, 176, 255, 0.1); } .admonition.abstract {
.admonition.abstract .admonition-title { border-bottom-color: rgba(0, 176, 255, 0.1); background-color: rgba(0, 176, 255, 0.25); } border-left-color: #00b0ff;
.admonition.abstract.open .admonition-title { background-color: rgba(0, 176, 255, 0.1); } background-color: rgba(0, 176, 255, 0.1);
.admonition.abstract span.icon > svg { color: #00b0ff; } }
.admonition.abstract .admonition-title {
border-bottom-color: rgba(0, 176, 255, 0.1);
background-color: rgba(0, 176, 255, 0.25);
}
.admonition.abstract.open .admonition-title {
background-color: rgba(0, 176, 255, 0.1);
}
.admonition.abstract span.icon > svg {
color: #00b0ff;
}
/* 3. info */ /* 3. info */
.admonition.info { border-left-color: #00b8d4; background-color: rgba(0, 184, 212, 0.1); } .admonition.info {
.admonition.info .admonition-title { border-bottom-color: rgba(0, 184, 212, 0.1); background-color: rgba(0, 184, 212, 0.25); } border-left-color: #00b8d4;
.admonition.info.open .admonition-title { background-color: rgba(0, 184, 212, 0.1); } background-color: rgba(0, 184, 212, 0.1);
.admonition.info span.icon > svg { color: #00b8d4; } }
.admonition.info .admonition-title {
border-bottom-color: rgba(0, 184, 212, 0.1);
background-color: rgba(0, 184, 212, 0.25);
}
.admonition.info.open .admonition-title {
background-color: rgba(0, 184, 212, 0.1);
}
.admonition.info span.icon > svg {
color: #00b8d4;
}
/* 4. tip */ /* 4. tip */
.admonition.tip { border-left-color: #00bfa5; background-color: rgba(0, 191, 165, 0.1); } .admonition.tip {
.admonition.tip .admonition-title { border-bottom-color: rgba(0, 191, 165, 0.1); background-color: rgba(0, 191, 165, 0.25); } border-left-color: #00bfa5;
.admonition.tip.open .admonition-title { background-color: rgba(0, 191, 165, 0.1); } background-color: rgba(0, 191, 165, 0.1);
.admonition.tip span.icon > svg { color: #00bfa5; } }
.admonition.tip .admonition-title {
border-bottom-color: rgba(0, 191, 165, 0.1);
background-color: rgba(0, 191, 165, 0.25);
}
.admonition.tip.open .admonition-title {
background-color: rgba(0, 191, 165, 0.1);
}
.admonition.tip span.icon > svg {
color: #00bfa5;
}
/* 5. success */ /* 5. success */
.admonition.success { border-left-color: #00c853; background-color: rgba(0, 200, 83, 0.1); } .admonition.success {
.admonition.success .admonition-title { border-bottom-color: rgba(0, 200, 83, 0.1); background-color: rgba(0, 200, 83, 0.25); } border-left-color: #00c853;
.admonition.success.open .admonition-title { background-color: rgba(0, 200, 83, 0.1); } background-color: rgba(0, 200, 83, 0.1);
.admonition.success span.icon > svg { color: #00c853; } }
.admonition.success .admonition-title {
border-bottom-color: rgba(0, 200, 83, 0.1);
background-color: rgba(0, 200, 83, 0.25);
}
.admonition.success.open .admonition-title {
background-color: rgba(0, 200, 83, 0.1);
}
.admonition.success span.icon > svg {
color: #00c853;
}
/* 6. question */ /* 6. question */
.admonition.question { border-left-color: #64dd17; background-color: rgba(100, 221, 23, 0.1); } .admonition.question {
.admonition.question .admonition-title { border-bottom-color: rgba(100, 221, 23, 0.1); background-color: rgba(100, 221, 23, 0.25); } border-left-color: #64dd17;
.admonition.question.open .admonition-title { background-color: rgba(100, 221, 23, 0.1); } background-color: rgba(100, 221, 23, 0.1);
.admonition.question span.icon > svg { color: #64dd17; } }
.admonition.question .admonition-title {
border-bottom-color: rgba(100, 221, 23, 0.1);
background-color: rgba(100, 221, 23, 0.25);
}
.admonition.question.open .admonition-title {
background-color: rgba(100, 221, 23, 0.1);
}
.admonition.question span.icon > svg {
color: #64dd17;
}
/* 7. warning */ /* 7. warning */
.admonition.warning { border-left-color: #ff9100; background-color: rgba(255, 145, 0, 0.1); } .admonition.warning {
.admonition.warning .admonition-title { border-bottom-color: rgba(255, 145, 0, 0.1); background-color: rgba(255, 145, 0, 0.25); } border-left-color: #ff9100;
.admonition.warning.open .admonition-title { background-color: rgba(255, 145, 0, 0.1); } background-color: rgba(255, 145, 0, 0.1);
.admonition.warning span.icon > svg { color: #ff9100; } }
.admonition.warning .admonition-title {
border-bottom-color: rgba(255, 145, 0, 0.1);
background-color: rgba(255, 145, 0, 0.25);
}
.admonition.warning.open .admonition-title {
background-color: rgba(255, 145, 0, 0.1);
}
.admonition.warning span.icon > svg {
color: #ff9100;
}
/* 8. failure */ /* 8. failure */
.admonition.failure { border-left-color: #ff5252; background-color: rgba(255, 82, 82, 0.1); } .admonition.failure {
.admonition.failure .admonition-title { border-bottom-color: rgba(255, 82, 82, 0.1); background-color: rgba(255, 82, 82, 0.25); } border-left-color: #ff5252;
.admonition.failure.open .admonition-title { background-color: rgba(255, 82, 82, 0.1); } background-color: rgba(255, 82, 82, 0.1);
.admonition.failure span.icon > svg { color: #ff5252; } }
.admonition.failure .admonition-title {
border-bottom-color: rgba(255, 82, 82, 0.1);
background-color: rgba(255, 82, 82, 0.25);
}
.admonition.failure.open .admonition-title {
background-color: rgba(255, 82, 82, 0.1);
}
.admonition.failure span.icon > svg {
color: #ff5252;
}
/* 9. danger */ /* 9. danger */
.admonition.danger { border-left-color: #ff1744; background-color: rgba(255, 23, 68, 0.1); } .admonition.danger {
.admonition.danger .admonition-title { border-bottom-color: rgba(255, 23, 68, 0.1); background-color: rgba(255, 23, 68, 0.25); } border-left-color: #ff1744;
.admonition.danger.open .admonition-title { background-color: rgba(255, 23, 68, 0.1); } background-color: rgba(255, 23, 68, 0.1);
.admonition.danger span.icon > svg { color: #ff1744; } }
.admonition.danger .admonition-title {
border-bottom-color: rgba(255, 23, 68, 0.1);
background-color: rgba(255, 23, 68, 0.25);
}
.admonition.danger.open .admonition-title {
background-color: rgba(255, 23, 68, 0.1);
}
.admonition.danger span.icon > svg {
color: #ff1744;
}
/* 10. bug */ /* 10. bug */
.admonition.bug { border-left-color: #f50057; background-color: rgba(245, 0, 87, 0.1); } .admonition.bug {
.admonition.bug .admonition-title { border-bottom-color: rgba(245, 0, 87, 0.1); background-color: rgba(245, 0, 87, 0.25); } border-left-color: #f50057;
.admonition.bug.open .admonition-title { background-color: rgba(245, 0, 87, 0.1); } background-color: rgba(245, 0, 87, 0.1);
.admonition.bug span.icon > svg { color: #f50057; } }
.admonition.bug .admonition-title {
border-bottom-color: rgba(245, 0, 87, 0.1);
background-color: rgba(245, 0, 87, 0.25);
}
.admonition.bug.open .admonition-title {
background-color: rgba(245, 0, 87, 0.1);
}
.admonition.bug span.icon > svg {
color: #f50057;
}
/* 11. example */ /* 11. example */
.admonition.example { border-left-color: #651fff; background-color: rgba(101, 31, 255, 0.1); } .admonition.example {
.admonition.example .admonition-title { border-bottom-color: rgba(101, 31, 255, 0.1); background-color: rgba(101, 31, 255, 0.25); } border-left-color: #651fff;
.admonition.example.open .admonition-title { background-color: rgba(101, 31, 255, 0.1); } background-color: rgba(101, 31, 255, 0.1);
.admonition.example span.icon > svg { color: #651fff; } }
.admonition.example .admonition-title {
border-bottom-color: rgba(101, 31, 255, 0.1);
background-color: rgba(101, 31, 255, 0.25);
}
.admonition.example.open .admonition-title {
background-color: rgba(101, 31, 255, 0.1);
}
.admonition.example span.icon > svg {
color: #651fff;
}
/* 12. quote */ /* 12. quote */
.admonition.quote { border-left-color: #9e9e9e; background-color: rgba(159, 159, 159, 0.1); } .admonition.quote {
.admonition.quote .admonition-title { border-bottom-color: rgba(159, 159, 159, 0.1); background-color: rgba(159, 159, 159, 0.25); } border-left-color: #9e9e9e;
.admonition.quote.open .admonition-title { background-color: rgba(159, 159, 159, 0.1); } background-color: rgba(159, 159, 159, 0.1);
.admonition.quote span.icon > svg { color: #9e9e9e; } }
.admonition.quote .admonition-title {
border-bottom-color: rgba(159, 159, 159, 0.1);
background-color: rgba(159, 159, 159, 0.25);
}
.admonition.quote.open .admonition-title {
background-color: rgba(159, 159, 159, 0.1);
}
.admonition.quote span.icon > svg {
color: #9e9e9e;
}
/* 13. important */ /* 13. important */
.admonition.important { border-left-color: #8957e5; background-color: rgba(137, 87, 229, 0.1); } .admonition.important {
.admonition.important .admonition-title { border-bottom-color: rgba(137, 87, 229, 0.1); background-color: rgba(137, 87, 229, 0.25); } border-left-color: #8957e5;
.admonition.important.open .admonition-title { background-color: rgba(137, 87, 229, 0.1); } background-color: rgba(137, 87, 229, 0.1);
.admonition.important span.icon > svg { color: #8957e5; } }
.admonition.important .admonition-title {
border-bottom-color: rgba(137, 87, 229, 0.1);
background-color: rgba(137, 87, 229, 0.25);
}
.admonition.important.open .admonition-title {
background-color: rgba(137, 87, 229, 0.1);
}
.admonition.important span.icon > svg {
color: #8957e5;
}
/* 14. caution */ /* 14. caution */
.admonition.caution { border-left-color: #da3633; background-color: rgba(218, 54, 51, 0.1); } .admonition.caution {
.admonition.caution .admonition-title { border-bottom-color: rgba(218, 54, 51, 0.1); background-color: rgba(218, 54, 51, 0.25); } border-left-color: #da3633;
.admonition.caution.open .admonition-title { background-color: rgba(218, 54, 51, 0.1); } background-color: rgba(218, 54, 51, 0.1);
.admonition.caution span.icon > svg { color: #da3633; } }
.admonition.caution .admonition-title {
border-bottom-color: rgba(218, 54, 51, 0.1);
background-color: rgba(218, 54, 51, 0.25);
}
.admonition.caution.open .admonition-title {
background-color: rgba(218, 54, 51, 0.1);
}
.admonition.caution span.icon > svg {
color: #da3633;
}
/* Footer */ /* Footer */
footer { footer {
@@ -922,7 +1093,8 @@ footer section:nth-child(2) {
text-align: right; text-align: right;
} }
footer section, footer section * { footer section,
footer section * {
color: #ddd; color: #ddd;
font-weight: 300; font-weight: 300;
text-decoration: none; text-decoration: none;
@@ -990,7 +1162,9 @@ footer section p:first-child {
z-index: 3; z-index: 3;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0.3s; transition:
opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
visibility 0s 0.3s;
display: block; display: block;
} }
@@ -1012,7 +1186,7 @@ footer section p:first-child {
width: 280px; width: 280px;
right: -280px; right: -280px;
background-color: #111; /* VOID style dark background */ background-color: #111; /* VOID style dark background */
box-shadow: -2px 0 8px rgba(0,0,0,0.05); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
padding: 1rem; padding: 1rem;
padding-right: 0; padding-right: 0;
padding-top: 60px; padding-top: 60px;
@@ -1024,7 +1198,7 @@ footer section p:first-child {
} }
.TOC::before { .TOC::before {
content: "Contents"; content: 'Contents';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -1078,7 +1252,8 @@ footer section p:first-child {
text-decoration: none; text-decoration: none;
} }
.TOC li a:hover, .TOC li a.is-active-link { .TOC li a:hover,
.TOC li a.is-active-link {
color: #419b38; color: #419b38;
opacity: 1; opacity: 1;
} }
@@ -1088,7 +1263,7 @@ footer section p:first-child {
} }
.TOC .is-active-link::before { .TOC .is-active-link::before {
content: ""; content: '';
background-color: rgba(0, 0, 0, 0.3); /* VOID style dark highlight */ background-color: rgba(0, 0, 0, 0.3); /* VOID style dark highlight */
display: block; display: block;
height: 2.1rem; height: 2.1rem;
@@ -1103,7 +1278,7 @@ footer section p:first-child {
@media screen and (min-width: 1199.5px) { @media screen and (min-width: 1199.5px) {
.TOC .toc-link:hover::before { .TOC .toc-link:hover::before {
content: ""; content: '';
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
display: block; display: block;
height: 2.1rem; height: 2.1rem;
@@ -1209,7 +1384,7 @@ footer section p:first-child {
} }
.tags .tag-item::before { .tags .tag-item::before {
content: "#"; content: '#';
margin-right: 2px; margin-right: 2px;
} }
src/app.d.ts
Vendored
+3 -6
View File
@@ -3,20 +3,17 @@
declare global { declare global {
namespace App { namespace App {
interface Platform { interface Platform {
env: { env: Env;
DB: D1Database;
R2: R2Bucket;
} & Env;
context: ExecutionContext; context: ExecutionContext;
caches: CacheStorage & { default: Cache }; caches: CacheStorage & { default: Cache };
cf?: IncomingRequestCfProperties cf?: IncomingRequestCfProperties;
} }
// interface Error {} // interface Error {}
interface Locals { interface Locals {
user?: { user?: {
email: string; email: string;
} };
} }
// interface PageData {} // interface PageData {}
// interface PageState {} // interface PageState {}
src/app.html
+10 -3
View File
@@ -4,9 +4,16 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" /> <meta name="text-scale" content="scale" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"> <link
<link id="stylesheet_noto" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified" rel="stylesheet"> href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet"> rel="stylesheet"
/>
<link
id="stylesheet_noto"
href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
src/lib/components/Toast.svelte
+43 -4
View File
@@ -12,17 +12,47 @@
out:fade={{ duration: 200 }} out:fade={{ duration: 200 }}
> >
{#if msg.type === 'success'} {#if msg.type === 'success'}
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon"> <svg
viewBox="0 0 24 24"
width="18"
height="18"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="toast-icon"
>
<polyline points="20 6 9 17 4 12"></polyline> <polyline points="20 6 9 17 4 12"></polyline>
</svg> </svg>
{:else if msg.type === 'error'} {:else if msg.type === 'error'}
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon"> <svg
viewBox="0 0 24 24"
width="18"
height="18"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="toast-icon"
>
<circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line> <line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line> <line x1="9" y1="9" x2="15" y2="15"></line>
</svg> </svg>
{:else} {:else}
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon"> <svg
viewBox="0 0 24 24"
width="18"
height="18"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="toast-icon"
>
<circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line>
@@ -31,7 +61,16 @@
<span>{msg.text}</span> <span>{msg.text}</span>
<button class="toast-close" onclick={() => toastState.remove(msg.id)} aria-label="Close"> <button class="toast-close" onclick={() => toastState.remove(msg.id)} aria-label="Close">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg
viewBox="0 0 24 24"
width="14"
height="14"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
</svg> </svg>
src/lib/components/admin/FeaturedImagePicker.svelte
+59 -19
View File
@@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import { resolve } from '$app/paths';
import { addToast } from '$lib/stores/toast.svelte'; import { addToast } from '$lib/stores/toast.svelte';
import { Fancybox } from '@fancyapps/ui/dist/index.js';
import '@fancyapps/ui/dist/fancybox/fancybox.css';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Tabs from './Tabs.svelte'; import Tabs from './Tabs.svelte';
@@ -22,10 +23,12 @@
}>(); }>();
let pickerElement = $state<HTMLDivElement>(); let pickerElement = $state<HTMLDivElement>();
let previewHeightRatio = $derived((() => { let previewHeightRatio = $derived(
(() => {
const [width, height] = aspectRatio.split('/').map(Number); const [width, height] = aspectRatio.split('/').map(Number);
return width > 0 && height > 0 ? height / width : 9 / 16; return width > 0 && height > 0 ? height / width : 9 / 16;
})()); })()
);
let activeTab = $state('url'); let activeTab = $state('url');
let isUploading = $state(false); let isUploading = $state(false);
@@ -40,9 +43,19 @@
const selector = '[data-fancybox="featured-image-preview"]'; const selector = '[data-fancybox="featured-image-preview"]';
const container = pickerElement; const container = pickerElement;
Fancybox.bind(container, selector, {}); let FancyboxInstance: unknown = null;
return () => Fancybox.unbind(container, selector); import('@fancyapps/ui/dist/index.js').then(async ({ Fancybox }) => {
await import('@fancyapps/ui/dist/fancybox/fancybox.css');
FancyboxInstance = Fancybox;
Fancybox.bind(container, selector, {});
});
return () => {
if (FancyboxInstance) {
(FancyboxInstance as any).unbind(container, selector);
}
};
}); });
async function loadLibrary(reset = false) { async function loadLibrary(reset = false) {
@@ -56,7 +69,8 @@
isLoadingLibrary = true; isLoadingLibrary = true;
try { try {
const res = await fetch(`/admin/api/images?page=${page}&limit=12`); const res = await fetch(`/admin/api/images?page=${page}&limit=12`);
const data = await res.json() as any;
const data = (await res.json()) as any;
if (data.success) { if (data.success) {
images = [...images, ...data.images]; images = [...images, ...data.images];
if (page >= data.pagination.totalPages) { if (page >= data.pagination.totalPages) {
@@ -65,7 +79,7 @@
page++; page++;
} }
} }
} catch (err) { } catch (err: any) {
console.error(err); console.error(err);
addToast('加载图库失败', 'error'); addToast('加载图库失败', 'error');
} finally { } finally {
@@ -94,7 +108,8 @@
method: 'POST', method: 'POST',
body: formData body: formData
}); });
const data = await res.json() as any;
const data = (await res.json()) as any;
if (data.success) { if (data.success) {
cover = data.url; cover = data.url;
addToast('特色图上传成功', 'success'); addToast('特色图上传成功', 'success');
@@ -102,7 +117,7 @@
} else { } else {
addToast(data.error || '上传失败', 'error'); addToast(data.error || '上传失败', 'error');
} }
} catch (err) { } catch (err: any) {
console.error(err); console.error(err);
addToast('网络错误，上传失败', 'error'); addToast('网络错误，上传失败', 'error');
} finally { } finally {
@@ -126,7 +141,7 @@
{#if previewable} {#if previewable}
<a <a
class="cover-preview-link" class="cover-preview-link"
href={cover} href={resolve(cover)}
data-fancybox="featured-image-preview" data-fancybox="featured-image-preview"
data-caption={title || '特色图'} data-caption={title || '特色图'}
aria-label="查看特色图大图" aria-label="查看特色图大图"
@@ -137,7 +152,7 @@
{:else} {:else}
<img src={cover} alt="图片预览" /> <img src={cover} alt="图片预览" />
{/if} {/if}
<button type="button" class="btn-clear" onclick={() => cover = ''}>移除</button> <button type="button" class="btn-clear" onclick={() => (cover = '')}>移除</button>
</div> </div>
{/if} {/if}
@@ -155,26 +170,49 @@
<div class="tab-content"> <div class="tab-content">
{#if activeTab === 'url'} {#if activeTab === 'url'}
<input type="url" placeholder="输入或粘贴图片链接" bind:value={cover} class="full-width-input" /> <input
type="url"
placeholder="输入或粘贴图片链接"
bind:value={cover}
class="full-width-input"
/>
{:else if activeTab === 'upload'} {:else if activeTab === 'upload'}
<div class="upload-area" class:disabled={isUploading}> <div class="upload-area" class:disabled={isUploading}>
<label> <label>
<span>{isUploading ? '正在上传...' : '点击选择图片上传'}</span> <span>{isUploading ? '正在上传...' : '点击选择图片上传'}</span>
<input type="file" accept="image/*" onchange={handleUpload} disabled={isUploading} style="display: none" /> <input
type="file"
accept="image/*"
onchange={handleUpload}
disabled={isUploading}
style="display: none"
/>
</label> </label>
</div> </div>
{:else if activeTab === 'library'} {:else if activeTab === 'library'}
<div class="library-grid"> <div class="library-grid">
{#each images as img} {#each images as img (img.id || img)}
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="library-item" onclick={() => { cover = img.url; activeTab = 'url'; }} title={img.filename}> <div
class="library-item"
onclick={() => {
cover = img.url;
activeTab = 'url';
}}
title={img.filename}
>
<img src={img.url} alt={img.filename} loading="lazy" /> <img src={img.url} alt={img.filename} loading="lazy" />
</div> </div>
{/each} {/each}
</div> </div>
{#if hasMore} {#if hasMore}
<button type="button" class="btn-load-more" onclick={() => loadLibrary()} disabled={isLoadingLibrary}> <button
type="button"
class="btn-load-more"
onclick={() => loadLibrary()}
disabled={isLoadingLibrary}
>
{isLoadingLibrary ? '加载中...' : '加载更多'} {isLoadingLibrary ? '加载中...' : '加载更多'}
</button> </button>
{/if} {/if}
@@ -259,7 +297,9 @@
font-family: inherit; font-family: inherit;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0; border-radius: 0;
transition: border-color 0.3s ease, box-shadow 0.3s ease; transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
} }
.full-width-input:focus { .full-width-input:focus {
@@ -280,7 +320,7 @@
} }
.upload-area label:hover { .upload-area label:hover {
background: rgba(0,0,0,0.03); background: rgba(0, 0, 0, 0.03);
} }
.upload-area.disabled label { .upload-area.disabled label {
src/lib/components/admin/Tabs.svelte
+4 -4
View File
@@ -21,8 +21,8 @@
} }
</script> </script>
<div class="tabs-header" class:full-width={fullWidth} class:small={small}> <div class="tabs-header" class:full-width={fullWidth} class:small>
{#each tabs as tab} {#each tabs as tab (tab.id || tab)}
<button <button
type="button" type="button"
class="tab-btn" class="tab-btn"
@@ -38,7 +38,7 @@
.tabs-header { .tabs-header {
display: flex; display: flex;
gap: 20px; gap: 20px;
border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.1)); border-bottom: 2px solid var(--border-color, rgba(0, 0, 0, 0.1));
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -67,7 +67,7 @@
font-size: 1rem; font-size: 1rem;
font-family: inherit; font-family: inherit;
font-weight: 600; font-weight: 600;
color: var(--text-muted, rgba(0,0,0,0.5)); color: var(--text-muted, rgba(0, 0, 0, 0.5));
cursor: pointer; cursor: pointer;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
margin-bottom: -2px; margin-bottom: -2px;
src/lib/hugoParser.ts
+17 -8
View File
@@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { parse as parseToml } from 'smol-toml'; import { parse as parseToml } from 'smol-toml';
import { parse as parseYaml } from 'yaml'; import { parse as parseYaml } from 'yaml';
@@ -25,7 +27,7 @@ function parseOrCurrentDate(val: unknown): string {
return new Date().toISOString(); return new Date().toISOString();
} }
return dateObj.toISOString(); return dateObj.toISOString();
} catch { } catch (err: any) {
return new Date().toISOString(); return new Date().toISOString();
} }
} }
@@ -75,7 +77,7 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
if (endIndex !== -1) { if (endIndex !== -1) {
const frontmatter = text.substring(3, endIndex).trim(); const frontmatter = text.substring(3, endIndex).trim();
bodyContent = text.substring(endIndex + 4).trim(); bodyContent = text.substring(endIndex + 4).trim();
meta = parseToml(frontmatter) as Record<string, unknown>; meta = parseToml(frontmatter) as Record<string, any>;
} }
} }
// 2. 检识常规 YAML (以 --- 开头包络) // 2. 检识常规 YAML (以 --- 开头包络)
@@ -84,16 +86,20 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
if (endIndex !== -1) { if (endIndex !== -1) {
const frontmatter = text.substring(3, endIndex).trim(); const frontmatter = text.substring(3, endIndex).trim();
bodyContent = text.substring(endIndex + 4).trim(); bodyContent = text.substring(endIndex + 4).trim();
meta = parseYaml(frontmatter) as Record<string, unknown>; meta = parseYaml(frontmatter) as Record<string, any>;
} }
} }
} catch (err) { } catch (err: any) {
console.error('解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:', err); console.error(
'解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:',
err
);
// 当解析受卡出错，空字典依然不阻挠对下方日期与稿费正文字面的顺利捕拾 // 当解析受卡出错，空字典依然不阻挠对下方日期与稿费正文字面的顺利捕拾
} }
// 取值并完成映射：除以下对应参数处，诸如 draft/twemoji/lightgallery 等全在空载转储里随水蒸丢！ // 取值并完成映射：除以下对应参数处，诸如 draft/twemoji/lightgallery 等全在空载转储里随水蒸丢！
const title = typeof meta.title === 'string' && meta.title.trim() !== '' ? meta.title.trim() : defaultName; const title =
typeof meta.title === 'string' && meta.title.trim() !== '' ? meta.title.trim() : defaultName;
let slug = typeof meta.slug === 'string' ? meta.slug.trim() : ''; let slug = typeof meta.slug === 'string' ? meta.slug.trim() : '';
if (!slug) { if (!slug) {
@@ -108,7 +114,8 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
} }
// 特色图片字段识别（首挑 featuredImage，也兼备处理 cover/image） // 特色图片字段识别（首挑 featuredImage，也兼备处理 cover/image）
const cover = typeof meta.featuredImage === 'string' const cover =
typeof meta.featuredImage === 'string'
? meta.featuredImage.trim() ? meta.featuredImage.trim()
: typeof meta.cover === 'string' : typeof meta.cover === 'string'
? meta.cover.trim() ? meta.cover.trim()
@@ -118,7 +125,9 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
// 时间字段转化：严格按需求约定“一旦转换错漏或是全无，采用目前时刻填满” // 时间字段转化：严格按需求约定“一旦转换错漏或是全无，采用目前时刻填满”
const published_at = parseOrCurrentDate(meta.date || meta.published_at); const published_at = parseOrCurrentDate(meta.date || meta.published_at);
const updated_at = parseOrCurrentDate(meta.lastmod || meta.updated_at || meta.date || meta.published_at); const updated_at = parseOrCurrentDate(
meta.lastmod || meta.updated_at || meta.date || meta.published_at
);
return { return {
title: title || '无名小贴', title: title || '无名小贴',