@astgov/theme 1.0.0 → 1.0.1

package/README.md

@@ -1,30 +1,37 @@
-# @astgov/theme
+# AstGov 主题包
 
-老派机构风 Astro 主题包。看起来像 2005 的政府网站，写起来像 2026 的 Astro 项目。
+老派机构风 Astro 主题包。看起来像 2005 的政府网站，写起来像 2026 的 Astro。
 
-## 快速开始
+基于 **Astro 6.x**，使用 Content Layer API、`astro:assets` 图片优化、CSS 自定义属性主题系统。
+
+完整文档在 `docs/` 目录下：
+
+- [快速开始](./docs/getting-started.md) — 5 分钟跑起来
+- [目录结构](./docs/directory-structure.md) — 文件说明
+- [配置详解](./docs/configuration.md) — 所有可配置项
+- [文章与页面管理](./docs/content-management.md) — 写文章、建页面
+- [样式定制](./docs/styling.md) — 改样式、换字体
+- [部署指南](./docs/deployment.md) — 发布上线
+- [常见问题](./docs/faq.md) — 排查问题
+
+## 快速上手
 
 ```bash
-# 1. 复制示例网站
-cp -r node_modules/@astgov/theme/example-site/* .
+# 1. 克隆示例网站
+git clone https://github.com/OrO-c/astgov-demo-site my-site
+cd my-site
 
-# 2. 安装依赖
+# 2. 安装
 npm install
 
 # 3. 启动
 npm run dev
-
-# 4. 构建
-npm run build
 ```
 
-## 文档
+**要求：Node.js 22.12.0 或更高版本。**
 
-- [快速开始](./docs/getting-started.md)
-- [配置详解](./docs/configuration.md)
-- [页面 API](./docs/pages-api.md)
-- [部署指南](./docs/deployment.md)
+浏览器打开 `http://localhost:4321` 即可看到效果。
 
-## License
+## 许可证
 
 MIT

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@astgov/theme",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "2005-style university website theme for Astro — 看起来像 2005，写起来像 2026",
+  "peerDependencies": {
+    "astro": "^6.4.8"
+  },
   "exports": {
     ".": "./lib/index.ts",
     "./layouts/*": "./src/layouts/*.astro",
@@ -14,13 +17,22 @@
     "src",
     "README.md"
   ],
-  "peerDependencies": {
-    "astro": "^4.0.0"
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
   },
-  "keywords": ["astro", "theme", "university", "government", "retro", "china"],
+  "keywords": [
+    "astro",
+    "theme",
+    "university",
+    "government",
+    "retro",
+    "china"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-org/astgov-theme"
+    "url": "https://github.com/OrO-c/AstGov"
   }
 }

package/src/components/Banner.astro

@@ -1,6 +1,7 @@
 ---
-interface Props { images: { src: string; alt: string; link?: string }[] }
-const { images = [] } = Astro.props;
+import { Image } from 'astro:assets';
+interface Props { images: { src: string; alt: string; link?: string }[]; height?: number; autoplayInterval?: number; prevText?: string; nextText?: string }
+const { images = [], height = 360, autoplayInterval = 4000, prevText = '‹', nextText = '›' } = Astro.props;
 ---
 
 {images.length > 0 && (
@@ -8,20 +9,20 @@ const { images = [] } = Astro.props;
     <div class="banner-slides" id="bannerSlides">
       {images.map((img, i) => (
         <div class="banner-slide" data-index={i}>
-          {img.link ? <a href={img.link}><img src={img.src} alt={img.alt} /></a> : <img src={img.src} alt={img.alt} />}
+          {img.link ? <a href={img.link}><Image src={img.src} alt={img.alt} /></a> : <Image src={img.src} alt={img.alt} />}
         </div>
       ))}
     </div>
     {images.length > 1 && (<>
-      <button class="banner-btn banner-prev" id="bannerPrev" aria-label="上一张">‹</button>
-      <button class="banner-btn banner-next" id="bannerNext" aria-label="下一张">›</button>
+      <button class="banner-btn banner-prev" id="bannerPrev" aria-label="上一张">{prevText}</button>
+      <button class="banner-btn banner-next" id="bannerNext" aria-label="下一张">{nextText}</button>
       <div class="banner-dots" id="bannerDots">{images.map((_, i) => (<span class="banner-dot" data-index={i}></span>))}</div>
     </>)}
   </div>
 )}
 
 <script>
-(function(){var b=document.getElementById('banner');if(!b)return;var s=document.getElementById('bannerSlides'),sl=s?.querySelectorAll('.banner-slide'),dt=document.querySelectorAll('.banner-dot'),p=document.getElementById('bannerPrev'),n=document.getElementById('bannerNext');if(!sl||sl.length<2)return;var c=0,iv;function go(i){sl.forEach(function(e,j){e.style.display=j===i?'block':'none'});dt.forEach(function(e,j){e.className=j===i?'banner-dot active':'banner-dot'});c=i}function nx(){go((c+1)%sl.length)}function pr(){go((c-1+sl.length)%sl.length)}function st(){cl();iv=window.setInterval(nx,4000)}function cl(){if(iv){clearInterval(iv);iv=0}}go(0);st();p?.addEventListener('click',function(e){e.preventDefault();pr();st()});n?.addEventListener('click',function(e){e.preventDefault();nx();st()});dt.forEach(function(e){e.addEventListener('click',function(){go(parseInt(this.getAttribute('data-index')||'0',10));st()})});b.addEventListener('mouseenter',cl);b.addEventListener('mouseleave',st)})();
+(function(){var b=document.getElementById('banner');if(!b)return;var s=document.getElementById('bannerSlides'),sl=s?.querySelectorAll('.banner-slide'),dt=document.querySelectorAll('.banner-dot'),p=document.getElementById('bannerPrev'),n=document.getElementById('bannerNext');if(!sl||sl.length<2)return;var c=0,iv;function go(i){sl.forEach(function(e,j){e.style.display=j===i?'block':'none'});dt.forEach(function(e,j){e.className=j===i?'banner-dot active':'banner-dot'});c=i}function nx(){go((c+1)%sl.length)}function pr(){go((c-1+sl.length)%sl.length)}function st(){cl();iv=window.setInterval(nx,{autoplayInterval})}function cl(){if(iv){clearInterval(iv);iv=0}}go(0);st();p?.addEventListener('click',function(e){e.preventDefault();pr();st()});n?.addEventListener('click',function(e){e.preventDefault();nx();st()});dt.forEach(function(e){e.addEventListener('click',function(){go(parseInt(this.getAttribute('data-index')||'0',10));st()})});b.addEventListener('mouseenter',cl);b.addEventListener('mouseleave',st)})();
 </script>
 
 <style>
@@ -29,7 +30,7 @@ const { images = [] } = Astro.props;
   .banner-slides { position: relative; }
   .banner-slide { display: none; }
   .banner-slide:first-child { display: block; }
-  .banner-slide img { display: block; width: 100%; height: 360px; object-fit: cover; }
+  .banner-slide img { display: block; width: 100%; height: {height}px; object-fit: cover; }
   .banner-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0,0,0,.35); color: #FFF; border: none; font-size: 36px; line-height: 1; padding: 8px 14px; cursor: pointer; font-family: Arial,sans-serif; transition: background .2s; border-radius: 0; }
   .banner-btn:hover { background: rgba(0,0,0,.6); }
   .banner-prev { left: 10px; }

package/src/components/CategorySection.astro

@@ -1,6 +1,6 @@
 ---
 interface Post {
-  slug: string;
+  id: string;
   data: { title: string; date: string; tags?: string[] };
 }
 
@@ -8,25 +8,33 @@ interface Props {
   title?: string;
   posts?: Post[];
   viewAllLink?: string;
+  moreText?: string;
+  dateFormat?: string;
 }
 
-const { title, posts = [], viewAllLink } = Astro.props;
+const { title, posts = [], viewAllLink, moreText = '更多 →', dateFormat = '{month}月' } = Astro.props;
+// 从 id 中提取链接路径（去掉 "pages/" 前缀、保留其余路径段）
+function entryLink(id: string): string {
+  const parts = id.split('/');
+  // id 格式如 "pages/news/001"，去掉第一段得到 "news/001"
+  return parts.slice(1).join('/');
+}
 ---
 
 <div class="module">
   <div class="list-header">
     <h3 class="module-title">{title}</h3>
-    {viewAllLink && <a href={viewAllLink} class="more-link">更多 →</a>}
+    {viewAllLink && <a href={viewAllLink} class="more-link">{moreText}</a>}
   </div>
   <div class="list-body">
     {posts.map(post => {
       const d = post.data.date;
       return (
         <div class="list-item">
-          <a href={`/${post.slug}`} class="list-link">
+          <a href={`/${entryLink(post.id)}`} class="list-link">
             <span class="list-date-block">
               <span class="list-day">{d.slice(8, 10)}</span>
-              <span class="list-month">{d.slice(5, 7)}月</span>
+              <span class="list-month">{dateFormat.replace('{month}', d.slice(5, 7)).replace('{day}', d.slice(8, 10)).replace('{year}', d.slice(0, 4))}</span>
             </span>
             <span class="list-text">{post.data.title}</span>
           </a>

package/src/components/Countdown.astro

@@ -1,16 +1,17 @@
 ---
-interface Props { title?: string; targetDate?: string; buttonLink?: string; buttonText?: string; }
-const { title = '距报名截止还有', targetDate = '', buttonLink = '/signup', buttonText = '立即报名 →' } = Astro.props;
+interface Props { title?: string; targetDate?: string; buttonLink?: string; buttonText?: string; labels?: { days?: string; hours?: string; minutes?: string; seconds?: string } }
+const { title = '距报名截止还有', targetDate = '', buttonLink = '/signup', buttonText = '立即报名 →', labels } = Astro.props;
+const lb = labels || {};
 ---
 
 {targetDate && (
   <div class="countdown-module">
     <div class="countdown-title">{title}</div>
     <div class="countdown-display" id="countdownDisplay" data-target={targetDate}>
-      <span class="countdown-num" id="cdDays">00</span><span class="countdown-label">天</span>
-      <span class="countdown-num" id="cdHours">00</span><span class="countdown-label">时</span>
-      <span class="countdown-num" id="cdMinutes">00</span><span class="countdown-label">分</span>
-      <span class="countdown-num" id="cdSeconds">00</span><span class="countdown-label">秒</span>
+      <span class="countdown-num" id="cdDays">00</span><span class="countdown-label">{lb.days || '天'}</span>
+      <span class="countdown-num" id="cdHours">00</span><span class="countdown-label">{lb.hours || '时'}</span>
+      <span class="countdown-num" id="cdMinutes">00</span><span class="countdown-label">{lb.minutes || '分'}</span>
+      <span class="countdown-num" id="cdSeconds">00</span><span class="countdown-label">{lb.seconds || '秒'}</span>
     </div>
     <a href={buttonLink} class="countdown-btn">{buttonText}</a>
   </div>

package/src/components/Footer.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from 'astro:assets';
+
 interface Props {
   organization?: string;
   contacts?: { label: string; value: string }[];
@@ -8,9 +10,10 @@ interface Props {
   extraLinks?: { text: string; url: string }[];
   qrCodes?: { src: string; alt: string }[];
   footerLogo?: string;
+  copyright?: string;
 }
 
-const { organization = '', contacts = [], records = [], policeRecord, links = [], extraLinks = [], qrCodes = [] } = Astro.props;
+const { organization = '', contacts = [], records = [], policeRecord, links = [], extraLinks = [], qrCodes = [], copyright } = Astro.props;
 ---
 
 <footer class="footer">
@@ -24,9 +27,9 @@ const { organization = '', contacts = [], records = [], policeRecord, links = []
       <div class="footer-extra">{extraLinks.map((link, i) => (<span>{i > 0 && <span class="footer-sep">|</span>}<a href={link.url}>{link.text}</a></span>))}</div>
     )}
     {qrCodes.length > 0 && (
-      <div class="footer-qr">{qrCodes.map(qr => (<div class="qr-item"><img src={qr.src} alt={qr.alt} class="qr-img" /><span class="qr-alt">{qr.alt}</span></div>))}</div>
+      <div class="footer-qr">{qrCodes.map(qr => (<div class="qr-item"><Image src={qr.src} alt={qr.alt} class="qr-img" /><span class="qr-alt">{qr.alt}</span></div>))}</div>
     )}
-    <div class="footer-copyright">版权所有 &copy; {new Date().getFullYear()} {organization}</div>
+    <div class="footer-copyright">{(copyright || '版权所有 © {year} {org}').replace('{year}', String(new Date().getFullYear())).replace('{org}', organization)}</div>
   </div>
 </footer>
 

package/src/components/Header.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from 'astro:assets';
+
 interface Props {
   siteName?: string;
   siteSubtitle?: string;
@@ -10,9 +12,11 @@ interface Props {
     searchEnabled?: boolean;
     searchPlaceholder?: string;
   };
+  fontSizeLabels?: { small?: string; medium?: string; large?: string };
 }
 
-const { siteName, siteSubtitle, siteLogo, topBar = {} } = Astro.props;
+const { siteName, siteSubtitle, siteLogo, topBar = {}, fontSizeLabels } = Astro.props;
+const fl = fontSizeLabels || {};
 const { enabled = true, quickLinks = [], rightLinks = [], searchEnabled = false, searchPlaceholder = '请输入关键字' } = topBar;
 ---
 
@@ -27,11 +31,11 @@ const { enabled = true, quickLinks = [], rightLinks = [], searchEnabled = false,
         </div>
         <div class="toolbar-right">
           <span class="font-size-group">
-            <a href="#" class="font-btn font-small" data-size="small" title="小字号">小</a>
+            <a href="#" class="font-btn font-small" data-size="small" title="{fl.small || '小'}字号">{fl.small || '小'}</a>
             <span class="font-sep">|</span>
-            <a href="#" class="font-btn font-medium" data-size="medium" title="中字号">中</a>
+            <a href="#" class="font-btn font-medium" data-size="medium" title="{fl.medium || '中'}字号">{fl.medium || '中'}</a>
             <span class="font-sep">|</span>
-            <a href="#" class="font-btn font-large" data-size="large" title="大字号">大</a>
+            <a href="#" class="font-btn font-large" data-size="large" title="{fl.large || '大'}字号">{fl.large || '大'}</a>
           </span>
           {searchEnabled && (
             <form class="search-form" action="/search" method="get">
@@ -48,7 +52,7 @@ const { enabled = true, quickLinks = [], rightLinks = [], searchEnabled = false,
   )}
   <div class="header-main">
     <div class="container header-main-inner">
-      {siteLogo && <a href="/" class="logo-link"><img src={siteLogo} alt={siteName} class="logo-img" /></a>}
+      {siteLogo && <a href="/" class="logo-link"><Image src={siteLogo} alt={siteName || ''} class="logo-img" /></a>}
       <div class="site-title-group">
         <h1 class="site-name"><a href="/">{siteName}</a></h1>
         {siteSubtitle && <p class="site-subtitle">{siteSubtitle}</p>}

package/src/components/Headline.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from 'astro:assets';
+
 interface Props {
   cards?: { src: string; alt: string; title: string; date: string; link?: string }[];
 }
@@ -11,7 +13,7 @@ const { cards = [] } = Astro.props;
       {cards.map(card => (
         <article class="headline-card">
           <a href={card.link || '#'}>
-            <div class="card-img"><img src={card.src} alt={card.alt} loading="lazy" /></div>
+            <div class="card-img"><Image src={card.src} alt={card.alt} /></div>
             <div class="card-body"><h3 class="card-title">{card.title}</h3><time class="card-date">{card.date}</time></div>
           </a>
         </article>

package/src/components/Nav.astro

@@ -7,8 +7,8 @@ interface NavItem {
   dropdown?: { text: string; url: string; target?: string }[];
 }
 
-interface Props { items?: NavItem[] }
-const { items = [] } = Astro.props;
+interface Props { items?: NavItem[]; dropdownArrow?: string }
+const { items = [], dropdownArrow = '▼' } = Astro.props;
 ---
 
 <nav class="nav">
@@ -20,7 +20,7 @@ const { items = [] } = Astro.props;
           class:list={{ 'nav-link': true, highlight: item.highlight }}
         >
           {item.text}
-          {item.dropdown && item.dropdown.length > 0 && <span class="nav-arrow">▼</span>}
+          {item.dropdown && item.dropdown.length > 0 && <span class="nav-arrow">{dropdownArrow}</span>}
         </a>
         {item.dropdown && item.dropdown.length > 0 && (
           <div class="dropdown-menu">

package/src/components/QuickLinks.astro

@@ -1,14 +1,17 @@
 ---
 interface Props {
   links?: { text: string; url: string; target?: string }[];
+  title?: string;
+  expandText?: string;
+  collapseText?: string;
 }
-const { links = [] } = Astro.props;
+const { links = [], title = '快速通道', expandText = '展开更多', collapseText = '收起' } = Astro.props;
 ---
 
 {links.length > 0 && (
   <section class="ql-section"><div class="container">
     <div class="ql-bar">
-      <div class="ql-label">快速通道</div>
+      <div class="ql-label">{title}</div>
       <div class="ql-list" id="qlList">
         {links.map(link => (
           <a href={link.url} target={link.target || '_self'} class="ql-item">
@@ -16,13 +19,13 @@ const { links = [] } = Astro.props;
           </a>
         ))}
       </div>
-      {links.length > 4 && <button class="ql-toggle" id="qlToggle">展开更多</button>}
+      {links.length > 4 && <button class="ql-toggle" id="qlToggle" data-expand={expandText} data-collapse={collapseText}>{expandText}</button>}
     </div>
   </div></section>
 )}
 
 <script>
-(function(){var t=document.getElementById('qlToggle'),l=document.getElementById('qlList');if(!t||!l)return;t.addEventListener('click',function(){l.classList.toggle('expanded');t.textContent=l.classList.contains('expanded')?'收起':'展开更多'})})();
+(function(){var t=document.getElementById('qlToggle'),l=document.getElementById('qlList');if(!t||!l)return;t.addEventListener('click',function(){l.classList.toggle('expanded');t.textContent=l.classList.contains('expanded')?co:ex})})();
 </script>
 
 <style>

package/src/layouts/BaseLayout.astro

@@ -60,6 +60,17 @@ interface Props {
     fontFamily?: string;
   };
   defaultFontSize?: string;
+  /** UI 文本配置 */
+  ui?: {
+    moreText?: string;
+    dropdownArrow?: string;
+    copyright?: string;
+    quickLinks?: { title?: string; expandText?: string; collapseText?: string };
+    friendLinks?: { title?: string };
+    fontSizeLabels?: { small?: string; medium?: string; large?: string };
+    countdown?: { labels?: { days?: string; hours?: string; minutes?: string; seconds?: string } };
+    dateFormat?: string;
+  };
 }
 
 const {
@@ -75,6 +86,7 @@ const {
   footer = { organization: '' },
   colors = {},
   defaultFontSize = 'medium',
+  ui = {},
 } = Astro.props;
 
 const fontSizeAttr = defaultFontSize;
@@ -106,7 +118,7 @@ const cssVars = `
   <meta name="keywords" content={keywords} />
   <link rel="icon" href={siteIcon} type="image/svg+xml" />
   <link rel="stylesheet" href="/styles/global.css" />
-  <style is:global set:html={cssVars}></style>
+  <Fragment set:html={`<style>${cssVars}</style>`} />
 </head>
 <body>
   <Header
@@ -114,8 +126,9 @@ const cssVars = `
     siteSubtitle={siteSubtitle}
     siteLogo={siteLogo}
     topBar={topBar}
+    fontSizeLabels={ui.fontSizeLabels}
   />
-  <Nav items={navItems} />
+  <Nav items={navItems} dropdownArrow={ui.dropdownArrow} />
   <main>
     <slot />
   </main>
@@ -128,6 +141,7 @@ const cssVars = `
     extraLinks={footer.extraLinks}
     qrCodes={footer.qrCodes}
     footerLogo={footer.footerLogo}
+    copyright={ui.copyright}
   />
 </body>
 </html>