feat: 新增查看原文链接和 CC 协议声明 by xkcoding · Pull Request #29 · xkcoding/MyBlog

xkcoding · 2026-01-20T08:24:18Z

Summary

新增「查看原文」链接，点击跳转到 GitHub 查看 markdown 原始文件
新增 CC BY-NC-SA 4.0 协议声明组件，显示在文章底部
优化 Footer 组件，添加年份范围和技术栈信息
将「返回顶部」按钮移至目录侧边栏下方
修复无头图文章错误显示动态 OG 图片的问题
更新项目文档 (README.md, openspec/project.md)

Changes

新增组件

ViewSource.astro: 查看原文链接组件
License.astro: CC 协议声明组件（含官方徽章）

配置更新

config.ts: 新增 viewSource 和 license 配置项

Bug 修复

分离 coverImageUrl (页面显示) 和 ogImageUrl (meta 标签)
页面封面图仅在用户明确设置 ogImage 时显示

Test plan

验证查看原文链接正确跳转到 GitHub raw 文件
验证 CC 协议徽章正确显示
验证原文链接显示正确的文章 URL
验证无头图文章不再显示错误的封面图
验证有头图文章正常显示封面图

🤖 Generated with Claude Code

- 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>

- 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>

- 分离 coverImageUrl（页面显示）和 ogImageUrl（meta 标签） - 页面封面图只在用户明确设置 ogImage 时才显示 - 动态 OG 图片仅用于 meta 标签，不影响页面显示 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- 更新 README.md，添加特性列表和配置说明 - 完善 openspec/project.md 项目上下文 - 归档 add-source-link-and-license proposal - 创建 post-details spec Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- 新增 .claude/commands/xhs-copy.md 小红书文案生成命令 - .gitignore 添加 xhs-images/ 目录 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR adds a "View Source" link and CC BY-NC-SA 4.0 license declaration to blog posts, along with UI improvements and bug fixes for cover image handling.

Changes:

Added ViewSource and License components with configuration options
Fixed cover image display logic to separate user-defined cover images from OG meta tags
Relocated BackToTopButton to the TableOfContents sidebar
Enhanced Footer with copyright year range and technology stack credits

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/config.ts	Added viewSource and license configuration options
src/components/ViewSource.astro	New component for GitHub source file link
src/components/License.astro	New component displaying CC license badge and declaration
src/layouts/PostDetails.astro	Integrated new components, fixed cover image logic, reorganized layout structure
src/components/TableOfContents.astro	Added slot for embedding BackToTopButton
src/components/BackToTopButton.astro	Simplified styling, removed progress indicator, now embedded in TOC
src/components/Card.astro	Added width/height attributes to thumbnail images for better performance
src/components/Footer.astro	Added copyright year range and "Powered by" section
src/pages/rss.xml.ts	Added AVIF MIME type support and clarified comment about enclosure length
README.md	Updated feature list and added configuration documentation
openspec/project.md	Updated project context with current tech stack and conventions
openspec/specs/post-details/spec.md	New specification for View Source and License features
openspec/changes/archive/*	Archived change proposal, tasks, and specifications

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-20T08:27:41Z

+- 支持文章封面图（用户设置 ogImage 时显示）
+- 支持目录（TOC）侧边栏
+- 支持 CC BY-NC-SA 4.0 协议声明
+- 支持查看原文（跳转 GitHub raw 文件）


The documentation mentions "跳转 GitHub raw 文件" (jump to GitHub raw file), but according to the specification, the feature should use "blob" view instead of "raw". Update the description to reflect the correct functionality, such as "跳转 GitHub 源文件" without specifically mentioning "raw".

Copilot · 2026-01-20T08:27:42Z


 ## External Dependencies
-[Document key external services, APIs, or systems]
+- GitHub API: 用于部署和 raw 文件访问


The External Dependencies section mentions "raw 文件访问" (raw file access), but the specification indicates the feature should use "blob" view. Update this to be more accurate, such as "GitHub 源文件访问" or remove the specific mention of "raw".

Copilot · 2026-01-20T08:27:42Z

+          src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
+          alt={licenseType}
+          class="h-8"
+          loading="lazy"


The Creative Commons license badge is loaded from an external URL (https://licensebuttons.net). Consider adding width and height attributes to the img tag to improve layout stability and prevent content layout shift during page load. The current image dimensions are 88x31 pixels based on the URL path.

Suggested change

loading="lazy"

loading="lazy"

width="88"

height="31"

Copilot · 2026-01-20T08:27:42Z

+  viewSource: {
+    enabled: true,
+    text: "查看原文",
+    url: "https://github.com/xkcoding/MyBlog/raw/master/",


The configuration URL uses "raw" but the specification requires "blob" view. The spec states the URL format should be https://github.com/{owner}/{repo}/blob/{branch}/{filePath} for blob view (formatted Markdown with GitHub UI), but the current implementation uses "raw" which serves the unformatted file content. Change the URL to use "blob" instead of "raw" to match the specification and provide a better user experience with GitHub's rendered Markdown view.

Suggested change

url: "https://github.com/xkcoding/MyBlog/raw/master/",

url: "https://github.com/xkcoding/MyBlog/blob/master/",

Copilot · 2026-01-20T08:27:42Z

        <EditPost {hideEditPost} {post} class="max-sm:hidden" />
+        <span
+          aria-hidden="true"
+          class:list={["max-sm:hidden", { hidden: !SITE.viewSource.enabled }]}


The separator before ViewSource should also check if hideEditPost is true. When EditPost is hidden, the separator should also be hidden to avoid displaying a separator with nothing before it. Consider adding hideEditPost to the hidden condition: { hidden: !SITE.viewSource.enabled || hideEditPost }.

Suggested change

class:list={["max-sm:hidden", { hidden: !SITE.viewSource.enabled }]}

class:list={[

"max-sm:hidden",

{ hidden: !SITE.viewSource.enabled || hideEditPost },

]}

Copilot · 2026-01-20T08:27:43Z

+- 🔍 Pagefind 全文搜索
+- 📖 目录侧边栏（TOC）
+- 🖼️ 文章封面图 & 动态 OG 图片
+- 📝 查看原文（跳转 GitHub raw 文件）


The feature name in README says "查看原文（跳转 GitHub raw 文件）" which mentions "raw 文件" (raw file), but according to the specification, it should use "blob" view instead of "raw". This documentation should be updated to reflect the correct functionality: "查看原文（跳转 GitHub 源文件）" or similar wording that doesn't specifically mention "raw".

Suggested change

- 📝 查看原文（跳转 GitHub raw 文件）

- 📝 查看原文（跳转 GitHub 源文件）

避免页面加载时的布局偏移 (CLS) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

xkcoding and others added 4 commits January 20, 2026 15:42

fix: address Copilot review suggestions for PR #28

d9f9595

- 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>

docs: 更新项目文档并归档 OpenSpec proposal

2491954

- 更新 README.md，添加特性列表和配置说明 - 完善 openspec/project.md 项目上下文 - 归档 add-source-link-and-license proposal - 创建 post-details spec Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings January 20, 2026 08:24

Copilot started reviewing on behalf of xkcoding January 20, 2026 08:24 View session

chore: 添加小红书文案生成命令和忽略配置

95f8a9f

- 新增 .claude/commands/xhs-copy.md 小红书文案生成命令 - .gitignore 添加 xhs-images/ 目录 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot AI reviewed Jan 20, 2026

View reviewed changes

fix: 为 CC 协议徽章添加 width/height 属性

2d0d187

避免页面加载时的布局偏移 (CLS) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

xkcoding merged commit b352fc1 into master Jan 20, 2026
1 check passed

xkcoding deleted the feature/add-source-link-and-license branch January 20, 2026 08:31

Navigation Menu

Repository navigation

feat: 新增查看原文链接和 CC 协议声明 - #29

feat: 新增查看原文链接和 CC 协议声明#29
xkcoding merged 6 commits into
masterfrom
feature/add-source-link-and-license

xkcoding commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	url: "https://github.com/xkcoding/MyBlog/raw/master/",
	url: "https://github.com/xkcoding/MyBlog/blob/master/",

	- 📝 查看原文（跳转 GitHub raw 文件）
	- 📝 查看原文（跳转 GitHub 源文件）

Conversation

xkcoding commented Jan 20, 2026

Summary

Changes

新增组件

配置更新

Bug 修复

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants