astro.config.mjs

@@ -1,5 +1,7 @@
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
+import { unified } from '@astrojs/markdown-remark';
+import remarkHexoLinkCards from './src/lib/remarkHexoLinkCards.mjs';
 
 export default defineConfig({
   site: 'https://blog.biss.click',
@@ -8,6 +10,9 @@ export default defineConfig({
   publicDir: './static',
   integrations: [sitemap()],
   markdown: {
+    processor: unified({
+      remarkPlugins: [remarkHexoLinkCards],
+    }),
     shikiConfig: {
       theme: 'github-dark',
       wrap: true,

src/components/Pagination.astro

@@ -0,0 +1,53 @@
+---
+type Props = {
+  currentPage: number;
+  totalPages: number;
+  basePath?: string;
+};
+
+const { currentPage, totalPages, basePath = '/' } = Astro.props;
+
+const normalizedBasePath = basePath.endsWith('/') ? basePath : `${basePath}/`;
+const getPageHref = (page: number) => (page <= 1 ? normalizedBasePath : `${normalizedBasePath}page/${page}/`);
+const pages = Array.from({ length: totalPages }, (_, index) => index + 1);
+---
+
+{
+  totalPages > 1 && (
+    <nav class="pagination" aria-label="分页导航">
+      {currentPage > 1 ? (
+        <a class="pagination-link pagination-prev" href={getPageHref(currentPage - 1)} aria-label="上一页">
+          上一页
+        </a>
+      ) : (
+        <span class="pagination-link pagination-prev is-disabled" aria-disabled="true">
+          上一页
+        </span>
+      )}
+
+      <div class="pagination-pages" aria-label={`第 ${currentPage} 页，共 ${totalPages} 页`}>
+        {pages.map((page) =>
+          page === currentPage ? (
+            <span class="pagination-number is-current" aria-current="page">
+              {page}
+            </span>
+          ) : (
+            <a class="pagination-number" href={getPageHref(page)}>
+              {page}
+            </a>
+          )
+        )}
+      </div>
+
+      {currentPage < totalPages ? (
+        <a class="pagination-link pagination-next" href={getPageHref(currentPage + 1)} aria-label="下一页">
+          下一页
+        </a>
+      ) : (
+        <span class="pagination-link pagination-next is-disabled" aria-disabled="true">
+          下一页
+        </span>
+      )}
+    </nav>
+  )
+}

src/components/PostCopyrightCard.astro

@@ -0,0 +1,118 @@
+---
+import type { BlogPost } from '@/lib/posts';
+
+interface Props {
+  post: BlogPost;
+}
+
+const { post } = Astro.props;
+const author = 'biss';
+const licenseName = 'CC BY-NC-SA 4.0';
+const licenseHref = 'https://creativecommons.org/licenses/by-nc-sa/4.0/';
+const postUrl = new URL(post.href, Astro.site ?? Astro.url.origin).toString();
+const displayPath = post.href;
+const tags = post.tags;
+---
+
+<section class="post-copyright-card" aria-label="文章版权信息">
+  <div class="post-copyright-mark" aria-hidden="true">
+    <span>CC</span>
+  </div>
+
+  <div class="post-copyright-main">
+    <h2>{post.title}</h2>
+    <a class="post-copyright-link" href={post.href}>{displayPath}</a>
+
+    <dl class="post-copyright-meta">
+      <div>
+        <dt>作者</dt>
+        <dd>{author}</dd>
+      </div>
+      <div>
+        <dt>发布于</dt>
+        <dd><time datetime={post.date.toISOString()}>{post.dateText}</time></dd>
+      </div>
+      <div>
+        <dt>许可协议</dt>
+        <dd><a href={licenseHref} target="_blank" rel="noreferrer">{licenseName}</a></dd>
+      </div>
+    </dl>
+  </div>
+
+  <div class="post-copyright-footer">
+    {tags.length > 0 && (
+      <div class="post-copyright-tags" aria-label="文章标签">
+        {tags.map((tag) => <a href={`/tags/${encodeURIComponent(tag)}/`}>{tag}</a>)}
+      </div>
+    )}
+
+    <div class="post-copyright-actions" aria-label="文章操作">
+      <button
+        class="post-copyright-action is-primary post-share-button"
+        type="button"
+        data-share-title={post.title}
+        data-share-url={postUrl}
+        title="分享文章"
+      >
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7" />
+          <path d="M12 16V4" />
+          <path d="m7 9 5-5 5 5" />
+        </svg>
+        <span>分享</span>
+      </button>
+      <a class="post-copyright-action" href="/rss.xml" title="订阅 RSS">
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M5 5a14 14 0 0 1 14 14" />
+          <path d="M5 11a8 8 0 0 1 8 8" />
+          <path d="M6 18h.01" />
+        </svg>
+        <span>订阅</span>
+      </a>
+      <a class="post-copyright-action" href="/about/" title="打赏作者">
+        <svg aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M7 8h10" />
+          <path d="M8 8V5h8v3" />
+          <path d="M6 8h12l-1.5 11h-9L6 8Z" />
+          <path d="M10 12h4" />
+        </svg>
+        <span>打赏</span>
+      </a>
+      <a class="post-copyright-icon" href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(postUrl)}&text=${encodeURIComponent(post.title)}`} target="_blank" rel="noreferrer" title="分享到 X">
+        <span aria-hidden="true">x</span>
+      </a>
+      <a class="post-copyright-icon" href={`https://service.weibo.com/share/share.php?url=${encodeURIComponent(postUrl)}&title=${encodeURIComponent(post.title)}`} target="_blank" rel="noreferrer" title="分享到微博">
+        <span aria-hidden="true">微</span>
+      </a>
+    </div>
+  </div>
+</section>
+
+<script is:inline>
+  (() => {
+    document.querySelectorAll('.post-share-button').forEach((button) => {
+      button.addEventListener('click', async () => {
+        const title = button.dataset.shareTitle || document.title;
+        const url = button.dataset.shareUrl || window.location.href;
+        const label = button.querySelector('span');
+        const originalText = label?.textContent || '分享';
+
+        try {
+          if (navigator.share) {
+            await navigator.share({ title, url });
+            return;
+          }
+
+          await navigator.clipboard.writeText(url);
+          if (label) label.textContent = '已复制';
+        } catch {
+          if (label) label.textContent = '复制失败';
+        } finally {
+          window.setTimeout(() => {
+            if (label) label.textContent = originalText;
+          }, 1800);
+        }
+      });
+    });
+  })();
+</script>