From d9f9595e72c5f0dd7fb935236b0152d612d65040 Mon Sep 17 00:00:00 2001
From: "Yangkai.Shen" <237497819@qq.com>
Date: Tue, 20 Jan 2026 15:42:35 +0800
Subject: [PATCH 1/6] fix: address Copilot review suggestions for PR #28

- Add avif MIME type support in RSS feed
- Add comment explaining enclosure length: 0 rationale
- Add width/height attributes to Card thumbnail to prevent CLS

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Card.astro | 2 ++
 src/pages/rss.xml.ts      | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.astro b/src/components/Card.astro
index 35f0af99..a08b1a81 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -97,6 +97,8 @@ const excerpt = description || (body ? getExcerpt(body) : "");
             <img
               src={ogImageUrl}
               alt={title}
+              width="160"
+              height="96"
               class="h-24 w-full object-cover transition-transform duration-300 group-hover/thumb:scale-105 sm:h-24 sm:w-40"
               loading="lazy"
               decoding="async"
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
index 941a7af4..5430e809 100644
--- a/src/pages/rss.xml.ts
+++ b/src/pages/rss.xml.ts
@@ -32,6 +32,7 @@ function getImageMimeType(url: string): string {
     gif: "image/gif",
     webp: "image/webp",
     svg: "image/svg+xml",
+    avif: "image/avif",
   };
   return mimeTypes[ext || ""] || "image/jpeg";
 }
@@ -82,7 +83,7 @@ export async function GET() {
           enclosure: {
             url: ogImageUrl,
             type: getImageMimeType(ogImageUrl),
-            length: 0,
+            length: 0, // 构建时无法获取实际文件大小，设为 0 符合 RSS 规范
           },
         }),
       };

From 6886398c90878e38dabb1557157297d58b95eb34 Mon Sep 17 00:00:00 2001
From: "Yangkai.Shen" <237497819@qq.com>
Date: Tue, 20 Jan 2026 16:15:39 +0800
Subject: [PATCH 2/6] feat: add view source link and CC license declaration

- Add viewSource config for raw markdown link (GitHub raw URL)
- Add license config for CC BY-NC-SA 4.0 declaration
- Create ViewSource.astro component with GitHub icon
- Create License.astro component with official CC badge and post URL
- Integrate components into PostDetails layout
- Simplify BackToTopButton and move to TOC sidebar
- Add tech stack info to Footer (Astro & AstroPaper)
- Remove ShareLinks from post details
- Update TableOfContents to support slot for BackToTopButton

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../add-source-link-and-license/proposal.md   | 23 +++++++
 .../specs/post-details/spec.md                | 63 +++++++++++++++++++
 .../add-source-link-and-license/tasks.md      | 28 +++++++++
 src/components/BackToTopButton.astro          | 46 +++-----------
 src/components/Footer.astro                   | 27 +++++++-
 src/components/License.astro                  | 62 ++++++++++++++++++
 src/components/TableOfContents.astro          |  1 +
 src/components/ViewSource.astro               | 32 ++++++++++
 src/config.ts                                 | 10 +++
 src/layouts/PostDetails.astro                 | 36 ++++++++---
 10 files changed, 280 insertions(+), 48 deletions(-)
 create mode 100644 openspec/changes/add-source-link-and-license/proposal.md
 create mode 100644 openspec/changes/add-source-link-and-license/specs/post-details/spec.md
 create mode 100644 openspec/changes/add-source-link-and-license/tasks.md
 create mode 100644 src/components/License.astro
 create mode 100644 src/components/ViewSource.astro

diff --git a/openspec/changes/add-source-link-and-license/proposal.md b/openspec/changes/add-source-link-and-license/proposal.md
new file mode 100644
index 00000000..6fd4ca9f
--- /dev/null
+++ b/openspec/changes/add-source-link-and-license/proposal.md
@@ -0,0 +1,23 @@
+# Change: 新增查看原文链接和 CC 协议声明
+
+## Why
+
+当前博客文章页面只有"编辑"链接（指向 GitHub edit 页面），缺少以下功能：
+1. 读者无法快速查看文章的 Markdown 原始内容（source 模式）
+2. 没有明确的版权协议声明，不利于内容保护和合规转载
+
+## What Changes
+
+- 新增"查看原文"链接组件，跳转到 GitHub 仓库文件的 blob 页面（只读模式）
+- 新增 CC BY-NC-SA 4.0 协议声明组件，显示在文章正文下方
+- 在 `config.ts` 中添加相关配置项（协议类型、仓库 URL 等）
+- 修改 `PostDetails.astro` 布局，集成新组件
+
+## Impact
+
+- Affected code:
+  - `src/config.ts` - 新增配置项
+  - `src/components/ViewSource.astro` - 新建组件
+  - `src/components/License.astro` - 新建组件
+  - `src/layouts/PostDetails.astro` - 集成新组件
+  - `src/assets/icons/` - 可能需要新增图标
diff --git a/openspec/changes/add-source-link-and-license/specs/post-details/spec.md b/openspec/changes/add-source-link-and-license/specs/post-details/spec.md
new file mode 100644
index 00000000..8a04d8c9
--- /dev/null
+++ b/openspec/changes/add-source-link-and-license/specs/post-details/spec.md
@@ -0,0 +1,63 @@
+## ADDED Requirements
+
+### Requirement: View Source Link
+
+The system SHALL provide a "View Source" link on article detail pages that opens the raw Markdown file in the GitHub repository (blob view, not edit mode).
+
+#### Scenario: User clicks View Source link
+
+- **WHEN** user clicks the "View Source" link on an article page
+- **THEN** a new tab opens with the GitHub blob URL for the article's Markdown file
+- **AND** the URL format is `https://github.com/{owner}/{repo}/blob/{branch}/{filePath}`
+
+#### Scenario: View Source link visibility
+
+- **WHEN** `SITE.viewSource.enabled` is `true`
+- **THEN** the View Source link is displayed on the article page
+- **WHEN** `SITE.viewSource.enabled` is `false`
+- **THEN** the View Source link is hidden
+
+### Requirement: CC License Declaration
+
+The system SHALL display a Creative Commons license declaration (CC BY-NC-SA 4.0) at the bottom of each article's content area.
+
+#### Scenario: License display position
+
+- **WHEN** an article page is rendered
+- **THEN** the CC license declaration appears after the article content
+- **AND** before the share links section
+
+#### Scenario: License content elements
+
+- **WHEN** the license component is rendered
+- **THEN** it displays:
+  - The CC BY-NC-SA 4.0 license icon/badge
+  - A brief license description in Chinese
+  - A link to the full license text on Creative Commons website
+
+#### Scenario: License visibility control
+
+- **WHEN** `SITE.license.enabled` is `true`
+- **THEN** the license declaration is displayed
+- **WHEN** `SITE.license.enabled` is `false`
+- **THEN** the license declaration is hidden
+
+### Requirement: Configuration Options
+
+The system SHALL provide configuration options in `src/config.ts` for View Source and License features.
+
+#### Scenario: viewSource configuration
+
+- **WHEN** configuring the View Source feature
+- **THEN** the following options are available:
+  - `enabled`: boolean to show/hide the link
+  - `text`: display text for the link (default: "查看原文")
+  - `url`: base URL for the repository blob path
+
+#### Scenario: license configuration
+
+- **WHEN** configuring the License feature
+- **THEN** the following options are available:
+  - `enabled`: boolean to show/hide the license
+  - `type`: license type identifier (e.g., "CC BY-NC-SA 4.0")
+  - `url`: URL to the full license text
diff --git a/openspec/changes/add-source-link-and-license/tasks.md b/openspec/changes/add-source-link-and-license/tasks.md
new file mode 100644
index 00000000..e135bedb
--- /dev/null
+++ b/openspec/changes/add-source-link-and-license/tasks.md
@@ -0,0 +1,28 @@
+## 1. 配置扩展
+
+- [x] 1.1 在 `src/config.ts` 中添加 `viewSource` 配置项（enabled、text、url）
+- [x] 1.2 在 `src/config.ts` 中添加 `license` 配置项（enabled、type、url）
+
+## 2. 组件开发
+
+- [x] 2.1 创建 `src/components/ViewSource.astro` 组件
+  - 接收 `post` 参数，生成 raw URL
+  - 使用 GitHub 图标
+  - 样式与 EditPost 保持一致
+- [x] 2.2 创建 `src/components/License.astro` 组件
+  - 显示 CC BY-NC-SA 4.0 协议信息
+  - 包含协议图标和链接
+  - 简洁的版权声明文案
+
+## 3. 布局集成
+
+- [x] 3.1 修改 `src/layouts/PostDetails.astro`
+  - 在文章正文后、分享链接前添加 License 组件
+  - 在元信息区添加 ViewSource 链接
+- [x] 3.2 确保移动端和桌面端响应式显示正常
+
+## 4. 验证
+
+- [x] 4.1 本地构建测试，确保无类型错误
+- [x] 4.2 验证链接跳转正确（raw 页面）
+- [x] 4.3 检查暗色/亮色模式下样式正常
diff --git a/src/components/BackToTopButton.astro b/src/components/BackToTopButton.astro
index 0b1e654a..cc2a466f 100644
--- a/src/components/BackToTopButton.astro
+++ b/src/components/BackToTopButton.astro
@@ -1,74 +1,44 @@
 ---
-import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
 import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
 ---
 
 <div
   id="btt-btn-container"
-  class:list={[
-    "fixed end-4 bottom-8 z-50",
-    "md:sticky md:end-auto md:float-end md:me-1",
-    "translate-y-14 opacity-0 transition duration-500",
-  ]}
+  class="mt-4 translate-y-4 opacity-0 transition duration-500"
 >
   <button
     data-button="back-to-top"
-    class:list={[
-      "group relative bg-background px-2 py-1",
-      "size-14 rounded-full shadow-xl",
-      "md:h-8 md:w-fit md:rounded-md md:shadow-none md:focus-visible:rounded-none",
-      "md:bg-background/35 md:bg-clip-padding md:backdrop-blur-lg",
-    ]}
+    class="flex items-center gap-1 rounded-md border border-foreground/10 bg-background/50 px-3 py-1.5 text-sm text-foreground/70 backdrop-blur-sm transition-colors hover:border-accent hover:text-accent"
   >
-    <span
-      id="progress-indicator"
-      class="absolute inset-0 -z-10 block size-14 scale-110 rounded-full bg-transparent md:hidden md:h-8 md:rounded-md"
-    ></span>
-    <IconChevronLeft class="inline-block rotate-90 md:hidden" />
-    <span class="sr-only text-sm group-hover:text-accent md:not-sr-only">
-      <IconArrowNarrowUp class="inline-block size-4" />
-      返回顶部
-    </span>
+    <IconArrowNarrowUp class="inline-block size-4" />
+    返回顶部
   </button>
 </div>
 
 <script is:inline data-astro-rerun>
-  /** Scrolls the document to the top when
-   * the "Back to Top" button is clicked. */
   function backToTop() {
     const rootElement = document.documentElement;
     const btnContainer = document.querySelector("#btt-btn-container");
     const backToTopBtn = document.querySelector("[data-button='back-to-top']");
-    const progressIndicator = document.querySelector("#progress-indicator");
 
-    if (!rootElement || !btnContainer || !backToTopBtn || !progressIndicator)
-      return;
+    if (!rootElement || !btnContainer || !backToTopBtn) return;
 
-    // Attach click event handler for back-to-top button
     backToTopBtn.addEventListener("click", () => {
-      document.body.scrollTop = 0; // For Safari
-      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
     });
 
-    // Handle button visibility according to scroll position
     let lastVisible = null;
     function handleScroll() {
       const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
       const scrollTop = rootElement.scrollTop;
-      const scrollPercent = Math.floor((scrollTop / scrollTotal) * 100);
-
-      progressIndicator.style.setProperty(
-        "background-image",
-        `conic-gradient(var(--accent), var(--accent) ${scrollPercent}%, transparent ${scrollPercent}%)`
-      );
-
       const isVisible = scrollTop / scrollTotal > 0.3;
 
       if (isVisible !== lastVisible) {
         btnContainer.classList.toggle("opacity-100", isVisible);
         btnContainer.classList.toggle("translate-y-0", isVisible);
         btnContainer.classList.toggle("opacity-0", !isVisible);
-        btnContainer.classList.toggle("translate-y-14", !isVisible);
+        btnContainer.classList.toggle("translate-y-4", !isVisible);
         lastVisible = isVisible;
       }
     }
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 41c8ef00..1efa957f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -17,10 +17,33 @@ const { noMarginTop = false, class: className, ...attrs } = Astro.props;
   <div
     class="flex flex-col items-center justify-between gap-2 border-t border-border py-4 sm:flex-row"
   >
-    <div class="flex items-center gap-1 text-sm text-foreground/70">
-      <span>&#169; {currentYear} xkcoding</span>
+    <div
+      class="flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5 text-sm text-foreground/70 sm:justify-start"
+    >
+      <span>&#169; 2016-{currentYear} xkcoding</span>
       <span class="text-foreground/40">·</span>
       <span>保留所有权利</span>
+      <span class="text-foreground/40">·</span>
+      <span>
+        Powered by
+        <a
+          href="https://astro.build/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-accent hover:underline"
+        >
+          Astro
+        </a>
+        &
+        <a
+          href="https://github.com/satnaing/astro-paper"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-accent hover:underline"
+        >
+          AstroPaper
+        </a>
+      </span>
     </div>
     <div class="flex items-center gap-2 text-xs text-foreground/50">
       <a
diff --git a/src/components/License.astro b/src/components/License.astro
new file mode 100644
index 00000000..8b1395be
--- /dev/null
+++ b/src/components/License.astro
@@ -0,0 +1,62 @@
+---
+import { SITE } from "@/config";
+
+type Props = {
+  class?: string;
+  postUrl: string;
+};
+
+const { class: className = "", postUrl } = Astro.props;
+
+const showLicense = SITE.license.enabled;
+const licenseType = SITE.license.type;
+const licenseUrl = SITE.license.url;
+const fullUrl = `${SITE.website.replace(/\/$/, "")}${postUrl}`;
+---
+
+{
+  showLicense && (
+    <div
+      class:list={[
+        "flex flex-wrap items-center gap-4 rounded-lg border border-foreground/10 bg-foreground/5 px-5 py-4",
+        className,
+      ]}
+    >
+      {/* CC BY-NC-SA Official Badge */}
+      <a
+        href={licenseUrl}
+        target="_blank"
+        rel="noopener noreferrer license"
+        class="shrink-0"
+      >
+        <img
+          src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
+          alt={licenseType}
+          class="h-8"
+          loading="lazy"
+        />
+      </a>
+      {/* License Text */}
+      <div class="flex flex-col gap-1 text-sm">
+        <p class="text-foreground/70">
+          本文采用
+          <a
+            href={licenseUrl}
+            target="_blank"
+            rel="noopener noreferrer license"
+            class="font-medium text-accent hover:underline"
+          >
+            {licenseType}
+          </a>
+          协议，转载请注明出处。
+        </p>
+        <p class="text-foreground/50">
+          原文链接：
+          <a href={fullUrl} class="break-all text-accent/80 hover:underline">
+            {fullUrl}
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index a8b12f27..2b9f201a 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -30,6 +30,7 @@ const filteredHeadings = headings.filter(h => h.depth >= 2 && h.depth <= 4);
       ))
     }
   </ul>
+  <slot />
 </nav>
 
 <script is:inline data-astro-rerun>
diff --git a/src/components/ViewSource.astro b/src/components/ViewSource.astro
new file mode 100644
index 00000000..3ef84223
--- /dev/null
+++ b/src/components/ViewSource.astro
@@ -0,0 +1,32 @@
+---
+import type { CollectionEntry } from "astro:content";
+import IconGitHub from "@/assets/icons/IconGitHub.svg";
+import { SITE } from "@/config";
+
+type Props = {
+  class?: string;
+  post: CollectionEntry<"blog">;
+};
+
+const { post, class: className = "" } = Astro.props;
+
+const href = `${SITE.viewSource.url}${post.filePath}`;
+const showViewSource = SITE.viewSource.enabled && href.trim() !== "";
+---
+
+{
+  showViewSource && (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      class:list={[
+        "flex items-center gap-1.5 opacity-80 hover:text-accent",
+        className,
+      ]}
+    >
+      <IconGitHub class="inline-block" />
+      <span>{SITE.viewSource.text}</span>
+    </a>
+  )
+}
diff --git a/src/config.ts b/src/config.ts
index d87791f3..ebb95642 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -17,6 +17,16 @@ export const SITE = {
     text: "内容有误？点此修正",
     url: "https://github.com/xkcoding/MyBlog/edit/master/",
   },
+  viewSource: {
+    enabled: true,
+    text: "查看原文",
+    url: "https://github.com/xkcoding/MyBlog/raw/master/",
+  },
+  license: {
+    enabled: true,
+    type: "CC BY-NC-SA 4.0",
+    url: "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans",
+  },
   dynamicOgImage: true,
   dir: "ltr",
   lang: "zh-CN",
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index 3e938d19..dfddc61b 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -6,7 +6,8 @@ import Footer from "@/components/Footer.astro";
 import Tag from "@/components/Tag.astro";
 import Datetime from "@/components/Datetime.astro";
 import EditPost from "@/components/EditPost.astro";
-import ShareLinks from "@/components/ShareLinks.astro";
+import ViewSource from "@/components/ViewSource.astro";
+import License from "@/components/License.astro";
 import BackButton from "@/components/BackButton.astro";
 import BackToTopButton from "@/components/BackToTopButton.astro";
 import TableOfContents from "@/components/TableOfContents.astro";
@@ -128,6 +129,12 @@ const nextPost =
           ]}>|</span
         >
         <EditPost {hideEditPost} {post} class="max-sm:hidden" />
+        <span
+          aria-hidden="true"
+          class:list={["max-sm:hidden", { hidden: !SITE.viewSource.enabled }]}
+          >|</span
+        >
+        <ViewSource {post} class="max-sm:hidden" />
       </div>
       {
         description && (
@@ -150,15 +157,21 @@ const nextPost =
 
       <hr class="my-8 border-dashed" />
 
-      <EditPost class="sm:hidden" {hideEditPost} {post} />
+      <div class="flex flex-wrap gap-4 sm:hidden">
+        <EditPost {hideEditPost} {post} />
+        <ViewSource {post} />
+      </div>
 
-      <ul class="mt-4 mb-8 flex flex-wrap gap-4 sm:my-8">
-        {tags.map(tag => <Tag tag={slugifyStr(tag)} tagName={tag} size="sm" />)}
-      </ul>
+      <License
+        class="my-6"
+        postUrl={getPath(post.id, post.filePath) || `/${post.id}`}
+      />
 
-      <BackToTopButton />
+      <hr class="my-6 border-dashed" />
 
-      <ShareLinks />
+      <ul class="my-6 flex flex-wrap gap-4">
+        {tags.map(tag => <Tag tag={slugifyStr(tag)} tagName={tag} size="sm" />)}
+      </ul>
 
       <hr class="my-6 border-dashed" />
 
@@ -194,7 +207,14 @@ const nextPost =
         }
       </div>
     </main>
-    {showToc && <TableOfContents headings={headings} />}
+    {
+      showToc && (
+        <TableOfContents headings={headings}>
+          <BackToTopButton />
+        </TableOfContents>
+      )
+    }
+    {!showToc && <BackToTopButton />}
   </div>
   <Footer />
 </Layout>

From af5cd525d51db5a1eeaacc1b8fabd2bee2023085 Mon Sep 17 00:00:00 2001
From: "Yangkai.Shen" <237497819@qq.com>
Date: Tue, 20 Jan 2026 16:18:39 +0800
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A0=E5=A4=B4?=
 =?UTF-8?q?=E5=9B=BE=E6=96=87=E7=AB=A0=E9=94=99=E8=AF=AF=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=20OG=20=E5=9B=BE=E7=89=87=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 分离 coverImageUrl（页面显示）和 ogImageUrl（meta 标签）
- 页面封面图只在用户明确设置 ogImage 时才显示
- 动态 OG 图片仅用于 meta 标签，不影响页面显示

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/layouts/PostDetails.astro | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index dfddc61b..df6fdb85 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -46,21 +46,25 @@ const showToc =
   !hideToc &&
   headings.filter(h => h.depth >= 2 && h.depth <= 4).length >= 2;
 
-let ogImageUrl: string | undefined;
+// 用于页面显示的封面图（只有用户明确设置了 ogImage 时才显示）
+let coverImageUrl: string | undefined;
 
-// Determine OG image source
+// Determine cover image source from user-defined ogImage
 if (typeof initOgImage === "string") {
-  ogImageUrl = initOgImage; // Remote OG image (absolute URL)
+  coverImageUrl = initOgImage; // Remote image (absolute URL)
 } else if (initOgImage?.src) {
-  ogImageUrl = initOgImage.src; // Local asset
+  coverImageUrl = initOgImage.src; // Local asset
 }
 
-// Use dynamic OG image if enabled and no remote|local ogImage
+// 用于 meta 标签的 OG 图片（可以是用户设置的或动态生成的）
+let ogImageUrl = coverImageUrl;
+
+// Use dynamic OG image for meta tags if enabled and no user-defined ogImage
 if (!ogImageUrl && SITE.dynamicOgImage) {
   ogImageUrl = `${getPath(post.id, post.filePath)}/index.png`;
 }
 
-// Resolve OG image URL (or fallback to SITE.ogImage / default `og.png`)
+// Resolve OG image URL for meta tags
 const ogImage = ogImageUrl
   ? new URL(ogImageUrl, Astro.url.origin).href
   : undefined;
@@ -101,10 +105,10 @@ const nextPost =
       data-pagefind-body
     >
       {
-        ogImageUrl && (
+        coverImageUrl && (
           <div class="group/cover mb-6 overflow-hidden rounded-xl border border-foreground/10 shadow-lg shadow-foreground/5 transition-shadow duration-300 hover:shadow-xl hover:shadow-foreground/10">
             <img
-              src={ogImageUrl}
+              src={coverImageUrl}
               alt={title}
               class="h-auto max-h-[250px] w-full object-cover transition-transform duration-300 group-hover/cover:scale-[1.02] sm:max-h-[400px]"
               loading="lazy"

From 2491954c9e04c09e9804e46b20c76d5aad1eb3ed Mon Sep 17 00:00:00 2001
From: "Yangkai.Shen" <237497819@qq.com>
Date: Tue, 20 Jan 2026 16:23:36 +0800
Subject: [PATCH 4/6] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E6=96=87=E6=A1=A3=E5=B9=B6=E5=BD=92=E6=A1=A3=20OpenSp?=
 =?UTF-8?q?ec=20proposal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新 README.md，添加特性列表和配置说明
- 完善 openspec/project.md 项目上下文
- 归档 add-source-link-and-license proposal
- 创建 post-details spec

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 README.md                                     | 30 ++++++++-
 .../proposal.md                               |  0
 .../specs/post-details/spec.md                |  0
 .../tasks.md                                  |  0
 openspec/project.md                           | 49 +++++++++++---
 openspec/specs/post-details/spec.md           | 67 +++++++++++++++++++
 6 files changed, 135 insertions(+), 11 deletions(-)
 rename openspec/changes/{add-source-link-and-license => archive/2026-01-20-add-source-link-and-license}/proposal.md (100%)
 rename openspec/changes/{add-source-link-and-license => archive/2026-01-20-add-source-link-and-license}/specs/post-details/spec.md (100%)
 rename openspec/changes/{add-source-link-and-license => archive/2026-01-20-add-source-link-and-license}/tasks.md (100%)
 create mode 100644 openspec/specs/post-details/spec.md

diff --git a/README.md b/README.md
index 6e38e146..96991349 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,22 @@
 
 xkcoding 的代码成长日记 - 基于 [Astro](https://astro.build/) + [AstroPaper](https://github.com/satnaing/astro-paper) 主题构建。
 
+## 特性
+
+- 🚀 基于 Astro 5.x 构建，性能优异
+- 🎨 基于 AstroPaper 主题定制，简洁美观
+- 🔍 Pagefind 全文搜索
+- 📖 目录侧边栏（TOC）
+- 🖼️ 文章封面图 & 动态 OG 图片
+- 📝 查看原文（跳转 GitHub raw 文件）
+- ⚖️ CC BY-NC-SA 4.0 协议声明
+- 🌙 深色模式支持
+
 ## 技术栈
 
 - **框架**: Astro 5.x
 - **主题**: AstroPaper
+- **样式**: Tailwind CSS 4.x
 - **搜索**: Pagefind
 - **部署**: GitHub Pages + GitHub Actions
 
@@ -36,11 +48,27 @@ pnpm run preview
 │   ├── data/blog/       # 博客文章 (Markdown)
 │   ├── layouts/         # 布局组件
 │   ├── pages/           # 页面路由
+│   ├── utils/           # 工具函数
 │   └── config.ts        # 站点配置
+├── openspec/            # OpenSpec 规范文档
 ├── astro.config.ts      # Astro 配置
 └── package.json
 ```
 
+## 配置说明
+
+站点配置位于 `src/config.ts`，主要配置项：
+
+- `website`: 站点 URL
+- `author`: 作者信息
+- `showToc`: 是否显示目录
+- `dynamicOgImage`: 是否启用动态 OG 图片
+- `editPost`: 编辑文章链接配置
+- `viewSource`: 查看原文链接配置
+- `license`: 协议声明配置
+
 ## License
 
-MIT
+文章内容采用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans) 协议
+
+代码采用 MIT 协议
diff --git a/openspec/changes/add-source-link-and-license/proposal.md b/openspec/changes/archive/2026-01-20-add-source-link-and-license/proposal.md
similarity index 100%
rename from openspec/changes/add-source-link-and-license/proposal.md
rename to openspec/changes/archive/2026-01-20-add-source-link-and-license/proposal.md
diff --git a/openspec/changes/add-source-link-and-license/specs/post-details/spec.md b/openspec/changes/archive/2026-01-20-add-source-link-and-license/specs/post-details/spec.md
similarity index 100%
rename from openspec/changes/add-source-link-and-license/specs/post-details/spec.md
rename to openspec/changes/archive/2026-01-20-add-source-link-and-license/specs/post-details/spec.md
diff --git a/openspec/changes/add-source-link-and-license/tasks.md b/openspec/changes/archive/2026-01-20-add-source-link-and-license/tasks.md
similarity index 100%
rename from openspec/changes/add-source-link-and-license/tasks.md
rename to openspec/changes/archive/2026-01-20-add-source-link-and-license/tasks.md
diff --git a/openspec/project.md b/openspec/project.md
index 3da5119d..bd14ef8d 100644
--- a/openspec/project.md
+++ b/openspec/project.md
@@ -1,31 +1,60 @@
 # Project Context
 
 ## Purpose
-[Describe your project's purpose and goals]
+xkcoding 的个人技术博客，记录代码成长历程、技术分享和学习笔记。
 
 ## Tech Stack
-- [List your primary technologies]
-- [e.g., TypeScript, React, Node.js]
+- **框架**: Astro 5.x
+- **主题**: 基于 AstroPaper 定制
+- **样式**: Tailwind CSS 4.x
+- **搜索**: Pagefind (静态搜索)
+- **部署**: GitHub Pages + GitHub Actions
+- **包管理**: pnpm
 
 ## Project Conventions
 
 ### Code Style
-[Describe your code style preferences, formatting rules, and naming conventions]
+- 使用 Prettier 格式化代码
+- 组件文件使用 PascalCase 命名 (如 `ViewSource.astro`)
+- 工具函数使用 camelCase 命名 (如 `getPath.ts`)
+- 中文注释，英文变量名
 
 ### Architecture Patterns
-[Document your architectural decisions and patterns]
+- Astro 组件位于 `src/components/`
+- 布局组件位于 `src/layouts/`
+- 博客文章位于 `src/data/blog/`（Markdown 格式）
+- 全局配置位于 `src/config.ts`
+- 工具函数位于 `src/utils/`
 
 ### Testing Strategy
-[Explain your testing approach and requirements]
+- 依赖 TypeScript 类型检查
+- 使用 `pnpm run build` 验证构建
+- 通过 GitHub Actions CI 自动检查
 
 ### Git Workflow
-[Describe your branching strategy and commit conventions]
+- 主分支: `master`
+- 功能分支: `feature/xxx`
+- 提交信息使用中文，格式: `类型: 描述`
+  - feat: 新功能
+  - fix: 修复
+  - style: 样式调整
+  - docs: 文档更新
+  - chore: 其他
 
 ## Domain Context
-[Add domain-specific knowledge that AI assistants need to understand]
+- 博客文章使用 Markdown 编写，支持 frontmatter 配置
+- 支持动态 OG 图片生成
+- 支持文章封面图（用户设置 ogImage 时显示）
+- 支持目录（TOC）侧边栏
+- 支持 CC BY-NC-SA 4.0 协议声明
+- 支持查看原文（跳转 GitHub raw 文件）
 
 ## Important Constraints
-[List any technical, business, or regulatory constraints]
+- 保持与 AstroPaper 主题的兼容性
+- 图片资源优先使用 WebP 格式
+- 文章 URL 使用日期格式（如 /2024-01-01-title）
 
 ## External Dependencies
-[Document key external services, APIs, or systems]
+- GitHub API: 用于部署和 raw 文件访问
+- Creative Commons: CC 协议徽章图片
+- Google Fonts: 字体资源
diff --git a/openspec/specs/post-details/spec.md b/openspec/specs/post-details/spec.md
new file mode 100644
index 00000000..a52862ce
--- /dev/null
+++ b/openspec/specs/post-details/spec.md
@@ -0,0 +1,67 @@
+# post-details Specification
+
+## Purpose
+TBD - created by archiving change add-source-link-and-license. Update Purpose after archive.
+## Requirements
+### Requirement: View Source Link
+
+The system SHALL provide a "View Source" link on article detail pages that opens the raw Markdown file in the GitHub repository (blob view, not edit mode).
+
+#### Scenario: User clicks View Source link
+
+- **WHEN** user clicks the "View Source" link on an article page
+- **THEN** a new tab opens with the GitHub blob URL for the article's Markdown file
+- **AND** the URL format is `https://github.com/{owner}/{repo}/blob/{branch}/{filePath}`
+
+#### Scenario: View Source link visibility
+
+- **WHEN** `SITE.viewSource.enabled` is `true`
+- **THEN** the View Source link is displayed on the article page
+- **WHEN** `SITE.viewSource.enabled` is `false`
+- **THEN** the View Source link is hidden
+
+### Requirement: CC License Declaration
+
+The system SHALL display a Creative Commons license declaration (CC BY-NC-SA 4.0) at the bottom of each article's content area.
+
+#### Scenario: License display position
+
+- **WHEN** an article page is rendered
+- **THEN** the CC license declaration appears after the article content
+- **AND** before the share links section
+
+#### Scenario: License content elements
+
+- **WHEN** the license component is rendered
+- **THEN** it displays:
+  - The CC BY-NC-SA 4.0 license icon/badge
+  - A brief license description in Chinese
+  - A link to the full license text on Creative Commons website
+
+#### Scenario: License visibility control
+
+- **WHEN** `SITE.license.enabled` is `true`
+- **THEN** the license declaration is displayed
+- **WHEN** `SITE.license.enabled` is `false`
+- **THEN** the license declaration is hidden
+
+### Requirement: Configuration Options
+
+The system SHALL provide configuration options in `src/config.ts` for View Source and License features.
+
+#### Scenario: viewSource configuration
+
+- **WHEN** configuring the View Source feature
+- **THEN** the following options are available:
+  - `enabled`: boolean to show/hide the link
+  - `text`: display text for the link (default: "查看原文")
+  - `url`: base URL for the repository blob path
+
+#### Scenario: license configuration
+
+- **WHEN** configuring the License feature
+- **THEN** the following options are available:
+  - `enabled`: boolean to show/hide the license
+  - `type`: license type identifier (e.g., "CC BY-NC-SA 4.0")
+  - `url`: URL to the full license text
+

From 95f8a9fd4d5b8d8e69e678928f3fa8bfc4a77da7 Mon Sep 17 00:00:00 2001
From: "Yangkai.Shen" <237497819@qq.com>
Date: Tue, 20 Jan 2026 16:24:45 +0800
Subject: [PATCH 5/6] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E5=B0=8F?=
 =?UTF-8?q?=E7=BA=A2=E4=B9=A6=E6=96=87=E6=A1=88=E7=94=9F=E6=88=90=E5=91=BD?=
 =?UTF-8?q?=E4=BB=A4=E5=92=8C=E5=BF=BD=E7=95=A5=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 .claude/commands/xhs-copy.md 小红书文案生成命令
- .gitignore 添加 xhs-images/ 目录

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .claude/commands/xhs-copy.md | 190 +++++++++++++++++++++++++++++++++++
 .gitignore                   |   2 +
 2 files changed, 192 insertions(+)
 create mode 100644 .claude/commands/xhs-copy.md

diff --git a/.claude/commands/xhs-copy.md b/.claude/commands/xhs-copy.md
new file mode 100644
index 00000000..fb10b2bc
--- /dev/null
+++ b/.claude/commands/xhs-copy.md
@@ -0,0 +1,190 @@
+---
+description: 根据文章生成小红书文案和标题
+allowed-tools: Read, Glob, Grep, Write
+argument-hint: <文章路径> [--images <配图目录>]
+---
+
+# 小红书文案生成器
+
+根据指定文章生成小红书风格的文案和标题，支持关联已生成的配图。
+
+## 参数说明
+
+| 参数 | 必填 | 说明 | 示例 |
+|------|------|------|------|
+| `<文章路径>` | 是 | 要生成文案的文章 | `posts/article.md` |
+| `--images <目录>` | 否 | 已生成的配图目录 | `--images xhs-images/topic/` |
+
+**示例**：
+```bash
+# 只生成文案
+/xhs-copy posts/article.md
+
+# 生成文案 + 关联配图
+/xhs-copy posts/article.md --images xhs-images/slash-command-firecrawl/
+```
+
+## 风格定义：实用派技术博主风格
+
+融合苏洋（Soulteary）的写作风格，适配小红书短文案场景。
+
+### 核心原则
+
+| 原则 | 说明 |
+|------|------|
+| **实用主义** | 解决问题为先，不堆砌概念 |
+| **对话感** | 像和朋友聊技术，不像写论文 |
+| **有立场** | 敢于推荐或否定，不骑墙 |
+| **适量 emoji** | 点缀而非堆砌，每个段落标题一个 |
+
+### 语言规范
+
+**推荐用法**：
+- 推荐方案："我选择"、"我的做法是"、"个人用够了"
+- 步骤引导："先...再..."、"确认 X 之后"
+- 踩坑分享："返回空？加个 timeout，有些网页加载慢"
+- 效果验证："如果看到 X 输出，说明配置成功"
+- 口语化："够用了"、"一下就完事"、"选哪个不用说了吧"
+
+**禁止用法**：
+- 空洞开场："在当今数字化时代"、"随着技术发展"
+- 过度修饰："非常"、"极其"、"令人惊叹"
+- 假装互动："让我们一起"、"接下来我们将"
+- 踩一捧一：不要贬低其他工具来抬高自己的方案
+- 过多 emoji：不要每句话都加 emoji
+
+### 结构模板
+
+```
+{开头：场景 + 动机，1-2句}
+
+📌 {核心概念解释}
+{简短说明，2-3句}
+
+🤔 {为什么选这个方案}
+{对比或原因，不踩一捧一}
+{一句话总结优势}
+
+📝 {怎么用}：
+① 步骤一
+② 步骤二
+③ ...
+
+⚠️ 踩过的坑：
+• {问题}？{解决方案}，{原因}
+• ...
+
+{一句话核心思路} ✨
+{收尾}
+
+💬 {互动引导}
+```
+
+### 标题模板
+
+提供 2 个标题选项：
+
+| 类型 | 格式 | 示例 |
+|------|------|------|
+| 方案型 | 用 X 实现 Y + emoji | 用 Slash Command 给 Claude Code 加个「抓网页」功能 🔧 |
+| 个人视角 | 我给 X 写了个 Y + emoji | 我给 Claude Code 写了个快捷指令，一条命令抓网页 ⚡ |
+
+**避免**：
+- "保姆级教程"、"最全指南"（营销味）
+- "深入理解"、"完全掌握"（太虚）
+- "震惊！"、"居然可以这样"（标题党）
+
+### 标签模板
+
+```
+#主题标签1 #主题标签2 #技术干货 #效率提升 #程序员日常
+```
+
+---
+
+## 执行步骤
+
+1. **读取文章**：读取用户指定的文章路径
+2. **扫描配图**（如指定 `--images`）：
+   - 列出目录下所有 `.png` / `.jpg` 图片
+   - 按文件名排序（01-, 02-, ...）
+   - 读取 `outline.md` 获取每张图的描述（如存在）
+3. **分析内容**：
+   - 提取核心主题和价值点
+   - 识别目标受众
+   - 找出可视化/对比点
+   - 提取踩坑经验
+4. **生成文案**：按照上述风格和结构生成小红书文案
+5. **生成标题**：提供 2 个标题选项
+6. **生成标签**：5-7 个相关标签
+7. **输出结果**：以 Markdown 格式输出完整文案 + 配图清单
+
+---
+
+## 输出格式
+
+```markdown
+## 小红书文案
+
+### 标题选项
+
+**方案 A**：
+> {方案型标题}
+
+**方案 B**：
+> {个人视角标题}
+
+---
+
+### 正文
+
+{完整文案}
+
+---
+
+### 标签
+
+{标签列表}
+
+---
+
+### 配图清单（如指定 --images）
+
+| # | 文件名 | 描述 | 建议 |
+|---|--------|------|------|
+| 1 | 01-cover-xxx.png | 封面 | 作为小红书封面 |
+| 2 | 02-content-xxx.png | 内容页 | 第2张图 |
+| ... | ... | ... | ... |
+
+**配图目录**：`{配图目录路径}`
+**图片数量**：{N} 张
+**发布顺序**：按文件名序号 01 → 0N
+
+### 发布建议
+
+| 项目 | 建议 |
+|------|------|
+| 封面 | 第1张图 |
+| 发布时间 | 工作日 12:00-13:00 或 21:00-23:00 |
+| 互动 | 评论区放完整代码/文章链接 |
+```
+
+---
+
+## 示例输入
+
+```bash
+# 只生成文案
+/xhs-copy posts/slash-command-firecrawl.md
+
+# 生成文案 + 关联配图
+/xhs-copy posts/article.md --images xhs-images/slash-command-firecrawl/
+```
+
+## 注意事项
+
+- 文案长度控制在 300-500 字
+- 步骤不超过 5 步
+- 踩坑点 2-4 个
+- 保持口语化，像和朋友聊天
+- 不要贬低其他方案，只说自己方案的优点
diff --git a/.gitignore b/.gitignore
index bbf2d227..f113710c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,5 @@ scripts/migrate-images/reports/
 
 # ossutil output
 ossutil_output/
+
+xhs-images/

From 2d0d187d1eabd0406e91727b8c3009638d6171eb Mon Sep 17 00:00:00 2001
From: "Yangkai.Shen" <237497819@qq.com>
Date: Tue, 20 Jan 2026 16:29:47 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E4=B8=BA=20CC=20=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=BE=BD=E7=AB=A0=E6=B7=BB=E5=8A=A0=20width/height=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

避免页面加载时的布局偏移 (CLS)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/License.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/License.astro b/src/components/License.astro
index 8b1395be..1652bd20 100644
--- a/src/components/License.astro
+++ b/src/components/License.astro
@@ -33,6 +33,8 @@ const fullUrl = `${SITE.website.replace(/\/$/, "")}${postUrl}`;
           src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
           alt={licenseType}
           class="h-8"
+          width="88"
+          height="31"
           loading="lazy"
         />
       </a>