如何使用 Astro 404 頁面重定向正確的文章頁面?

在博客的反向連結(backlink)檢查過程中,發現許多網站引用我的技術文章。然而,由於年代久遠,這些網站使用的連結往往導向 404 頁面,所以我就在 Astro 的 404 頁面寫一段代碼解決這個問題。

例如【【翻譯】前端性能優化必備工具清單】,這是我在 2017 年翻譯的文章: https://calpa.me/2017/06/19/front-end-performance-check-list-for-production-in-chinese/ 應該重導向到 https://calpa.me/blog/front-end-performance-check-list-for-production-in-chinese/

利用 Astro SSR 優化性能和用戶體驗

使用 Astro SSR 時,我們可以將一些關鍵邏輯移到伺服器端執行,從而提高網站的性能並減少用戶等待時間。這特別有助於處理需要根據路徑查找或處理內容的情況,如解決 404 錯誤問題。這有助於提供更流暢的用戶體驗,確保網站能夠快速響應用戶的需求。

解決方案:根據當前網址的路徑來查找相關的內容條目

以下代碼的主要功能是根據當前網址的路徑,查找相對應的博客內容條目(文章)。如果找到相符的文章,則會將用戶重定向到該文章頁面。如果找不到相符的文章,則會顯示一個友好的 404 錯誤頁面,以改善用戶體驗。

以下是代碼片段的示例:

import { getEntry } from "astro:content";

const pathname = Astro.url.pathname;

const array = pathname.split("/").filter((x) => x);

const maybe_slug = array[array.length - 1];

const post = await getEntry({
  collection: "blog",
  slug: maybe_slug,
});

// 如果找到相應的內容條目,則將用戶重定向到正確的文章頁面。
if (post !== undefined) {
  return Astro.redirect(`/blog/${maybe_slug}/`);
}

首先,獲取當前網址的路徑,然後解析該路徑以獲得可能的文章 slug。接下來,使用 getEntry 函數來查找博客集合中的相應內容條目。如果找到該條目,則會重定向到正確的文章頁面。如果未找到條目,則會顯示 404 錯誤頁面。

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。