newechoes/src/pages/articles/[...id].astro

---
import { getCollection, render } from "astro:content";
import { getSpecialPath } from "@/content.config";
import Layout from "@/components/Layout.astro";
import { Breadcrumb } from "@/components/Breadcrumb.tsx";
import { ARTICLE_EXPIRY_CONFIG } from "@/consts";

// 添加这一行，告诉Astro预渲染这个页面
export const prerender = true;

export async function getStaticPaths() {
  const articles = await getCollection("articles");
  const views = ["grid", "timeline"];

  // 为每篇文章生成路由参数
  const paths = [];
  for (const article of articles) {
    // 获取所有可能的路径形式
    const possiblePaths = new Set([
      article.id, // 只保留原始路径
    ]);

    // 如果是多级目录，检查是否需要特殊处理
    if (article.id.includes("/")) {
      const parts = article.id.split("/");
      const fileName = parts[parts.length - 1];
      const dirName = parts[parts.length - 2];

      // 只有当文件名与其父目录名相同时才添加特殊路径
      if (fileName === dirName) {
        possiblePaths.add(getSpecialPath(article.id));
      }
    }

    // 为每个可能的路径生成路由
    for (const path of possiblePaths) {
      // 添加基本路由
      paths.push({
        params: { id: path },
        props: {
          article,
          section: article.id.includes("/")
            ? article.id.split("/").slice(0, -1).join("/")
            : "",
          originalId: path !== article.id ? article.id : undefined,
          view: undefined,
        },
      });

      // 为每个视图添加路由
      for (const view of views) {
        paths.push({
          params: { id: `${path}/${view}` },
          props: {
            article,
            section: article.id.includes("/")
              ? article.id.split("/").slice(0, -1).join("/")
              : "",
            originalId: path !== article.id ? article.id : undefined,
            view,
          },
        });
      }
    }
  }

  return paths;
}

// 获取文章内容
const { article, section, originalId, view } = Astro.props;

// 如果有原始ID，使用它来渲染内容
const articleToRender = originalId ? { ...article, id: originalId } : article;

// 渲染文章内容
const { Content } = await render(articleToRender);

// 获取面包屑导航
const breadcrumbs = section ? section.split("/") : [];

// 获取相关文章
const allArticles = await getCollection("articles");
const relatedArticles = allArticles
  .filter(
    (a) =>
      a.id !== article.id &&
      a.data.tags &&
      article.data.tags &&
      a.data.tags.some((tag) => article.data.tags?.includes(tag)),
  )
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
  .slice(0, 3);

// 准备文章描述
const description =
  article.data.summary ||
  `${article.data.title} - 发布于 ${article.data.date.toLocaleDateString("zh-CN")}`;

// 处理特殊ID的函数
function getArticleUrl(articleId: string) {
  return `/articles/${getSpecialPath(articleId)}${view ? `/${view}` : ""}`;
}
---

<Layout
  title={article.data.title}
  description={description}
  date={article.data.date}
  author={article.data.author}
  tags={article.data.tags}
  image={article.data.image}
>
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 阅读进度条 -->
    <div
      class="fixed top-0 left-0 w-full h-1 bg-transparent z-50"
      id="progress-container"
    >
      <div
        class="h-full w-0 bg-primary-500 transition-width duration-100"
        id="progress-bar"
      >
      </div>
    </div>

    <!-- 文章头部 -->
    <header class="mb-8">
      <!-- 导航区域 -->
      <div
        class="bg-white dark:bg-dark-card rounded-xl p-4 mb-6 shadow-lg border border-gray-200 dark:border-gray-700"
      >
        <div
          class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
        >
          <div class="overflow-x-auto">
            <Breadcrumb
              pageType="article"
              pathSegments={breadcrumbs}
              articleTitle={article.data.title}
              client:load
            />
          </div>

          <div class="flex items-center shrink-0">
            {/* 返回按钮 */}
            <a
              href={`/articles${view ? `/${view}` : ""}`}
              class="text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 flex items-center text-sm"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 mr-1"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"
                ></path>
              </svg>
              返回文章列表
            </a>
          </div>
        </div>
      </div>

      <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">
        {article.data.title}
      </h1>

      <div
        class="flex flex-wrap items-center gap-4 text-sm text-secondary-600 dark:text-secondary-400 mb-4"
      >
        <time
          datetime={article.data.date.toISOString()}
          class="flex items-center"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 mr-1"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
            ></path>
          </svg>
          {article.data.date.toLocaleDateString("zh-CN")}
        </time>

        {/* 显示文章所在目录 */}
        {
          section && (
            <span class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 mr-1 shrink-0"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
                />
              </svg>
              <a
                href={`/articles?path=${encodeURIComponent(section)}`}
                class="hover:text-indigo-600 break-all"
              >
                {section}
              </a>
            </span>
          )
        }
      </div>

      {
        article.data.tags && article.data.tags.length > 0 && (
          <div class="flex flex-wrap gap-2 mb-6">
            {article.data.tags.map((tag) => (
              <a
                href={`/articles?tag=${tag}`}
                class="text-xs bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 py-1 px-2 rounded hover:bg-primary-100 dark:hover:bg-primary-800/30"
              >
                #{tag}
              </a>
            ))}
          </div>
        )
      }
    </header>

    <!-- 文章内容区域 -->
    <div class="relative">
      <!-- 文章过期提醒 -->
      {
        (() => {
          const publishDate = article.data.date;
          const currentDate = new Date();
          const daysDiff = Math.floor(
            (currentDate.getTime() - publishDate.getTime()) /
              (1000 * 60 * 60 * 24),
          );

          if (
            ARTICLE_EXPIRY_CONFIG.enabled &&
            daysDiff > ARTICLE_EXPIRY_CONFIG.expiryDays
          ) {
            return (
              <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                <div class="flex">
                  <div class="flex-shrink-0">
                    <svg
                      class="h-5 w-5 text-yellow-400"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  </div>
                  <div class="ml-3">
                    <p class="text-sm text-yellow-700">
                      {ARTICLE_EXPIRY_CONFIG.warningMessage}
                    </p>
                  </div>
                </div>
              </div>
            );
          }
          return null;
        })()
      }

      <!-- 文章内容 -->
      <article
        class="prose prose-lg dark:prose-invert prose-primary prose-table:rounded-lg prose-table:border-separate prose-table:border-2 prose-thead:bg-primary-50 dark:prose-thead:bg-dark-surface prose-ul:list-disc prose-ol:list-decimal prose-li:my-1 prose-blockquote:border-l-4 prose-blockquote:border-primary-500 prose-blockquote:bg-gray-100 prose-blockquote:dark:bg-dark-surface prose-a:text-primary-600 prose-a:dark:text-primary-400 prose-a:no-underline prose-a:border-b prose-a:border-primary-300 prose-a:hover:border-primary-600 max-w-none mb-12"
      >
        <Content />
      </article>

      <!-- 固定目录面板 - 脱离文档流 -->
      <div
        class="hidden 2xl:block fixed right-[calc(50%-48rem)] top-20 w-64 z-30"
      >
        <div
          class="bg-white dark:bg-dark-card rounded-lg shadow-lg p-4 max-h-[calc(100vh-8rem)] overflow-y-auto border border-gray-200 dark:border-gray-700"
        >
          <div
            class="border-b border-secondary-100 dark:border-dark-border pb-2 mb-3 sticky top-0 bg-white dark:bg-dark-card"
          >
            <h3 class="font-bold text-primary-700 dark:text-primary-400">
              文章目录
            </h3>
          </div>
          <div
            id="toc-content"
            class="text-sm"
          >
            <!-- 目录内容将通过JavaScript动态生成 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 相关文章 -->
    {
      relatedArticles.length > 0 && (
        <div class="mt-12 pt-8 border-t border-secondary-200 dark:border-dark-border">
          <h2 class="text-2xl font-bold mb-6 text-primary-900 dark:text-primary-100">
            相关文章
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {relatedArticles.map((relatedArticle) => (
              <a
                href={getArticleUrl(relatedArticle.id)}
                class="block p-5 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark-card hover:shadow-xl hover:-translate-y-1 shadow-lg"
              >
                <h3 class="font-bold text-lg mb-2 line-clamp-2 text-gray-800 dark:text-gray-200 hover:text-primary-700 dark:hover:text-primary-400">
                  {relatedArticle.data.title}
                </h3>
                <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-2">
                  {relatedArticle.data.date.toLocaleDateString("zh-CN")}
                </p>
                {relatedArticle.data.summary && (
                  <p class="text-sm text-secondary-700 dark:text-secondary-300 line-clamp-3">
                    {relatedArticle.data.summary}
                  </p>
                )}
              </a>
            ))}
          </div>
        </div>
      )
    }

    <!-- 返回顶部按钮 -->
    <button
      id="back-to-top"
      class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary-500 dark:bg-primary-600 text-white shadow-md flex items-center justify-center opacity-0 invisible translate-y-5 hover:bg-primary-600 dark:hover:bg-primary-700"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 10l7-7m0 0l7 7m-7-7v18"
        ></path>
      </svg>
    </button>
  </div>

<script is:inline>
(function() {
  const listeners = [];
  
  function addListener(element, eventType, handler, options) {
    if (!element) return null;
    
    element.addEventListener(eventType, handler, options);
    listeners.push({ element, eventType, handler });
    return handler;
  }
  
  function setupProgressBar() {
    const progressBar = document.getElementById("progress-bar");
    const backToTopButton = document.getElementById("back-to-top");
    
    if (!progressBar) return;
    
    function updateReadingProgress() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const scrollHeight = 
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight;
      const progress = (scrollTop / scrollHeight) * 100;

      progressBar.style.width = `${progress}%`;

      if (backToTopButton) {
        if (scrollTop > 300) {
          backToTopButton.classList.add(
            "opacity-100", "visible", "translate-y-0"
          );
          backToTopButton.classList.remove(
            "opacity-0", "invisible", "translate-y-5"
          );
        } else {
          backToTopButton.classList.add(
            "opacity-0", "invisible", "translate-y-5"
          );
          backToTopButton.classList.remove(
            "opacity-100", "visible", "translate-y-0"
          );
        }
      }
    }
    
    addListener(window, "scroll", updateReadingProgress);
    
    if (backToTopButton) {
      addListener(backToTopButton, "click", () => {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      });
    }
    
    updateReadingProgress();
  }
  
  function setupTableOfContents() {
    const tocContent = document.getElementById("toc-content");
    const tocPanel = document.querySelector('[class*="2xl:block"][class*="fixed"]');
    
    if (!tocPanel || !tocContent) return;
    
    function checkTocVisibility() {
      if (window.innerWidth < 1536) {
        tocPanel.classList.add("hidden");
        tocPanel.classList.remove("2xl:block");
      } else {
        tocPanel.classList.remove("hidden");
        tocPanel.classList.add("2xl:block");
      }
    }
    
    addListener(window, "resize", checkTocVisibility);
    
    checkTocVisibility();
    
    const article = document.querySelector("article");
    if (!article) {
      tocContent.innerHTML = '<p class="text-secondary-500 dark:text-secondary-400 italic">无法生成目录</p>';
      return;
    }

    const headings = article.querySelectorAll("h1, h2, h3, h4, h5, h6");
    if (headings.length === 0) {
      tocContent.innerHTML = '<p class="text-secondary-500 dark:text-secondary-400 italic">此文章没有目录</p>';
      return;
    }

    const tocList = document.createElement("ul");
    tocList.className = "space-y-2";
    
    headings.forEach((heading, index) => {
      if (!heading.id) {
        heading.id = `heading-${index}`;
      }

      const listItem = document.createElement("li");
      const headingLevel = parseInt(heading.tagName.substring(1));
      const indent = (headingLevel - 1) * 0.75;

      const link = document.createElement("a");
      link.href = `#${heading.id}`;
      link.className = `block hover:text-primary-600 dark:hover:text-primary-400 duration-50 ${
        headingLevel > 2 
          ? "text-secondary-600 dark:text-secondary-400" 
          : "text-secondary-800 dark:text-secondary-200 font-medium"
      }`;
      link.style.paddingLeft = `${indent}rem`;
      link.textContent = heading.textContent;

      addListener(link, "click", (e) => {
        e.preventDefault();
        const targetId = link.getAttribute("href")?.substring(1);
        if (!targetId) return;

        const targetElement = document.getElementById(targetId);
        if (targetElement) {
          const offset = 100;
          const targetPosition =
            targetElement.getBoundingClientRect().top +
            window.scrollY -
            offset;

          window.scrollTo({
            top: targetPosition,
            behavior: "smooth",
          });

          targetElement.classList.add(
            "bg-primary-50", "dark:bg-primary-900/20"
          );
          setTimeout(() => {
            targetElement.classList.remove(
              "bg-primary-50", "dark:bg-primary-900/20"
            );
          }, 2000);
        }
      });

      listItem.appendChild(link);
      tocList.appendChild(listItem);
    });

    tocContent.innerHTML = "";
    tocContent.appendChild(tocList);
    
    let ticking = false;
    
    function updateActiveHeading() {
      const currentHeadings = Array.from(article.querySelectorAll("h1, h2, h3, h4, h5, h6"));
      const tocLinks = Array.from(tocContent.querySelectorAll("a"));
      
      tocLinks.forEach(link => {
        link.classList.remove(
          "text-primary-600", "dark:text-primary-400", "font-medium"
        );
      });

      const scrollPosition = window.scrollY + 150;
      let currentHeading = null;

      for (const heading of currentHeadings) {
        const headingTop = heading.getBoundingClientRect().top + window.scrollY;
        if (headingTop <= scrollPosition) {
          currentHeading = heading;
        } else {
          break;
        }
      }

      if (currentHeading) {
        const activeLink = tocLinks.find(
          link => link.getAttribute("href") === `#${currentHeading.id}`
        );
        if (activeLink) {
          activeLink.classList.add(
            "text-primary-600", "dark:text-primary-400", "font-medium"
          );
        }
      }
    }
    
    addListener(window, "scroll", () => {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          updateActiveHeading();
          ticking = false;
        });
        ticking = true;
      }
    });
    
    updateActiveHeading();
  }
  
  function setupCodeBlocks() {
    const codeBlocks = document.querySelectorAll("pre");
    if (!codeBlocks.length) return;
    
    codeBlocks.forEach(pre => {
      const code = pre.querySelector("code");
      if (!code || pre.querySelector('.code-header')) return;

      const className = code.className;
      const languageMatch = className.match(/language-(\w+)/);
      const language = languageMatch ? languageMatch[1] : "text";

      const header = document.createElement("div");
      header.className = "code-header flex justify-between items-center text-xs px-4 py-2 bg-secondary-800 dark:bg-dark-card text-secondary-300 dark:text-secondary-400 rounded-t-lg";

      const languageLabel = document.createElement("span");
      languageLabel.className = "code-language font-mono";
      languageLabel.textContent = language;

      const copyButton = document.createElement("button");
      copyButton.className = "code-copy-button flex items-center gap-1 hover:text-white dark:hover:text-primary-400 transition-colors";

      const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
      const successIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M20 6L9 17l-5-5"></path></svg>`;
      const errorIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;

      copyButton.innerHTML = `${copyIcon}<span>复制</span>`;
      copyButton.setAttribute("aria-label", "复制代码");
      copyButton.setAttribute("title", "复制代码到剪贴板");

      addListener(copyButton, "click", (e) => {
        e.stopPropagation();
        
        navigator.clipboard.writeText(code.textContent || "")
          .then(() => {
            copyButton.innerHTML = `${successIcon}<span>已复制</span>`;
            copyButton.classList.add("text-green-400");
            
            setTimeout(() => {
              copyButton.innerHTML = `${copyIcon}<span>复制</span>`;
              copyButton.classList.remove("text-green-400");
            }, 2000);
          })
          .catch(() => {
            copyButton.innerHTML = `${errorIcon}<span>失败</span>`;
            copyButton.classList.add("text-red-400");
            
            setTimeout(() => {
              copyButton.innerHTML = `${copyIcon}<span>复制</span>`;
              copyButton.classList.remove("text-red-400");
            }, 2000);
          });
      });

      header.appendChild(languageLabel);
      header.appendChild(copyButton);
      pre.insertBefore(header, pre.firstChild);
      
      pre.classList.add("rounded-b-lg", "mt-0");
      pre.style.marginTop = "0";
    });
  }
  
  function cleanup() {
    listeners.forEach(({ element, eventType, handler }) => {
      try {
        element.removeEventListener(eventType, handler);
      } catch (err) {}
    });
    
    listeners.length = 0;
  }
  
  function init() {
    if (!document.querySelector("article")) return;
    
    setupProgressBar();
    setupTableOfContents();
    setupCodeBlocks();
  }
  
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
  
  function registerCleanup() {
    document.addEventListener("astro:before-preparation", cleanup, { once: true });
    document.addEventListener("astro:before-swap", cleanup, { once: true });
    document.addEventListener("swup:willReplaceContent", cleanup, { once: true });
    window.addEventListener("beforeunload", cleanup, { once: true });
  }
  
  registerCleanup();
})();
</script>

</Layout>