first commit
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
const { title } = Astro.props;
|
||||
const path = Astro.url.pathname;
|
||||
const links = [
|
||||
{ href: "/admin", label: "文章" },
|
||||
{ href: "/admin/content/service", label: "服務" },
|
||||
{ href: "/admin/content/feature", label: "特色" },
|
||||
{ href: "/admin/content/step", label: "流程" },
|
||||
{ href: "/admin/content/faq", label: "常見問題" },
|
||||
{ href: "/admin/cases", label: "案例" },
|
||||
{ href: "/admin/settings", label: "設定" },
|
||||
];
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title} — 後台</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="bar">
|
||||
<div class="inner">
|
||||
<a class="brand" href="/admin">
|
||||
<span class="dot"></span>
|
||||
盈豐太陽能 · 後台
|
||||
</a>
|
||||
<nav>
|
||||
{
|
||||
links.map((l) => (
|
||||
<a href={l.href} class={path === l.href || path.startsWith(l.href + "/") ? "active" : ""}>
|
||||
{l.label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<a href="/" target="_blank">睇網站</a>
|
||||
<a href="/admin/logout">登出</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="inner">
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
:root {
|
||||
font-family: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
|
||||
color: #0f1e1a;
|
||||
background: #f2f8f6;
|
||||
line-height: 1.65;
|
||||
font-size: 15px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; }
|
||||
a { color: #0b8a5e; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
.inner { max-width: 920px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
.bar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; z-index: 10; }
|
||||
.bar .inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; flex-wrap: wrap; }
|
||||
.brand { font-weight: 800; color: #0f1e1a; display: inline-flex; align-items: center; gap: 8px; }
|
||||
.brand:hover { text-decoration: none; }
|
||||
.dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg,#0b8a5e,#0ba5ec); display: inline-block; }
|
||||
.bar nav { display: flex; gap: 14px; font-size: 13.5px; flex-wrap: wrap; }
|
||||
.bar nav a { color: #33413c; }
|
||||
.bar nav a.active { color: #0b8a5e; font-weight: 700; }
|
||||
|
||||
main { padding: 32px 24px 100px; }
|
||||
h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
|
||||
.sub { color: #5b6b66; font-size: 13.5px; margin: 0 0 24px; }
|
||||
|
||||
.card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
|
||||
.card h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; }
|
||||
th { text-align: left; font-weight: 600; font-size: 12px; color: #5b6b66; padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
|
||||
td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.05); font-size: 14px; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
|
||||
label { display: block; font-size: 13px; color: #5b6b66; margin: 14px 0 6px; font-weight: 600; }
|
||||
input[type="text"], input[type="url"], textarea, select {
|
||||
width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
|
||||
border: 1px solid rgba(0,0,0,.15); border-radius: 9px; background: #fff; color: #0f1e1a;
|
||||
}
|
||||
textarea { min-height: 88px; resize: vertical; }
|
||||
input:focus, textarea:focus, select:focus { outline: 2px solid #9fdcc2; border-color: #0b8a5e; }
|
||||
|
||||
button, .btn {
|
||||
font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 9px; cursor: pointer;
|
||||
border: 1px solid #0b8a5e; background: #0b8a5e; color: #fff; display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
button:hover { background: #0a6f4c; }
|
||||
button.secondary, .btn.secondary { background: #fff; color: #0f1e1a; border-color: rgba(0,0,0,.15); }
|
||||
button.secondary:hover { background: #f2f8f6; }
|
||||
button.danger { background: #fff; color: #a32d2d; border-color: #f09595; }
|
||||
button.mini { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
|
||||
.actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
|
||||
|
||||
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid transparent; }
|
||||
.badge.published { background: #e1f5ee; color: #0f6e56; }
|
||||
.badge.draft { background: #faeeda; color: #854f0b; }
|
||||
.muted { color: #8a9793; font-size: 13px; }
|
||||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
|
||||
.row { display: grid; gap: 12px; grid-template-columns: 1fr; }
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
import { SITE_NAME } from "../config";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
noindex?: boolean;
|
||||
ogType?: "website" | "article";
|
||||
publishedTime?: Date | null;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = "香港村屋太陽能一站式服務",
|
||||
noindex = false,
|
||||
ogType = "website",
|
||||
publishedTime = null,
|
||||
image,
|
||||
} = Astro.props;
|
||||
|
||||
const siteName = SITE_NAME;
|
||||
const origin = (Astro.site ?? Astro.url).toString().replace(/\/$/, "");
|
||||
const canonical = new URL(Astro.url.pathname, origin + "/").toString();
|
||||
const fullTitle = title.includes(siteName) ? title : `${title} — ${siteName}`;
|
||||
const ogImage = image ? (image.startsWith("http") ? image : new URL(image, origin + "/").toString()) : undefined;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{fullTitle}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonical} />
|
||||
{noindex && <meta name="robots" content="noindex, nofollow" />}
|
||||
|
||||
<meta property="og:type" content={ogType} />
|
||||
<meta property="og:site_name" content={siteName} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:url" content={canonical} />
|
||||
<meta property="og:locale" content="zh_HK" />
|
||||
{ogImage && <meta property="og:image" content={ogImage} />}
|
||||
{publishedTime && <meta property="article:published_time" content={publishedTime.toISOString()} />}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
{ogImage && <meta name="twitter:image" content={ogImage} />}
|
||||
|
||||
<link rel="sitemap" href="/sitemap.xml" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;700;900&family=Noto+Serif+HK:wght@600;700;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
|
||||
background: #faf8f4;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user