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
+388 -121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app.css
+255 -80
View File
@@ -1,4 +1,4 @@
@import "highlight.js/styles/github.css";
@import 'highlight.js/styles/github.css';
:root {
--bg-color: #ffffff;
@@ -13,7 +13,9 @@
--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);
--layout-width: 860px;
@@ -48,7 +50,12 @@ body {
flex: 1 0 auto;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
color: var(--title-color);
font-weight: 600;
@@ -67,14 +74,16 @@ a:hover {
}
/* Base Layout */
.wrapper, .container {
.wrapper,
.container {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 20px;
}
@media screen and (min-width: 1024px) {
.wrapper.wide, .container.wide {
.wrapper.wide,
.container.wide {
max-width: 1024px;
}
}
@@ -160,7 +169,7 @@ a:hover {
.header nav a.active::after,
.header nav .nav-dropdown-trigger.active::after {
content: "";
content: '';
position: absolute;
bottom: 0;
left: 0;
@@ -208,7 +217,9 @@ a:hover {
opacity: 0;
pointer-events: none;
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;
padding: 4px 0;
}
@@ -276,8 +287,14 @@ a:hover {
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Post List & Grid Layout */
@@ -358,7 +375,9 @@ body.single-col .post-list {
color: rgba(0, 0, 0, 0.125);
font-size: 14px;
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;
margin-bottom: 3px;
}
@@ -447,7 +466,9 @@ body.single-col .post-list {
}
.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;
}
@@ -498,7 +519,7 @@ body.single-col .post-list {
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-break: break-all;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@@ -506,7 +527,7 @@ body.single-col .post-list {
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;
opacity: 1;
}
@@ -534,7 +555,7 @@ body.single-col .post-list {
.highlight,
.code-block {
font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
font-size: 0.875rem;
}
@@ -622,6 +643,10 @@ body.single-col .post-list {
line-height: 1;
}
.code-header-actions .check-icon {
display: none;
}
.code-header-actions svg {
display: block;
}
@@ -658,13 +683,19 @@ body.single-col .post-list {
border-radius: 0;
}
.code-block .code-pre {
counter-reset: codeblock;
}
/* code — max-height + padding 同时过渡，收缩彻底无残留 */
.code-block pre code {
display: block !important;
margin: 0;
max-height: 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;
line-height: 1.6;
}
@@ -712,7 +743,7 @@ body.single-col .post-list {
border-radius: 4px;
padding: 0.2em 0.4em;
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;
border: none;
display: inline-block;
@@ -763,7 +794,7 @@ body.single-col .post-list {
}
.admonition .admonition-title::after {
content: "";
content: '';
position: absolute;
right: 0.75rem;
top: 0.85rem;
@@ -817,88 +848,228 @@ body.single-col .post-list {
}
/* 1. note */
.admonition.note { border-left-color: #448aff; background-color: rgba(68, 138, 255, 0.1); }
.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; }
.admonition.note {
border-left-color: #448aff;
background-color: rgba(68, 138, 255, 0.1);
}
.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 */
.admonition.abstract { border-left-color: #00b0ff; background-color: rgba(0, 176, 255, 0.1); }
.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; }
.admonition.abstract {
border-left-color: #00b0ff;
background-color: rgba(0, 176, 255, 0.1);
}
.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 */
.admonition.info { border-left-color: #00b8d4; background-color: rgba(0, 184, 212, 0.1); }
.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; }
.admonition.info {
border-left-color: #00b8d4;
background-color: rgba(0, 184, 212, 0.1);
}
.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 */
.admonition.tip { border-left-color: #00bfa5; background-color: rgba(0, 191, 165, 0.1); }
.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; }
.admonition.tip {
border-left-color: #00bfa5;
background-color: rgba(0, 191, 165, 0.1);
}
.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 */
.admonition.success { border-left-color: #00c853; background-color: rgba(0, 200, 83, 0.1); }
.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; }
.admonition.success {
border-left-color: #00c853;
background-color: rgba(0, 200, 83, 0.1);
}
.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 */
.admonition.question { border-left-color: #64dd17; background-color: rgba(100, 221, 23, 0.1); }
.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; }
.admonition.question {
border-left-color: #64dd17;
background-color: rgba(100, 221, 23, 0.1);
}
.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 */
.admonition.warning { border-left-color: #ff9100; background-color: rgba(255, 145, 0, 0.1); }
.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; }
.admonition.warning {
border-left-color: #ff9100;
background-color: rgba(255, 145, 0, 0.1);
}
.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 */
.admonition.failure { border-left-color: #ff5252; background-color: rgba(255, 82, 82, 0.1); }
.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; }
.admonition.failure {
border-left-color: #ff5252;
background-color: rgba(255, 82, 82, 0.1);
}
.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 */
.admonition.danger { border-left-color: #ff1744; background-color: rgba(255, 23, 68, 0.1); }
.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; }
.admonition.danger {
border-left-color: #ff1744;
background-color: rgba(255, 23, 68, 0.1);
}
.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 */
.admonition.bug { border-left-color: #f50057; background-color: rgba(245, 0, 87, 0.1); }
.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; }
.admonition.bug {
border-left-color: #f50057;
background-color: rgba(245, 0, 87, 0.1);
}
.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 */
.admonition.example { border-left-color: #651fff; background-color: rgba(101, 31, 255, 0.1); }
.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; }
.admonition.example {
border-left-color: #651fff;
background-color: rgba(101, 31, 255, 0.1);
}
.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 */
.admonition.quote { border-left-color: #9e9e9e; background-color: rgba(159, 159, 159, 0.1); }
.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; }
.admonition.quote {
border-left-color: #9e9e9e;
background-color: rgba(159, 159, 159, 0.1);
}
.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 */
.admonition.important { border-left-color: #8957e5; background-color: rgba(137, 87, 229, 0.1); }
.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; }
.admonition.important {
border-left-color: #8957e5;
background-color: rgba(137, 87, 229, 0.1);
}
.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 */
.admonition.caution { border-left-color: #da3633; background-color: rgba(218, 54, 51, 0.1); }
.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; }
.admonition.caution {
border-left-color: #da3633;
background-color: rgba(218, 54, 51, 0.1);
}
.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 {
@@ -922,7 +1093,8 @@ footer section:nth-child(2) {
text-align: right;
}
footer section, footer section * {
footer section,
footer section * {
color: #ddd;
font-weight: 300;
text-decoration: none;
@@ -990,7 +1162,9 @@ footer section p:first-child {
z-index: 3;
opacity: 0;
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;
}
@@ -1024,7 +1198,7 @@ footer section p:first-child {
}
.TOC::before {
content: "Contents";
content: 'Contents';
position: absolute;
left: 0;
top: 0;
@@ -1078,7 +1252,8 @@ footer section p:first-child {
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;
opacity: 1;
}
@@ -1088,7 +1263,7 @@ footer section p:first-child {
}
.TOC .is-active-link::before {
content: "";
content: '';
background-color: rgba(0, 0, 0, 0.3); /* VOID style dark highlight */
display: block;
height: 2.1rem;
@@ -1103,7 +1278,7 @@ footer section p:first-child {
@media screen and (min-width: 1199.5px) {
.TOC .toc-link:hover::before {
content: "";
content: '';
background-color: rgba(0, 0, 0, 0.3);
display: block;
height: 2.1rem;
@@ -1209,7 +1384,7 @@ footer section p:first-child {
}
.tags .tag-item::before {
content: "#";
content: '#';
margin-right: 2px;
}
src/app.d.ts
Vendored
+3 -6
View File
@@ -3,20 +3,17 @@
declare global {
namespace App {
interface Platform {
env: {
DB: D1Database;
R2: R2Bucket;
} & Env;
env: Env;
context: ExecutionContext;
caches: CacheStorage & { default: Cache };
cf?: IncomingRequestCfProperties
cf?: IncomingRequestCfProperties;
}
// interface Error {}
interface Locals {
user?: {
email: string;
}
};
}
// interface PageData {}
// interface PageState {}
src/app.html
+10 -3
View File
@@ -4,9 +4,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" 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">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
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%
</head>
<body data-sveltekit-preload-data="hover">
src/lib/components/Toast.svelte
+43 -4
View File
@@ -12,17 +12,47 @@
out:fade={{ duration: 200 }}
>
{#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>
</svg>
{: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>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
{: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>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
@@ -31,7 +61,16 @@
<span>{msg.text}</span>
<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="6" y1="6" x2="18" y2="18"></line>
</svg>
src/lib/components/admin/FeaturedImagePicker.svelte
+58 -18
View File
@@ -1,7 +1,8 @@
<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import { resolve } from '$app/paths';
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 Tabs from './Tabs.svelte';
@@ -22,10 +23,12 @@
}>();
let pickerElement = $state<HTMLDivElement>();
let previewHeightRatio = $derived((() => {
let previewHeightRatio = $derived(
(() => {
const [width, height] = aspectRatio.split('/').map(Number);
return width > 0 && height > 0 ? height / width : 9 / 16;
})());
})()
);
let activeTab = $state('url');
let isUploading = $state(false);
@@ -40,9 +43,19 @@
const selector = '[data-fancybox="featured-image-preview"]';
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) {
@@ -56,7 +69,8 @@
isLoadingLibrary = true;
try {
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) {
images = [...images, ...data.images];
if (page >= data.pagination.totalPages) {
@@ -65,7 +79,7 @@
page++;
}
}
} catch (err) {
} catch (err: any) {
console.error(err);
addToast('加载图库失败', 'error');
} finally {
@@ -94,7 +108,8 @@
method: 'POST',
body: formData
});
const data = await res.json() as any;
const data = (await res.json()) as any;
if (data.success) {
cover = data.url;
addToast('特色图上传成功', 'success');
@@ -102,7 +117,7 @@
} else {
addToast(data.error || '上传失败', 'error');
}
} catch (err) {
} catch (err: any) {
console.error(err);
addToast('网络错误，上传失败', 'error');
} finally {
@@ -126,7 +141,7 @@
{#if previewable}
<a
class="cover-preview-link"
href={cover}
href={resolve(cover)}
data-fancybox="featured-image-preview"
data-caption={title || '特色图'}
aria-label="查看特色图大图"
@@ -137,7 +152,7 @@
{:else}
<img src={cover} alt="图片预览" />
{/if}
<button type="button" class="btn-clear" onclick={() => cover = ''}>移除</button>
<button type="button" class="btn-clear" onclick={() => (cover = '')}>移除</button>
</div>
{/if}
@@ -155,26 +170,49 @@
<div class="tab-content">
{#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'}
<div class="upload-area" class:disabled={isUploading}>
<label>
<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>
</div>
{:else if activeTab === 'library'}
<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_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" />
</div>
{/each}
</div>
{#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 ? '加载中...' : '加载更多'}
</button>
{/if}
@@ -259,7 +297,9 @@
font-family: inherit;
box-sizing: border-box;
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 {
src/lib/components/admin/Tabs.svelte
+2 -2
View File
@@ -21,8 +21,8 @@
}
</script>
<div class="tabs-header" class:full-width={fullWidth} class:small={small}>
{#each tabs as tab}
<div class="tabs-header" class:full-width={fullWidth} class:small>
{#each tabs as tab (tab.id || tab)}
<button
type="button"
class="tab-btn"
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 parseYaml } from 'yaml';
@@ -25,7 +27,7 @@ function parseOrCurrentDate(val: unknown): string {
return new Date().toISOString();
}
return dateObj.toISOString();
} catch {
} catch (err: any) {
return new Date().toISOString();
}
}
@@ -75,7 +77,7 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
if (endIndex !== -1) {
const frontmatter = text.substring(3, endIndex).trim();
bodyContent = text.substring(endIndex + 4).trim();
meta = parseToml(frontmatter) as Record<string, unknown>;
meta = parseToml(frontmatter) as Record<string, any>;
}
}
// 2. 检识常规 YAML (以 --- 开头包络)
@@ -84,16 +86,20 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
if (endIndex !== -1) {
const frontmatter = text.substring(3, endIndex).trim();
bodyContent = text.substring(endIndex + 4).trim();
meta = parseYaml(frontmatter) as Record<string, unknown>;
meta = parseYaml(frontmatter) as Record<string, any>;
}
}
} catch (err) {
console.error('解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:', err);
} catch (err: any) {
console.error(
'解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:',
err
);
// 当解析受卡出错，空字典依然不阻挠对下方日期与稿费正文字面的顺利捕拾
}
// 取值并完成映射：除以下对应参数处，诸如 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() : '';
if (!slug) {
@@ -108,7 +114,8 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
}
// 特色图片字段识别（首挑 featuredImage，也兼备处理 cover/image）
const cover = typeof meta.featuredImage === 'string'
const cover =
typeof meta.featuredImage === 'string'
? meta.featuredImage.trim()
: typeof meta.cover === 'string'
? meta.cover.trim()
@@ -118,7 +125,9 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
// 时间字段转化：严格按需求约定“一旦转换错漏或是全无，采用目前时刻填满”
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 {
title: title || '无名小贴',