1<!DOCTYPE html><html lang="zh-CN" itemscope="" itemtype="https://schema.org/Article" data-astro-cid-pgt5l3fs=""><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>ä½¿ç¨ Astro.js éææçå客 - Lan Tian @ Blog</title>
1<script> 2 ;(() => { 3 try { 4 const mode = localStorage.getItem('user-color-scheme') 5 if (mode == 'dark' || mode == 'light') { 6 document.documentElement.setAttribute('data-user-color-scheme', mode) 7 } 8 } catch { 9 // Ignore errors 10 } 11 })() 12 ;(() => { 13 window.lantianImageFallback = (img, src) => { 14 img.onerror = null 15 img.srcset = src 16 img.src = src 17 if (img.parentNode.nodeName.toLowerCase() === 'picture') { 18 const picture = img.parentNode 19 picture.innerHTML = '' 20 picture.appendChild(img) 21 } 22 } 23 })() 24</script>
24<link rel="stylesheet" href="/assets/PostText.DhvrU1vO.css"><style>.post-image-wrap[data-astro-cid-axmlwxhn]{margin:0 -5px}.post-image-wrap[data-astro-cid-axmlwxhn] img[data-astro-cid-axmlwxhn]{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;height:150px}@media (width>=768px){.post-image-wrap[data-astro-cid-axmlwxhn]{float:right;padding:5px}.post-image-wrap[data-astro-cid-axmlwxhn] img[data-astro-cid-axmlwxhn]{max-width:200px}}@media (width<=767.98px){.post-image-wrap[data-astro-cid-axmlwxhn]{text-align:center}.post-image-wrap[data-astro-cid-axmlwxhn] img[data-astro-cid-axmlwxhn]{max-width:100%}}#post-navi[data-astro-cid-wlifdhof]{border-top:1px solid var(--lt-border-weak);border-bottom:1px solid var(--lt-border-weak);padding:5px} 25</style>
25<script type="module" src="/assets/PageLayout.astro_astro_type_script_index_0_lang.I87Dj7a_.js"></script>
25<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Referrer-Policy" content="no-referrer, strict-origin-when-cross-origin"><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta name="imagemode" content="force"><meta name="nightmode" content="disable"><meta name="wap-font-scale" content="no"><meta name="title" content="ä½¿ç¨ Astro.js éææçå客 - Lan Tian @ Blog"><meta name="keywords" content=""><meta name="author" content="Lan Tian"><link rel="canonical" href="https://lantian.pub/article/modify-website/migrate-blog-to-astro-js.lantian/"><link rel="alternate" type="application/rss+xml" title="Lan Tian @ Blog" href="https://lantian.pub/rss2.xml"><link rel="alternate" type="application/atom+xml" title="Lan Tian @ Blog" href="https://lantian.pub/feed.xml"><link rel="alternate" type="application/rss+xml" title="Lan Tian @ Blog (Chinese Simplified / ç®ä½ä¸æ)" href="https://lantian.pub/rss2.zh.xml" hreflang="zh"><link rel="alternate" type="application/atom+xml" title="Lan Tian @ Blog (Chinese Simplified / ç®ä½ä¸æ)" href="https://lantian.pub/feed.zh.xml" hreflang="zh"><link rel="alternate" type="application/json" title="Lan Tian @ Blog (Chinese Simplified / ç®ä½ä¸æ)" href="https://lantian.pub/feed.zh.json" hreflang="zh"><link rel="alternate" type="application/rss+xml" title="Lan Tian @ Blog (English)" href="https://lantian.pub/rss2.en.xml" hreflang="en"><link rel="alternate" type="application/atom+xml" title="Lan Tian @ Blog (English)" href="https://lantian.pub/feed.en.xml" hreflang="en"><link rel="alternate" type="application/json" title="Lan Tian @ Blog (English)" href="https://lantian.pub/feed.en.json" hreflang="en"><link rel="alternate" href="https://lantian.pub/article/modify-website/migrate-blog-to-astro-js.lantian/" hreflang="zh"><link rel="alternate" href="https://lantian.pub/en/article/modify-website/migrate-blog-to-astro-js.lantian/" hreflang="en"><meta name="copyright" content="Copyright 2012-2026 Lan Tian @ Blog"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="manifest" href="/manifest.webmanifest"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#03a9f4"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#212121"><meta name="application-name" content="Lan Tian @ Blog"><link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"><link rel="apple-touch-icon" sizes="1024x1024" href="/apple-touch-icon-1024x1024.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-precomposed.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#03a9f4"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="Lan Tian @ Blog"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-640x1136.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1136x640.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-750x1334.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1334x750.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1125x2436.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2436x1125.png"><link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1170x2532.png"><link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2532x1170.png"><link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1179x2556.png"><link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2556x1179.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-828x1792.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1792x828.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2688.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2688x1242.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2208x1242.png"><link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1284x2778.png"><link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2778x1284.png"><link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1290x2796.png"><link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2796x1290.png"><link rel="apple-touch-startup-image" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1488x2266.png"><link rel="apple-touch-startup-image" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2266x1488.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1536x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2048x1536.png"><link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1620x2
25160.png"><link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1620.png"><link rel="apple-touch-startup-image" media="(device-width: 820px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1640x2160.png"><link rel="apple-touch-startup-image" media="(device-width: 820px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1640.png"><link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2388.png"><link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2388x1668.png"><link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2224.png"><link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2224x1668.png"><link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-2048x2732.png"><link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2732x2048.png"><meta name="msapplication-TileColor" content="#bbdefb"><meta name="msapplication-TileImage" content="/mstile-144x144.png"><meta name="msapplication-config" content="/browserconfig.xml"><link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json"><meta property="og:url" content="https://lantian.pub/article/modify-website/migrate-blog-to-astro-js.lantian/"><meta property="og:type" content="website"><meta property="og:title" content="ä½¿ç¨ Astro.js éææçå客 - Lan Tian @ Blog"><meta property="og:image" content="https://lantian.pub/apple-touch-icon.png"><meta content="åè¨ å·®ä¸å¤åå¹´ååï¼ ææå客系ç»ä» Typecho è¿ç§»å°äº Hexo ãHexo æ¯ä¸æ¬¾éæç½é¡µçæå¨ï¼Static Site Generatorï¼ï¼æ¬èº«æ éè¿æ¥ MySQLãPostgreSQL çæ°æ®åºå¨æçæç½é¡µï¼èæ¯æ ¹æ®ç»å®ç Markdown æç« æä»¶ä¸æ¬¡æ§çæææç HTML ç½é¡µãç¸æ¯äº WordPressãTypecho çå¨ææ¹æ¡ï¼é¢å
çæéæç½é¡µä¸éè¦æå¡å¨æ¯æ PHP ç卿è¯è¨ï¼å¯¹æå¡å¨çæ§è½ååæ´ä½ã 使¯ Hexo æ¬èº«å¹¶ä¸æ°ï¼ å®ç第ä¸ä¸ªçæ¬åå¸äº 2013 å¹´ 7 æ ã彿¶ä»¥ React 为é¦çå页åºç¨æ¡æ¶åååå¸ï¼Reactï¼2013 å¹´ 5 æï¼ï¼Webpack çç°ä»£å端æµç¨å¿
é¡»çæ¡æ¶ä¹è¿ä¸åå¨ï¼Webpackï¼2014 å¹´ 2 æï¼ï¼å æ¤ Hexo çæå½ç¶ç没æç¨ä¸è¿äºå·¥å
·ï¼èæ¯åç卿¼æ¥ HTML åç¬¦ä¸²çæ¶ä»£ãHexo 常ç¨çå ä¸ªä¸»é¢æ¨¡æ¿ç³»ç» EJSï¼Pug ç齿¯åºäºåç¬¦ä¸²æ¼æ¥ç模æ¿ç³»ç»ã 没æäºç°ä»£å端æµç¨ï¼å°±æå³çï¼ æéè¦æå¨å¤çæ¼æ¥ HTML çææç»èãæ¯æ¬¡ä¿®æ¹æ¨¡æ¿é½è®©ææ³èµ·å PHP çç¾å¥½æ¶å
ã..."><meta property="og:site_name" content="Lan Tian @ Blog"><meta property="og:locale" content="zh"><meta name="twitter:card" content="summary"><meta name="twitter:url" content="https://lantian.pub/article/modify-website/migrate-blog-to-astro-js.lantian/"><meta name="twitter:title" content="ä½¿ç¨ Astro.js éææçå客 - Lan Tian @ Blog"><meta property="twitter:image" content="https://lantian.pub/apple-touch-icon.png"><meta content="åè¨ å·®ä¸å¤åå¹´ååï¼ ææå客系ç»ä» Typecho è¿ç§»å°äº Hexo ãHexo æ¯ä¸æ¬¾éæç½é¡µçæå¨ï¼Static Site Generatorï¼ï¼æ¬èº«æ éè¿æ¥ MySQLãPostgreSQL çæ°æ®åºå¨æçæç½é¡µï¼èæ¯æ ¹æ®ç»å®ç Markdown æç« æä»¶ä¸æ¬¡æ§çæææç HTML ç½é¡µãç¸æ¯äº WordPressãTypecho çå¨ææ¹æ¡ï¼é¢å
çæéæç½é¡µä¸éè¦æå¡å¨æ¯æ PHP ç卿è¯è¨ï¼å¯¹æå¡å¨çæ§è½ååæ´ä½ã 使¯ Hexo æ¬èº«å¹¶ä¸æ°ï¼ å®ç第ä¸ä¸ªçæ¬åå¸äº 2013 å¹´ 7 æ ã
25彿¶ä»¥ React 为é¦çå页åºç¨æ¡æ¶åååå¸ï¼Reactï¼2013 å¹´ 5 æï¼ï¼Webpack çç°ä»£å端æµç¨å¿
é¡»çæ¡æ¶ä¹è¿ä¸åå¨ï¼Webpackï¼2014 å¹´ 2 æï¼ï¼å æ¤ Hexo çæå½ç¶ç没æç¨ä¸è¿äºå·¥å
·ï¼èæ¯åç卿¼æ¥ HTML åç¬¦ä¸²çæ¶ä»£ãHexo 常ç¨çå ä¸ªä¸»é¢æ¨¡æ¿ç³»ç» EJSï¼Pug ç齿¯åºäºåç¬¦ä¸²æ¼æ¥ç模æ¿ç³»ç»ã 没æäºç°ä»£å端æµç¨ï¼å°±æå³çï¼ æéè¦æå¨å¤çæ¼æ¥ HTML çææç»èãæ¯æ¬¡ä¿®æ¹æ¨¡æ¿é½è®©ææ³èµ·å PHP çç¾å¥½æ¶å
ã..."><meta name="twitter:dnt" content="on"><meta itemprop="name" content="ä½¿ç¨ Astro.js éææçå客 - Lan Tian @ Blog"><meta property="image" content="https://lantian.pub/apple-touch-icon.png"><meta content="åè¨ å·®ä¸å¤åå¹´ååï¼ ææå客系ç»ä» Typecho è¿ç§»å°äº Hexo ãHexo æ¯ä¸æ¬¾éæç½é¡µçæå¨ï¼Static Site Generatorï¼ï¼æ¬èº«æ éè¿æ¥ MySQLãPostgreSQL çæ°æ®åºå¨æçæç½é¡µï¼èæ¯æ ¹æ®ç»å®ç Markdown æç« æä»¶ä¸æ¬¡æ§çæææç HTML ç½é¡µãç¸æ¯äº WordPressãTypecho çå¨ææ¹æ¡ï¼é¢å
çæéæç½é¡µä¸éè¦æå¡å¨æ¯æ PHP ç卿è¯è¨ï¼å¯¹æå¡å¨çæ§è½ååæ´ä½ã 使¯ Hexo æ¬èº«å¹¶ä¸æ°ï¼ å®ç第ä¸ä¸ªçæ¬åå¸äº 2013 å¹´ 7 æ ã彿¶ä»¥ React 为é¦çå页åºç¨æ¡æ¶åååå¸ï¼Reactï¼2013 å¹´ 5 æï¼ï¼Webpack çç°ä»£å端æµç¨å¿
é¡»çæ¡æ¶ä¹è¿ä¸åå¨ï¼Webpackï¼2014 å¹´ 2 æï¼ï¼å æ¤ Hexo çæå½ç¶ç没æç¨ä¸è¿äºå·¥å
·ï¼èæ¯åç卿¼æ¥ HTML åç¬¦ä¸²çæ¶ä»£ãHexo 常ç¨çå ä¸ªä¸»é¢æ¨¡æ¿ç³»ç» EJSï¼Pug ç齿¯åºäºåç¬¦ä¸²æ¼æ¥ç模æ¿ç³»ç»ã 没æäºç°ä»£å端æµç¨ï¼å°±æå³çï¼ æéè¦æå¨å¤çæ¼æ¥ HTML çææç»èãæ¯æ¬¡ä¿®æ¹æ¨¡æ¿é½è®©ææ³èµ·å PHP çç¾å¥½æ¶å
ã..."><meta content="åè¨ å·®ä¸å¤åå¹´ååï¼ ææå客系ç»ä» Typecho è¿ç§»å°äº Hexo ãHexo æ¯ä¸æ¬¾éæç½é¡µçæå¨ï¼Static Site Generatorï¼ï¼æ¬èº«æ éè¿æ¥ MySQLãPostgreSQL çæ°æ®åºå¨æçæç½é¡µï¼èæ¯æ ¹æ®ç»å®ç Markdown æç« æä»¶ä¸æ¬¡æ§çæææç HTML ç½é¡µãç¸æ¯äº WordPressãTypecho çå¨ææ¹æ¡ï¼é¢å
çæéæç½é¡µä¸éè¦æå¡å¨æ¯æ PHP ç卿è¯è¨ï¼å¯¹æå¡å¨çæ§è½ååæ´ä½ã 使¯ Hexo æ¬èº«å¹¶ä¸æ°ï¼ å®ç第ä¸ä¸ªçæ¬åå¸äº 2013 å¹´ 7 æ ã彿¶ä»¥ React 为é¦çå页åºç¨æ¡æ¶åååå¸ï¼Reactï¼2013 å¹´ 5 æï¼ï¼Webpack çç°ä»£å端æµç¨å¿
é¡»çæ¡æ¶ä¹è¿ä¸åå¨ï¼Webpackï¼2014 å¹´ 2 æï¼ï¼å æ¤ Hexo çæå½ç¶ç没æç¨ä¸è¿äºå·¥å
·ï¼èæ¯åç卿¼æ¥ HTML åç¬¦ä¸²çæ¶ä»£ãHexo 常ç¨çå ä¸ªä¸»é¢æ¨¡æ¿ç³»ç» EJSï¼Pug ç齿¯åºäºåç¬¦ä¸²æ¼æ¥ç模æ¿ç³»ç»ã 没æäºç°ä»£å端æµç¨ï¼å°±æå³çï¼ æéè¦æå¨å¤çæ¼æ¥ HTML çææç»èãæ¯æ¬¡ä¿®æ¹æ¨¡æ¿é½è®©ææ³èµ·å PHP çç¾å¥½æ¶å
ã..."><link rel="me" href="https://mastodon.social/@lantian"></head><body data-astro-cid-pgt5l3fs=""><div id="bg" data-astro-cid-fpl3fizy=""></div><div id="container" class="container" data-astro-cid-pgt5l3fs=""><nav class="lantian navbar navbar-expand-lg" data-astro-cid-b2i3gsw2=""><div class="container-fluid" data-astro-cid-b2i3gsw2=""><a class="navbar-brand" href="/" data-astro-cid-b2i3gsw2="">Lan Tian @ Blog</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#lantian-navbar" aria-controls="lantian-navbar" aria-expanded="false" aria-label="Toggle navigation" data-astro-cid-b2i3gsw2=""><span class="navbar-toggler-icon" data-astro-cid-b2i3gsw2=""></span></button><div class="collapse navbar-collapse" id="lantian-navbar" data-astro-cid-b2i3gsw2=""><ul class="navbar-nav" data-astro-cid-b2i3gsw2=""><li class="nav-item d-none d-lg-block" data-astro-cid-b2i3gsw2=""><a class="nav-link" href="/page/archive/index.html" data-astro-cid-b2i3gsw2="">æç« 们</a></li><li class="nav-item d-none d-lg-block" data-astro-cid-b2i3gsw2=""><a class="nav-link" href="/page/himawari/index.html" data-astro-cid-b2i3gsw2="">俯ç°å°ç</a></li><li class="nav-item d-none d-lg-block" data-astro-cid-b2i3gsw2=""><a class="nav-link" href="/page/dn42/index.html" data-astro-cid-b2i3gsw2="">DN42</a></li><li class="nav-item dropdown d-block d-lg-none" data-astro-cid-b2i3gsw2=""><a href="#" class="nav-link dropdown-toggle" id="pages-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-astro-cid-b2i3gsw2=""><i class="fas fa-fw fa-file" data-astro-cid-b2i3gsw2=""></i> é¡µé¢ <span class="caret" data-astro-cid-b2i3gsw2=""></span></a><ul class="dropdown-menu" aria-labelledby="pages-dropdown" data-astro-cid-b2i3gsw2=""><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item" href="/page/archive/index.html" data-astro-cid-b2i3gsw2="">æç« 们</a></li><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item" href="/page/himawari/index.html" data-astro-cid-b2i3gsw2="">俯ç°å°ç</a></li><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item" href="/page/dn42/index.html" data-astro-cid-b2i3gsw2="">DN42</a></li></ul></li></ul><ul class="navbar-nav ms-auto" data-astro-cid-b2i3gsw2=""><li class="nav-item dropdown" data-astro-cid-b2i3gsw2=""><a href="#" class="nav-link dropdown-toggle" id="languages-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-astro-cid-b2i3gsw2=""><i class="fas fa-fw fa-language" data-astro-cid-b2i3gsw2=""></i>Language<span class="caret" data-astro-cid-b2i3gsw2=""></span></a><ul class="dropdown-menu" aria-labelledby="languages-dropdown" data-astro-cid-b2i3gsw2=""><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item active" href="/article/modify-website/migrate-blog-to-astro-js.lantian/" data-astro-cid-b2i3gsw2=""><span class="flag-icon flag-icon-cn" data-astro-cid-b2i3gsw2=""></span>Chinese Simplified / ç®ä½ä¸æ</a></li><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item" href="/en/article/modify-website/migrate-blog-to-astro-js.lantian/" data-astro-cid-b2i3gsw2=""><span class="flag-icon flag-icon-us" data-astro-cid-b2i3gsw2=""></span>English</a></li><li data-astro-cid-b2i3gsw2=""><hr class="dropdown-divider" data-astro-cid-b2i3gsw2=""></li><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item disabled" href="#" data-astro-cid-b2i3gsw2="">Not all pages have translations.</a></li><li data-astro-cid-b2i3gsw2=""><a class="dropdown-item disabled" href="#" data-astro-cid-b2i3gsw2="">You may see 404 - this is normal.</a></li></ul></li><li class="nav-item dropdown" data-astro-cid-b2i3gsw2=""><a href="#" class="nav-link dropdown-toggle" id="color-scheme-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-astro-cid-b2i3gsw2=""><i class="fas fa-fw fa-adjust" data-astro-cid-b2i3gsw2=""></i>å¤é´æ¨¡å¼</a><ul class="dropdown-menu" aria-labelledby="color-scheme-dropdown" data-astro-cid-b2i3gsw2=""><li data-astro-cid-b2i3gsw2=""><a id="color-scheme-auto" class="dropdown-item" href="#" data-astro-cid-b2i3gsw2=""><i class="fas fa-fw fa-adjust" data-astro-cid-b2i3gsw2=""></i>èªå¨</a></li><li data-astro-cid-b2i3gsw2=""><hr class="dropdown-divider" data-astro-cid-b2i3gsw2=""></li><li data-astro-cid-b2i3gsw2=""><a id="color-scheme-light" class="dropdown-item" href="#" data-astro-cid-b2i3gsw2=""><i class="fas fa-fw fa-sun" data-astro-cid-b2i3gsw2=""></i>æµ
è²</a></li><li data-astro-cid-b2i3gsw2="">
25<a id="color-scheme-dark" class="dropdown-item" href="#" data-astro-cid-b2i3gsw2=""><i class="fas fa-fw fa-moon" data-astro-cid-b2i3gsw2=""></i>æ·±è²</a></li></ul></li></ul></div></div></nav>
25<script type="module">var e=`user-color-scheme`,t=`data-user-color-scheme`,n=(e,t)=>{try{localStorage.setItem(e,t)}catch{}},r=e=>{try{return localStorage.getItem(e)}catch{return null}},i=r=>{let i={dark:!0,light:!0,auto:!0},a=r===null||!Object.keys(i).includes(r)?`auto`:r;n(e,a);for(let e in i){let t=document.getElementById(`color-scheme-`+e);t&&(e==a?t.classList.add(`active`):t.classList.remove(`active`))}a==`auto`?document.documentElement.removeAttribute(t):document.documentElement.setAttribute(t,a)};i(r(e));var a=document.getElementById(`color-scheme-auto`);a&&a.addEventListener(`click`,()=>i(`auto`));var o=document.getElementById(`color-scheme-light`);o&&o.addEventListener(`click`,()=>i(`light`));var s=document.getElementById(`color-scheme-dark`);s&&s.addEventListener(`click`,()=>i(`dark`));</script>
25<div class="d-flex" data-astro-cid-pgt5l3fs=""><div id="content" data-astro-cid-pgt5l3fs=""><article><div class="d-flex"><div class="post-info-wrap" data-astro-cid-65ryylzs=""><div class="post-info" data-astro-cid-65ryylzs=""><div class="post-meta-wrap" data-astro-cid-h7k7n6gs=""><div class="post-meta" data-astro-cid-h7k7n6gs=""><p data-astro-cid-h7k7n6gs=""><span class="fas fa-clock" data-astro-cid-h7k7n6gs=""></span><br data-astro-cid-h7k7n6gs=""><small data-astro-cid-h7k7n6gs="">04-20</small></p><div class="post-meta-value" data-astro-cid-h7k7n6gs="">åå¸äº<span class="badge badge-tag" data-astro-cid-65ryylzs="">2024-04-20 16:36</span></div></div></div><div class="post-meta-wrap" data-astro-cid-h7k7n6gs=""><div class="post-meta" data-astro-cid-h7k7n6gs=""><p data-astro-cid-h7k7n6gs=""><span class="fas fa-file-alt" data-astro-cid-h7k7n6gs=""></span><br data-astro-cid-h7k7n6gs=""><small data-astro-cid-h7k7n6gs="">ç½ç«ä¸æå¡ç«¯</small></p><div class="post-meta-value" data-astro-cid-h7k7n6gs="">åç±» <a class="badge badge-tag" href="/category/modify-website" data-astro-cid-65ryylzs="">ç½ç«ä¸æå¡ç«¯</a></div></div></div><div class="post-meta-wrap" data-astro-cid-h7k7n6gs=""><div class="post-meta" data-astro-cid-h7k7n6gs=""><p data-astro-cid-h7k7n6gs=""><span class="fas fa-tag" data-astro-cid-h7k7n6gs=""></span><br data-astro-cid-h7k7n6gs=""><small data-astro-cid-h7k7n6gs="">2 æ ç¾</small></p><div class="post-meta-value" data-astro-cid-h7k7n6gs="">æ ç¾ <a class="badge badge-tag" href="/tag/Astro-js" data-astro-cid-65ryylzs="">Astro.js</a> <a class="badge badge-tag" href="/tag/å客" data-astro-cid-65ryylzs="">å客</a> </div></div></div><div class="post-meta-wrap" data-astro-cid-h7k7n6gs=""><div class="post-meta" data-astro-cid-h7k7n6gs=""><p data-astro-cid-h7k7n6gs=""><span class="fas fa-list" data-astro-cid-h7k7n6gs=""></span><br data-astro-cid-h7k7n6gs=""><small data-astro-cid-h7k7n6gs="">ç®å½</small></p><div class="post-meta-value" data-astro-cid-h7k7n6gs=""><ol data-astro-cid-jkcjrl7z=""><li class="toc-item toc-level-1" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#åè¨" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">åè¨</span></a></li><li class="toc-item toc-level-1" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#æ¹æ¡éæ©" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">æ¹æ¡éæ©</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#reactvuesvelte-ç-spa-å页åºç¨æ¹æ¡" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">ReactãVueãSvelte ç SPA å页åºç¨æ¹æ¡</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#sukka-ç-hexo--nextjs-æ¹æ¡" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">Sukka ç Hexo + Next.js æ¹æ¡</span></a></li><li class="toc-item toc-level-1" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#æç»æ¹æ¡astrojs" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">æç»æ¹æ¡ï¼Astro.js</span></a></li><li class="toc-item toc-level-1" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#åå®¢ç³»ç»æ¶æ" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">åå®¢ç³»ç»æ¶æ</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#çæåºç¡æ¨¡æ¿" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">çæåºç¡æ¨¡æ¿</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#æç« æ¾ç¤º" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">æç« æ¾ç¤º</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#å¤è¯è¨" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">å¤è¯è¨</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#æç« æè¦" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">æç« æè¦</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#å页" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">å页</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#å¹é -hexo-ç-url" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">å¹é Hexo ç URL</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#islandå²å±¿åè½" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">Islandï¼å²å±¿ï¼åè½</span></a></li><li class="toc-item toc-level-2" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#åå¤çæä»¶ä¾css-å è" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">åå¤çæä»¶ï¼ä¾ï¼CSS å èï¼</span></a></li><li class="toc-item toc-level-1" data-astro-cid-jkcjrl7z=""><a class="toc-link" href="#æ»ç»" data-astro-cid-jkcjrl7z=""><span class="toc-text" data-astro-cid-jkcjrl7z="">æ»ç»</span></a></li></ol></div></div></div></div></div><div class="post-wrap"><h1 class="post-title"><a href="/article/modify-website/migrate-blog-to-astro-js.lantian/" rel="bookmark" title="ä½¿ç¨ Astro.js éææçå客">ä½¿ç¨ Astro.js éææçå客</a></h1><div class="post-text"><h1 id="åè¨">åè¨</h1> 26<p>å·®ä¸å¤åå¹´ååï¼<a href="https://lantian.pub/article/modify-website/switching-to-hexo-static-site-generator.lantian/" rel="noopener noreferrer" target="_blank">ææå客系ç»ä» Typecho è¿ç§»å°äº Hexo</a>ãHexo 27æ¯ä¸æ¬¾éæç½é¡µçæå¨ï¼Static Site Generatorï¼ï¼æ¬èº«æ éè¿æ¥ MySQLãPostgreSQL çæ°æ®åºå¨æçæç½é¡µï¼èæ¯æ ¹æ®ç»å®ç Markdown æç« æä»¶ä¸æ¬¡æ§çæææç HTML ç½é¡µãç¸æ¯äº WordPressãTypecho çå¨ææ¹æ¡ï¼é¢å çæéæç½é¡µä¸éè¦æå¡å¨æ¯æ PHP ç卿è¯è¨ï¼å¯¹æå¡å¨çæ§è½ååæ´ä½ã</p> 28<p>使¯ Hexo æ¬èº«å¹¶ä¸æ°ï¼<a href="https://github.com/hexojs/hexo/releases/tag/1.0.0" rel="noopener noreferrer" target="_blank">å®ç第ä¸ä¸ªçæ¬åå¸äº 2013 å¹´ 7 æ</a>ã彿¶ä»¥ React 为é¦çå页åºç¨æ¡æ¶åååå¸ï¼Reactï¼2013 å¹´ 5 æï¼ï¼Webpack çç°ä»£å端æµç¨
28å¿ é¡»çæ¡æ¶ä¹è¿ä¸åå¨ï¼Webpackï¼2014 å¹´ 2 æï¼ï¼å æ¤ Hexo çæå½ç¶ç没æç¨ä¸è¿äºå·¥å ·ï¼èæ¯åç卿¼æ¥ HTML åç¬¦ä¸²çæ¶ä»£ãHexo 常ç¨çå ä¸ªä¸»é¢æ¨¡æ¿ç³»ç» 29EJSï¼Pug ç齿¯åºäºåç¬¦ä¸²æ¼æ¥ç模æ¿ç³»ç»ã</p> 30<p>没æäºç°ä»£å端æµç¨ï¼å°±æå³çï¼</p> 31<ul> 32<li>æéè¦æå¨å¤çæ¼æ¥ HTML çææç»èãæ¯æ¬¡ä¿®æ¹æ¨¡æ¿é½è®©ææ³èµ·å PHP çç¾å¥½æ¶å ã</li> 33<li>ææ æ³æ¹ä¾¿å°ä½¿ç¨ Sassï¼PostCSS ç CSS å·¥å ·ï¼Unified.jsï¼Remark/Rehypeï¼ç坿©å± Markdown è§£æå¨ãè½ç¶æä¸äº Hexo æä»¶å¯ä»¥è°ç¨è¿äºåè½ï¼ä½å®ä»¬å¤§é½åçå¨ãè½è·å°±è¡ãçé¶æ®µï¼åªæ¯æåä½è ç¨å°çå 个åè½ï¼èä¸ä¾èµçæ¬è¿åçå¨åä½è ç¼åæä»¶çæ¶ä»£ã 34<ul> 35<li>ä¾å¦ï¼<a href="https://github.com/nejj/hexo-renderer-webpack" rel="noopener noreferrer" target="_blank">hexo-renderer-webpack</a> 36çä¾èµçæ¬åçå¨ 5 å¹´åã<a href="https://github.com/knksmith57/hexo-renderer-sass" rel="noopener noreferrer" target="_blank">hexo-renderer-sass</a> 37æå䏿¬¡æ´æ°æ¯ 10 个æåã<a href="https://github.com/LikaKavkasidze/hexo-renderer-unified" rel="noopener noreferrer" target="_blank">hexo-renderer-unified</a> 38ä¹åçå¨ 5 å¹´åã</li> 39<li>ä¸è¿æç¡®å®æåæ³ä½¿ç¨ Webpackï¼æåç¬åäºä¸å¥ Webpack é ç½®æä»¶ï¼å¨ CI çæå»ºèæ¬éå 䏿¥è°ç¨ Webpackï¼æçæç JSãCSS æ¾è¿ Hexo ç主é¢ç®å½ï¼ç¶åå¨ Hexo 40çæ¨¡æ¿éæå HTML è°ç¨ã</li> 41</ul> 42</li> 43</ul> 44<p>餿¤ä¹å¤ï¼è¿æå¦å¤å 个åå ä¿ä½¿æå¯»æ¾æ°çéæç½é¡µçæå¨æ¡æ¶ï¼</p> 45<ul> 46<li>å³ä½¿æ¯ææ°ç 7.x çæ¬ï¼Hexo ä¹è¿æ æ³å¨ä¸»é¢ãæä»¶ä¸ä½¿ç¨ ESM Moduleï¼ä¹å°±æå³çé¾ä»¥ä½¿ç¨ Typescriptãè伿å¨ç¥ï¼æå弱类åç Javascript å¾å®¹æååº Bugã</li> 47</ul> 48<p><picture><source srcset="/usr/uploads/202404/the-javascript-trinity.jpg.webp" type="image/webp"><source srcset="/usr/uploads/202404/the-javascript-trinity.jpg.avif" type="image/avif"><source srcset="/usr/uploads/202404/the-javascript-trinity.jpg.jxl" type="image/jxl"><img src="/usr/uploads/202404/the-javascript-trinity.jpg" alt="Javascript Trinity"></picture></p> 49<p>ï¼å¾æº <a href="https://javascriptwtf.com/" rel="noopener noreferrer" target="_blank">https://javascriptwtf.com/</a>ï¼</p> 50<ul> 51<li>Hexo æ æ³å¾å¥½æ¯æä¸äºæçä¸ªäººéæ±ï¼ä¾å¦å¤è¯è¨æ¯æãè¿äºé½éè¦æåæä»¶å¯¹é»è¾è¿è¡å®å¶æè æ¿æ¢ãéçå®å¶è¿è¡ï¼æåç°æ´å¥ç³»ç»æäºå¿ä¿®æ¯ä¹è¹ï¼å¦æææ¢æäº Hexo 52çä¸å åè½ï¼é£æè¿ç¨ Hexo å¹²ä»ä¹ï¼</li> 53</ul> 54<p>å æ¤ä¸ºäºæ»¡è¶³æçéæ±ï¼æå¼å§å¯»æ¾æ°çéæç½ç«çææ¹æ¡ã</p> 55<h1 id="æ¹æ¡éæ©">æ¹æ¡éæ©</h1> 56<p>æå¯¹æ°æ¹æ¡æä»¥ä¸è¦æ±ï¼</p> 57<ul> 58<li>è½å¤éæç°ä»£çåç«¯å·¥å ·é¾ã</li> 59<li>å好尿¨¡æ¿è½¬æ¢æ HTML/CSS/JS è¿ä¸æ¥ï¼è䏿¨¡æ¿æ ¼å¼æå¥½æ¥è¿ React JSXï¼èéæå¨æ¼æ¥å符串ã 60<ul> 61<li>使¯æä¸æ³è¦å°æ´ä¸ªç½é¡µæ¾å¨æµè§å¨ç«¯ç¨ Javascript 渲æçç¬¨éæ¹æ¡ï¼æç个人å客䏿¯å¤æçå页åºç¨ãæå¸æ Javascript æ¯å客ç½é¡µçå¯é项ï¼è䏿¯å¿ é¡»é¨åã</li> 62</ul> 63</li> 64<li>æä¸ä¸ªå¯å®å¶çç½é¡µè·¯ç±ç³»ç»ãæéè¦ä¿æè¿ç§»ååæ¯ç¯æç« ç URL ä¸åã</li> 65<li>æå¥½æä¸å¥ç®åçæç« 管çç³»ç»ï¼å¯ä»¥å è½½æç Markdown æç« å¹¶ä¸è¯»åå®ä»¬ç 66Frontmatter ä¸çä¿¡æ¯ãä½å 为æåä¸å¥æç« 管çç³»ç»ä¹å¾ç®åï¼æä»¥è¿ä¸æ¯å¿ 须项ã</li> 67</ul> 68<p>äºæ¯ç»è¿æç´¢ï¼æèèäºä»¥ä¸å ä¸ªæ¹æ¡ï¼</p> 69<h2 id="reactvuesvelte-ç-spa-å页åºç¨æ¹æ¡">ReactãVueãSvelte ç SPA å页åºç¨æ¹æ¡</h2> 70<p>React æ¯ç°ä»£å页åºç¨æ¡æ¶çç¥å¸ç·ï¼å¯ä»¥è¯´å®å ¨æ¹åäºå端çå¼åæ¹å¼ãéæ© React èªç¶ä¸ä¼å¨ä½¿ç¨ç°ä»£åç«¯å·¥å ·é¾æ¶éå°é®é¢ï¼å 为 React å°±æ¯ç°ä»£å端æ¬èº«ï¼ç»å¤§å¤æ°åç«¯å·¥å ·å¼ååå§å°±ä¼èèå°å¯¹ React çæ¯æã</p> 71<p>使¯ React æä¸ä¸ªå¾å¤§ç缺ç¹ï¼å®çæ´ä¸ªç½é¡µé½æ¯å¨æµè§å¨ä¸ç¨ Javascript 渲æçãè¿å°±æå³çï¼</p> 72<ul> 73<li>ç¨æ·æµè§ç½é¡µæ¶éè¦å è½½ä¸ä¸ªå¾å¤§ç Javascript æä»¶ï¼ç¶åæ¶èç¸å½å¤ç CPU èµæºæ¸²æåº HTML DOMã</li> 74<li>å¦æç¨æ·é¾ä»¥/䏿³ä½¿ç¨ JSï¼ä¾å¦å¼äº NoScript æä»¶ï¼æè ç½ç»è¿æ¥å¾æ ¢ï¼é£ä¹ä»ä»¬å°å®å ¨æ æ³æ¥çç½é¡µå 容ï¼è䏿¯åä¼ ç» HTML 䏿 ·ï¼å³ä½¿æ²¡æäº CSS/JS ä¹è³å°å¯ä»¥çå°æåå 容ã</li> 75</ul> 76<p>ç®åçè¯´ï¼æå¸æç¦ç¨ JS çæµè§å¨ä¹å¯ä»¥æ£å¸¸æå¼ç½é¡µï¼å¯è½ä¸¢å¤±ä¸äºä¸éè¦çåè½ï¼ãå æ¤ææé¤äº React æ¡æ¶ï¼ä»¥åä¸å ¶ç±»ä¼¼ç VueãSvelte çé¢åå页åºç¨çç½é¡µæ¡æ¶ã</p> 77<h2 id="sukka-ç-hexo--nextjs-æ¹æ¡">Sukka ç Hexo + Next.js æ¹æ¡</h2> 78<p><a href="https://blog.skk.moe/post/use-nextjs-and-hexo-to-rebuild-my-blog/" rel="noopener noreferrer" target="_blank">èå¡å¡å¨ 2022 å¹´å°èªå·±çå客ä»çº¯ Hexo è¿ç§»å°äº Hexo + Next.js æ¹æ¡</a>ãä»ä¿çäº Hexo ä½ä¸ºæç« 管çç³»ç»ä»¥å使ç¨å°éæä»¶ï¼èå客ç½é¡µæ¬èº«ä½¿ç¨ Next.js æ¡æ¶çæã</p> 79<p>ç¸æ¯äº Reactï¼Next.js ä¼é¢å 渲æåºæ´ä¸ª HTML DOMï¼å æ¤å³ä½¿ç¦ç¨ Javascript ä¹å¯ä»¥çå°ç½é¡µçåºæ¬å 容ãç½é¡µå è½½å®æåï¼Next.js æ¡æ¶ç Javascript åºåç»æµè§å¨ç«¯çéæç»ä»¶å ä¸å页åºç¨ç卿åè½ã</p> 80<p>è¿ç§æ¹æ¡ç¡®å®è½æ»¡è¶³æçãJavascript å¿ é¡»å¯éãçè¦æ±ï¼ä½æ¯ä¾ç¶æä¸äºé®é¢ï¼</p> 81<ul> 82<li>Next.js å è½½çé¢å¤ JS ä»£ç æåºæ¬ç¨ä¸å°ã 83<ul> 84<li>å页åºç¨ä¸»è¦ç¨äºä¸ç¨æ·æå¤§é交äºçç½ç«ï¼ä½æçå客以æç« å 容为主ï¼å¹¶æ²¡æé£ä¹å¤äº¤äºæ§ä»¶ã</li> 85<li>å页åºç¨çå¦ä¸ä¸ªä¸»è¦ä¼å¿æ¯æ ç¼å è½½ï¼èæä½¿ç¨ 86<a href="https://instant.page/" rel="noopener noreferrer" target="_blank">Instant.page</a>
86 å æµè§å¨ç¼åä¹å¯ä»¥åå°å¾å¿«çå è½½é度ã</li> 87</ul> 88</li> 89<li>èå¡å¡éæ© Hexo æ¯å ä¸ºä»æ¯ Hexo çæ ¸å¿å¼åè ï¼Hexo å好å¯ä»¥æ»¡è¶³ä»çéæ±ï¼èæä¸æ¯ãæä¸éè¦ Hexo ç夿çæç« 管çé»è¾ï¼å 为æä¸ä½¿ç¨è稿ï¼ä¸éè¦èªå¨å¸®æçææç« 模æ¿ï¼å ä¹ä¸ä¼ä½¿ç¨ <code>hexo generate</code> 以å¤çä»»ä½å½ä»¤ãè䏿æ¬èº«å°±ä¼å¨ Hexo 90çæç« ã页é¢å表ä¸åäºæ¬¡è¿æ»¤ï¼æ¥æ»¡è¶³æçå¤è¯è¨éæ±ã</li> 91</ul> 92<p>å æ¤æä¾ç¶æ²¡æéæ©è¿ç§æ¹æ¡ï¼èæ¯éæ©äºå¦ä¸æ¬¾æ¡æ¶ï¼</p> 93<h1 id="æç»æ¹æ¡astrojs">æç»æ¹æ¡ï¼Astro.js</h1> 94<p><a href="https://astro.build/" rel="noopener noreferrer" target="_blank">Astro.js</a> å®£ç§°å®æ¯ã为å 容ç½ç«è®¾è®¡çç½é¡µæ¡æ¶ããå®å 95ReactãNext.js çé对å页åºç¨è®¾è®¡çç½é¡µæ¡æ¶æå¾å¤§çä¸åï¼</p> 96<ul> 97<li>Astro.js 䏿¯æå页åºç¨ç夿ç»ä»¶ãä½è¿ä¹æå³ç宿¬èº«ä¸éè¦å¨æç»ç½é¡µä¸å¼å ¥é¢å¤ç JS 代ç ã妿æä¸ä¸»å¨å å ¥ JSï¼Astro.js çæçç½é¡µå°±ä¼æ¯ä¸è¡ JS 代ç 齿²¡æç纯éæç½é¡µã</li> 98<li>使¯è¿ä¹ä¸æå³çç½ç«ä¸ä¸ç¹å¤æåè½é½ä¸è½æãAstro.js ç主æåè½ Islandï¼å²å±¿ï¼ï¼å¯ä»¥å¨é¡µé¢ä¸çæä¸äºäºç¸é离çåºåï¼å¹¶å¨å ¶ä¸ä½¿ç¨ ReactãVue çæ¡æ¶ãç±äºå²å±¿é´äºç¸é离ï¼ä½ çè³å¯ä»¥æ··ç¨ä¸åç½é¡µæ¡æ¶ã</li> 99</ul> 100<p>餿¤ä»¥å¤ï¼Astro.js 乿»¡è¶³äºæçå ¶å®è¦æ±ï¼</p> 101<ul> 102<li>Astro.js çæ¨¡æ¿æ¯æ¼æ¥ç±»ä¼¼ JSX çç»ä»¶ï¼è䏿¯æ¼æ¥ HTML å符串ãå¦æä½ æ React 103å¼åç»éªï¼ä½ ä¼è§å¾æ¨¡æ¿è¯æ³å¾çæã</li> 104<li>Astro.js èªå¸¦ä¸å¥è·¯ç±ç³»ç»ï¼å¯ä»¥å®å ¨èªå®ä¹æ¯ä¸ªé¡µé¢çå°åï¼ä¹å¯ä»¥ç¨å䏿¨¡æ¿ä¸ºæ¯ç¯æç« æ¹éçæé¡µé¢ã</li> 105<li>Astro.js èªå¸¦ä¸å¥å¾ç®åçæç« 管çç³»ç»ï¼ç§°ä¸º Collectionï¼ï¼æ¯æ Markdown å 106MDXãèä¸å®é¤äºå è½½ Markdown Frontmatter 忏²æ Markdown ä¹å¤ä¸åä»»ä½äºï¼ç»ç¨æ·æå¤§çèªç±åº¦ã</li> 107<li>Astro.js åºäºç°ä»£åç«¯å·¥å ·é¾ï¼Rollup.jsï¼Vite.jsï¼Unified.js çï¼å¼åï¼å¯¹åç§æä»¶æè¯å¥½çæ¯æã</li> 108</ul> 109<p>使¯ Astro.js 䏿¯ä¸ä¸ªå¼ç®±å³ç¨çå客系ç»ï¼å®åªæ¯ä¸å¥æ¡æ¶ï¼è¿éè¦åä¸å°çå¼åãæå¨å¼ååå®¢ç³»ç»æ¶ï¼ä¹éå°äº Astro.js çä¸äºéå¶ï¼</p> 110<ul> 111<li>Astro.js 缺失ä¸ä¸ªæ¯è¾éè¦çåè½ï¼æ æ³å° Astro ç»ä»¶åç¬æ¸²ææ HTMLï¼åªè½æ¸²ææ´ä¸ªç½é¡µãè¿å¯¼è´è·åæç« æè¦æ¯è¾å°é¾ï¼ä½å¨æ´ä¸ªç½é¡µæ¸²æè¿ç¨ä¸æ¯å¯ä»¥è·åç»ä»¶ HTML 112çï¼å æ¤ææå·§å¯ä»¥å®ç°ã</li> 113<li>Astro.js ä¾ç¶æå°éç¨æ·æ æ³ææ§çç»èï¼ä¾å¦å®ä¼èªå¨å°ç½é¡µç¨å°ç JS å CSS æå ¥ 114<code><head></code> ä¸ï¼ææ æ³å¨æ¸²æä¸æ§å¶ä½ç½®ï¼åªè½å¨ HTML çæå®æ¯åååå¤çã</li> 115</ul> 116<h1 id="åå®¢ç³»ç»æ¶æ">åå®¢ç³»ç»æ¶æ</h1> 117<p>éå®äºæ¹æ¡ï¼å°±å¯ä»¥å¼å§å¼åå客系ç»äºãæçæ´ä¸ªè¿ç¨çææ commit å¯ä»¥å¨ 118<a href="https://github.com/xddxdd/blog/tree/astro-dev" rel="noopener noreferrer" target="_blank">GitHub ä¸ç astro-dev 忝</a>çå°ã</p> 119<h2 id="çæåºç¡æ¨¡æ¿">çæåºç¡æ¨¡æ¿</h2> 120<p>Astro.js æ¬èº«æä¾äºä¸ä¸ªé常ç®åçå客模æ¿ï¼å¯ä»¥ç¨ <code>npm create astro@latest</code> çæï¼</p> 121<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-bash"><span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">Need</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> to</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> install</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> the</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> following</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> packages:</span></span> 122<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">[email protected]</span></span> 123<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">Ok</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> to</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> proceed?</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> (y)</span></span> 124<span class="line"></span> 125<span class="line" style="--line-indent:1ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> astro</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Launch</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> sequence</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> initiated.</span></span> 126<span class="line"></span> 127<span class="line" style="--line-indent:3ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> dir</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Where</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> should</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">
127 we</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> create</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> your</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> new</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> project?</span></span> 128<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> ./blog</span></span> 129<span class="line"></span> 130<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> tmpl</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> How</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> would</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> you</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> like</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> to</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> start</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> your</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> new</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> project?</span></span> 131<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Use</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> blog</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> template</span></span> 132<span class="line"></span> 133<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> ts</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Do</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> you</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> plan</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> to</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> write</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> TypeScript?</span></span> 134<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Yes</span></span> 135<span class="line"></span> 136<span class="line" style="--line-indent:3ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> use</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> How</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> strict</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> should</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> TypeScript</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> be?</span></span> 137<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Strict</span></span> 138<span class="line"></span> 139<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> deps</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Install</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> dependencies?</span></span> 140<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Yes</span></span> 141<span class="line"></span> 142<span class="line" style="--line-indent:3ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> git</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Initialize</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> a</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> new</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> git</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> repository?</span></span> 143<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Yes</span></span> 144<span class="line"></span> 145<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> â</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Project</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> initialized!</span></span> 146<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> â </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Template</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> copied</span></span> 147<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> â </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> TypeScript</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> customized</span></span> 148<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> â </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Dependencies</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> installed</span></span> 149<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> â </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">
149 Git</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> initialized</span></span> 150<span class="line"></span> 151<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> next</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Liftoff</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> confirmed.</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Explore</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> your</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> project!</span></span> 152<span class="line"></span> 153<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Enter</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> your</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> project</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> directory</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> using</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> cd</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> ./blog</span></span> 154<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Run</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">
154 npm</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> run</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> dev</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> to</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> start</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> the</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> dev</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> server.</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> CTRL+C</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> to</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> stop.</span></span> 155<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Add</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> frameworks</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> like</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> react</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> or</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> tailwind</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> using</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> astro</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> add.</span></span> 156<span class="line"></span> 157<span class="line" style="--line-indent:9ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Stuck?</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Join</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> us</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> at</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> https://astro.build/chat</span></span> 158<span class="line"></span> 159<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">âââââââ®</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Houston:</span></span> 160<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">â</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> â </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> â¡</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> â </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> Good</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> luck</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> out</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> there,</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> astronaut!</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> ð</span></span> 161<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">â°ââââââ¯</span></span></code></pre> 162<h2 id="æç« æ¾ç¤º">æç« æ¾ç¤º</h2> 163<p>Astro.js èªå¸¦ä¸å¥å¾ç®åçæç« 管çç³»ç»ï¼ç§°ä¸º Collectionï¼ï¼å¯ä»¥èªå¨å è½½ Markdown 164æä»¶ï¼è¯»åå®ä»¬ Frontmatter ä¸çä¿¡æ¯ãå¨ä½¿ç¨å客模æ¿çæå®é¡¹ç®åï¼å¯ä»¥æ¾å° 165<code>src/content/config.ts</code> è¿ä¸ªæä»¶ï¼</p> 166<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-typescript"><span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">defineCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'astro:content'</span></span> 167<span class="line"></span> 168<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> blog</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
168 = </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">defineCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">({</span></span> 169<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> type:</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'content'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 170<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // Type-check frontmatter using a schema</span></span> 171<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> schema:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">object</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">({</span></span> 172<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> title:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 173<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> description:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 174<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // Transform string to Date object</span></span> 175<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> pubDate:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">coerce</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">date</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 176<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> updatedDate:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">coerce</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">date</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">().</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">optional</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 177<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> heroImage:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">().</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">optional</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 178<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }),</span></span> 179<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">})</span></span> 180<span class="line"></span> 181<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">// 注ï¼å¨ Typescript ä¸ { blog } çä»·äº { blog: blog }</span></span> 182<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> collections</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">blog</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }</span></span></code></pre> 183<p>è¿ä¸ªæä»¶å®ä¹äºä¸ä¸ªå为 <code>blog</code> ç Collectionï¼å¹¶ä¸è®¾ç½®äº 184<code>title</code>ï¼<code>description</code>ï¼<code>pubDate</code>ï¼<code>updatedDate</code>ï¼<code>heroImage</code> äºé¡¹è¦ä» Markdown 185Frontmatter ä¸è¯»åçä¿¡æ¯ãè¿äºåæ°å Hexo 使ç¨çä¸å¤ªä¸æ ·ï¼æä»¥æä»¬æå®æ¹æç±»ä¼¼ 186Hexo çæ ¼å¼ï¼</p> 187<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-typescript"><span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">
187import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">defineCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'astro:content'</span></span> 188<span class="line"></span> 189<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> article</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">defineCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">({</span></span> 190<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> type:</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'content'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 191<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // Type-check frontmatter using a schema</span></span> 192<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> schema:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">object</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">({</span></span> 193<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> title:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 194<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> categories:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 195<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> tags:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">array</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()).</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">optional</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 196<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> date:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">coerce</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">date</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 197<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> image:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> z</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">().</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">optional</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(),</span></span> 198<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }),</span></span> 199<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">})</span></span> 200<span class="line"></span> 201<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> collections</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = {</span></span> 202<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> article:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> article</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 203<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span></code></pre> 204<p>ï¼æå®é 使ç¨çæ´å¤æç <code>config.ts</code> å¯ä»¥å¨
205<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/content/config.ts" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/content/config.ts</a> 206çå°ï¼</p> 207<p>ä¸ä¸æ¥æ¯ææç« æ¾è¿ <code>src/content/[Collection åå]</code> è¿ä¸ªæä»¶å¤¹ãå ä¸ºæææç« ç 208Collection æ¹åæäº <code>article</code>ï¼æä»¥æææææç« é½å¤å¶å°äº <code>src/content/article</code> 209è¿ä¸ªæä»¶å¤¹ä¸ã</p> 210<p>æäºè¿ç» Collectionï¼æ¥ä¸æ¥å°±è¦è¯»å Collection çæç« å表并çæç½é¡µäºãAstro çå客模æ¿å¨ <code>src/pages/blog/[...slug].astro</code> æä¾äºä¸ä¸ªç®åçä¾åï¼</p> 211<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 212<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">type</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> CollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">getCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'astro:content'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">;</span></span> 213<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> BlogPost</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../layouts/BlogPost.astro'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">;</span></span> 214<span class="line"></span> 215<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> async</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPaths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">() {</span></span> 216<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'blog'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">);</span></span> 217<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">map</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">((</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ({</span></span> 218<span class="line" style="--line-indent:16ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> params:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">slug:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">slug</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 219<span class="line" style="--line-indent:16ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> props:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 220<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }));</span></span> 221<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 222<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">type</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> Props</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
222 = </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">CollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'blog'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>;</span></span> 223<span class="line"></span> 224<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Astro</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">props</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">;</span></span> 225<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">Content</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">render</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">();</span></span> 226<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 227<span class="line"></span> 228<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">BlogPost</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {...</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">data</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 229<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#808080;--shiki-light:#800000"> <</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Content</span><span style="--shiki-dark:#808080;--shiki-light:#800000"> /></span></span> 230<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">BlogPost</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 231<p>è¿ä¸ªæ¨¡æ¿å¨ <code>getStaticPaths()</code> 彿°ä¸ä½¿ç¨ <code>getCollection('blog')</code> 读å <code>blog</code> 232Collection ä¸çæææç« ï¼å¹¶ä¸ºæ¯ç¯æç« çæä¸ä¸ª <code>{params: ..., props: ...}</code> ç对象ã<code>params</code> ä¸çåæ°ä¼ç¨äºçæ URLï¼ä¾å¦ <code>slug</code> 忰就伿¿æ¢ææä»¶è·¯å¾ä¸ç 233<code>[...slug]</code> è¿ä¸é¨åãè <code>props</code> çåæ°ä¼è¢«ä¼ éç» Astro 模æ¿ï¼å¯ä»¥ç¨ 234<code>const post = Astro.props</code> è¯»åæ´ä¸ª <code>props</code> 对象ãç±äº è¿é <code>getStaticPaths()</code> 235è¿åç <code>props</code> åæ°æ¯æç« æ¬èº«ï¼æä»¥ <code>
235Astro.props</code> çè¿åå¼å°±æ¯è¿ç¯æç« ã</p> 236<p>å ä¸ºææ¹äº Collection çæ ¼å¼ï¼æä»¥æ¨¡æ¿ä¹è¦ç¸åºä¿®æ¹ï¼ä¸»è¦æ¯æ <code>blog</code> æ¹æ 237<code>article</code>ï¼</p> 238<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 239<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">type</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> CollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">getCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'astro:content'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">;</span></span> 240<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> BlogPost</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../../layouts/BlogPost.astro'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">;</span></span> 241<span class="line"></span> 242<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> async</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPaths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">() {</span></span> 243<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'article'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">);</span></span> 244<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">map</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">((</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ({</span></span> 245<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> params:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">slug:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">slug</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language:</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> undefined</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 246<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> props:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 247<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }));</span></span> 248<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 249<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">type</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> Props</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
249 = </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">CollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'article'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>;</span></span> 250<span class="line"></span> 251<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Astro</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">props</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">;</span></span> 252<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">Content</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">render</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">();</span></span> 253<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 254<span class="line"></span> 255<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">BlogPost</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {...</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">data</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 256<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#808080;--shiki-light:#800000"> <</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Content</span><span style="--shiki-dark:#808080;--shiki-light:#800000"> /></span></span> 257<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">BlogPost</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 258<span class="line"></span></code></pre> 259<p>ï¼æå®é 使ç¨çæ´å¤æç模æ¿å¯ä»¥å¨ 260<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/pages/%5B...language%5D/article/%5B...path%5D.lantian/index.astro" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/pages/%5B...language%5D/article/%5B...path%5D.lantian/index.astro</a> 261çå°ï¼</p> 262<h2 id="å¤è¯è¨">å¤è¯è¨</h2> 263<p>æä¸ä¸ä¸ªè¦å®ç°çåè½æ¯å¤è¯è¨ãæé¢å å°ä¸ææç« æ¾å¨äº <code>src/content/article/zh</code>ï¼è±ææç« æ¾å¨ <code>src/content/article/en</code>ã</p> 264<p>è¿æ ·æå°±å¯ä»¥æ ¹æ®æç« çæä»¶è·¯å¾å¤æè¯è¨äºï¼</p> 265<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-typescript"><span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> class</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 266<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> public</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> readonly</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> title</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span></span> 267<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> public</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> readonly</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span></span> 268<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> public</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> readonly</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> path</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span></span> 269<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> public</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> readonly</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> body</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span></span> 270<span class="line"></span> 271<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> constructor</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">CollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'article'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>) {</span></span> 272<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> this</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">collectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
272 = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span></span> 273<span class="line"></span> 274<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> [</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, ...</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">paths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">] = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">slug</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">split</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'/'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 275<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> path</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">paths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">join</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'/'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 276<span class="line"></span> 277<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> this</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">title</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">data</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">title</span></span> 278<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> this</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language</span></span> 279<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> this</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">path</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">path</span></span> 280<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> this</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">body</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">body</span></span> 281<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }</span></span> 282<span class="line"></span> 283<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> public</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> static</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> fromCollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">CollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'article'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>): </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 284<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> new</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 285<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }</span></span> 286<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 287<span class="line"></span> 288<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> async</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getPosts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(): </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Promise</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">[]> {</span></span> 289<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> (</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getCollection</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'article'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">))</span></span> 290<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> .</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">map</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">fromCollectionEntry</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 291<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> .</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">
291sort</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">((</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">a</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">b</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> b</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">date</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">valueOf</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">() - </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">a</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">date</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">valueOf</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">())</span></span> 292<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span></code></pre> 293<p>ï¼æå®é 使ç¨ç宿´ä»£ç å¯ä»¥å¨ 294<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/lib/posts.ts" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/lib/posts.ts</a> 295çå°ï¼</p> 296<p>è¿æ®µä»£ç ä»æç« ç <code>post.slug</code> åæ°è·åæä»¶å¨ <code>src/content/article</code> ä¸çè·¯å¾ï¼ç¶åååºè·¯å¾ç¬¬ä¸æ®µçè¯è¨ä»£ç ã</p> 297<p>æäºè¯è¨ä»£ç ï¼æä»¬å°±å¯ä»¥å¨æ¨¡æ¿ä¸æ ¹æ®è¯è¨çæç½é¡µè·¯å¾äºãæç模æ¿å¨ 298<code>src/pages/[...language]/article/[...path].lantian/index.astro</code> è·¯å¾ä¸ï¼</p> 299<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 300<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> PageLayout</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../../../components/PageLayout.astro'</span></span> 301<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> PagePost</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../../../components/PagePost.astro'</span></span> 302<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">getPosts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../../../lib/posts'</span></span> 303<span class="line"></span> 304<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> async</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPaths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">() {</span></span> 305<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
305 = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getPosts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()</span></span> 306<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">map</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">((</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">index</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ({</span></span> 307<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> params:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 308<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // éµå¾ª src/content/article ä¸çåå§è·¯å¾ï¼path æ¯æå¨åé¢ç Post ç±»ä¸å®ä¹ç</span></span> 309<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> path:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">path</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 310<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // è·¯å¾ä»¥ [...language] å½¢å¼å®ä¹å¹¶ä¸è®¾ç½®ä¸º undefined 代表çç¥è·¯å¾ä¸è¿ä¸é¡¹</span></span> 311<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // æçè±ææç« å¨ /en/article ä¸ï¼è䏿æç« å¨ /article ä¸ï¼æ²¡æåç¼</span></span> 312<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> language:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> == </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">"zh"</span></span> 313<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ? </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">undefined</span></span> 314<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> : </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 315<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 316<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> props:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 317<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 318<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 319<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }))</span></span> 320<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 321<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">type</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> Props</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = {</span></span> 322<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Post</span></span> 323<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 324<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }
324 = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Astro</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">props</span></span> 325<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 326<span class="line"></span> 327<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PageLayout</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> title</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">{</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">title</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">{</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">{</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 328<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#808080;--shiki-light:#800000"> <</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PagePost</span></span> 329<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> language</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">{</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">language</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span></span> 330<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">{</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span></span> 331<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#808080;--shiki-light:#800000"> /></span></span> 332<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PageLayout</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 333<p>ï¼æå®é 使ç¨çæ´å¤æç模æ¿å¯ä»¥å¨ 334<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/pages/%5B...language%5D/article/%5B...path%5D.lantian/index.astro" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/pages/%5B...language%5D/article/%5B...path%5D.lantian/index.astro</a> 335çå°ï¼</p> 336<p>ç±äº Hexo ç URL 乿¯æ ¹æ® Markdown æä»¶çè·¯å¾çæçï¼å æ¤æææç« ç URL é½ä¸ä¼åã</p> 337<h2 id="æç« æè¦">æç« æè¦</h2> 338<p>æäºæç« å å®¹ï¼æ¥ä¸æ¥å°±è¦å¨æç« åè¡¨ä¸æ¾ç¤ºæç« æè¦ãAstro çé»è®¤åå®¢æ¨¡æ¿æ²¡ææä¾è¿ä¸ªåè½ï¼åªä¼æ¾ç¤ºæç« æ é¢åå¾çã使¯ï¼æå¨å®ç°æè¦åè½æ¶éå°äºä¸ç¹å°é¾ã</p> 339<p>æç第ä¸ååºæ¯ï¼Astro 伿ä¾ä¸ä¸ªå°ç»ä»¶æ¸²ææ HTML çæ¥å£ï¼ç±»ä¼¼äºï¼</p> 340<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-typescript"><span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> component</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
340 = </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">PostContent</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 341<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> html</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">component</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">renderToHTML</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()</span></span> 342<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> excerpt</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">createExcerpt</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">html</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span></code></pre> 343<p>使¯æ¥æ¾ä¸ååï¼åç° Astro.js è¿æ²¡æå®ç°è¿ä¸ªåè½ï¼<a href="https://github.com/withastro/roadmap/issues/533" rel="noopener noreferrer" target="_blank">https://github.com/withastro/roadmap/issues/533</a></p> 344<p>ä¸è¿ Astro.js åªæ¯æ æ³åç¬æ¸²ææä¸ªç»ä»¶ï¼å¨æ¸²ææ´ä¸ªé¡µé¢çè¿ç¨ä¸ï¼è¿æ¯å¯ä»¥ç¨ Slot 345åè½è·åç»ä»¶ç HTML çã</p> 346<p>Astro.js ç Slot åè½ç±»ä¼¼äº React ç <code>props.children</code>ï¼ç¨äºä¼ éåç»ä»¶ãä¾å¦ï¼ææä¸ä¸ªç»ä»¶ <code>PostExcerpt.astro</code>ï¼</p> 347<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 348<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">createExcerpt</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../lib/utils'</span></span> 349<span class="line"></span> 350<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> html</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> Astro</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">slots</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">render</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'default'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 351<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> excerpt</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">createExcerpt</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">html</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 352<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 353<span class="line"></span> 354<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">{</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">excerpt</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 355<span class="line"></span></code></pre> 356<p>ï¼æä½¿ç¨ç宿´ç»ä»¶å¯ä»¥å¨
357<a href="https://github.com/xddxdd/blog/blob/master/src/components/fragments/PostExcerpt.astro" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/master/src/components/fragments/PostExcerpt.astro</a> 358çå°ï¼</p> 359<p>妿æä»¬åè¿ä¸ªç»ä»¶ä¼ éä¸ä¸ªåç»ä»¶ï¼</p> 360<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 361<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 362<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PostExcerpt</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 363<span class="line" style="--line-indent:1ch"><span style="--shiki-dark:#808080;--shiki-light:#800000"> <</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">A really really long post content...</span><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 364<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PostExcerpt</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 365<p><code>PostExcerpt.astro</code> ç»ä»¶å°±å¯ä»¥éè¿ <code>await Astro.slots.render('default')</code> è·å 366<code><p>A really really long post content...</p></code> è¿ä¸ªåç»ä»¶ç HTML 渲æç»æäºã</p> 367<p>æ¥ä¸æ¥ï¼å®å°±å¯ä»¥è¿ä¸æ¥è°ç¨ <code>createExcerpt</code> 彿°ï¼ä»æç« ç宿´ HTML 䏿åæè¦ã</p> 368<p>ï¼æ´è¯¦ç»ç Slot åè½ä»ç»è¯·åé 宿¹ææ¡£ï¼<a href="https://docs.astro.build/zh-cn/basics/astro-components/#slots" rel="noopener noreferrer" target="_blank">https://docs.astro.build/zh-cn/basics/astro-components/#slots</a>ï¼</p> 369<h2 id="å页">å页</h2> 370<p>ä¸ä¸æ¥æ¯å®ç°ä¸»é¡µæç« å表çå页ãAstro çé»è®¤å客模æ¿ä¼å°æææç« æ¾ç¤ºå¨åä¸é¡µä¸ï¼å¦æåå®¢ä¸æç« è¾å¤ï¼ç½é¡µä¼é常é¿ï¼é¾ä»¥å¯¼èªãå æ¤æå å®ç°äºä¸ä¸ªå页彿°ï¼å°æç« å表æåæ 10 ç¯æç« çå°æ®µï¼</p> 371<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-typescript"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">// æ¯é¡µæç« æ°</span></span> 372<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> POSTS_PER_PAGE</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658">10</span></span> 373<span class="line"></span> 374<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">// æç模æ¿ä½¿ç¨çå页忰</span></span> 375<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> type</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> PaginationProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = {</span></span> 376<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> numPages</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">number</span><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // æ»é¡µæ°</span></span> 377<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> currentPage</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">number</span><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // å½å页ç </span></span> 378<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> basePath</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // åºç¡è·¯å¾ï¼æç»è·¯å¾æ¯ ${basePath}/page/${currentPage}</span></span> 379<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 380<span class="line"></span> 381<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> type</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> PaginatedProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = {</span></span> 382<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> pagination</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PaginationProps</span><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // å½åå页çåæ°</span></span> 383<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">[] </span><span style="--shiki-dark:#6A9955;--shiki-light:#008000">
383// å½åå页çæç« å表</span></span> 384<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 385<span class="line"></span> 386<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPathsForPaginate</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span></span> 387<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">[],</span></span> 388<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> basePath</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 389<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> additionalParams</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">?: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Record</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>,</span></span> 390<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> additionalProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">?: </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">Record</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"><</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">string</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">any</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">></span></span> 391<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) {</span></span> 392<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // æ»é¡µæ°</span></span> 393<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> numPages</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Math</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">ceil</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">length</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> / </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">POSTS_PER_PAGE</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 394<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> [...</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">Array</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">numPages</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">).</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">keys</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()].</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">map</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">i</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> =></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ({</span></span> 395<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> params:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 396<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // å¤è¯è¨æ¯æçç¥</span></span> 397<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> language:</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> undefined</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 398<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // å¨è·¯å¾ä¸æ·»å page/2ï¼page/3 è¿æ ·ç页ç </span></span> 399<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // 妿æ¯ç¬¬ä¸é¡µï¼å°±ä¸ç¨å page/1 äº</span></span> 400<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> page_prefix:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> i</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> == </span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658">0</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ? </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">undefined</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
400 : </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">`page/</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">${</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">i</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> +</span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658"> 1</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">`</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 401<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ...</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">additionalParams</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 402<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 403<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> props:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> <</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PaginatedProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>{</span></span> 404<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> pagination:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> <</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PaginationProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">>{</span></span> 405<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> numPages:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> numPages</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 406<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> currentPage:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> i</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> + </span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658">1</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 407<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> basePath:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> basePath</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 408<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 409<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> posts:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> postsForLanguage</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">slice</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span></span> 410<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> i</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> * </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">POSTS_PER_PAGE</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 411<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> (</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">i</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> + </span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658">1</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) * </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">POSTS_PER_PAGE</span></span> 412<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ),=</span></span> 413<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ...</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">additionalProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 414<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 415<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }))</span></span> 416<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span></code></pre> 417<p>ï¼æå®é 使ç¨ç宿´ä»£ç å¯ä»¥å¨
418<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/lib/posts.ts" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/lib/posts.ts</a> 419çå°ï¼</p> 420<p>ç¶åä»é¡µé¢æ¨¡æ¿ä¸è°ç¨è¿ä¸ªå页彿°ãæç主页æç« å表模æ¿ä½äº 421<code>src/pages/[...language]/[...page_prefix]/index.astro</code>ï¼</p> 422<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 423<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">getPosts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">getStaticPathsForPaginate</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../../lib/posts'</span></span> 424<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">import</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> type</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">PaginatedProps</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '../../../lib/posts'</span></span> 425<span class="line"></span> 426<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> async</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPaths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">() {</span></span> 427<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getPosts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()</span></span> 428<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPathsForPaginate</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">''</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 429<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // 第ä¸é¡µæ¶ï¼å½æ°è¿å params ä¸ç page_prefix 为 undefinedï¼æ¤æ¶è·¯å¾ä¸æ²¡æé¡µç </span></span> 430<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // 第äºé¡µå¼å§ï¼page_prefixä¼æå ¥è·¯å¾ä¸ï¼å½¢æ /page/2 çè·¯å¾</span></span> 431<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 432<span class="line"></span> 433<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">type</span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99"> Props</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#4EC9B0;--shiki-light:#267F99">PaginatedProps</span></span> 434<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }
434 = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Astro</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">props</span></span> 435<span class="line"></span> 436<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">// å ¶ä½é»è¾çç¥</span></span></code></pre> 437<p>è¿æ ·æä»¬å°±çæäº <code>/</code> è¿ä¸ªç¬¬ä¸é¡µçè·¯å¾ï¼ä»¥å <code>/page/2</code>ï¼<code>/page/3</code> çå ¶ä½é¡µç çè·¯å¾ã</p> 438<h2 id="å¹é -hexo-ç-url">å¹é Hexo ç URL</h2> 439<p>ä¸ä¸æ¥æ¯å®ç° Hexo èªå¨çæçå ¶å®é¡µé¢ï¼ä¾å¦åç±»é¡µé¢ 440<code>/category/[åç±»å]</code>ï¼<code>/category/[åç±»å]/page/[页ç ]</code>ï¼ä»¥åæ ç¾é¡µé¢ 441<code>/tag/[æ ç¾å]</code>ï¼<code>/tag/[æ ç¾å]/page/[页ç ]</code>ã</p> 442<p>è¿äºé¡µé¢é¤äºè¦æ ¹æ®åç±»è¿æ»¤æç« ä¹å¤ï¼å ¶ä½å®ç°å主页æç« å表并æ åºå«ã以å类页é¢ä¸ºä¾ï¼æä»¬å建 443<code>src/pages/[...language]/category/[category]/[...page_prefix]/index.astro</code> è¿ä¸ªæ¨¡æ¿æä»¶ï¼</p> 444<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 445<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> async</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPaths</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">() {</span></span> 446<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> categories</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = [</span></span> 447<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ...</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">new</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> Set</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Object</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">entries</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">CATEGORY_MAP</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">).</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">map</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(([</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">_</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">v</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">]) </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> v</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)),</span></span> 448<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ]</span></span> 449<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">await</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getPosts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()</span></span> 450<span class="line"></span> 451<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> categories</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">flatMap</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">category</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> =></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 452<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> const</span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1"> postsForCategory</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
452 = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">filter</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span></span> 453<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> =></span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> post</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">category</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> == </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">category</span></span> 454<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> )</span></span> 455<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> return</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> getStaticPathsForPaginate</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span></span> 456<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // å½ååç±»çæææç« </span></span> 457<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> postsForCategory</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 458<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // åç±»çåºç¡è·¯å¾ï¼ç¨äºæä¾ç»å页鿩ç»ä»¶</span></span> 459<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> `/category/</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">${</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">categoryInUrl</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">}</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">`</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">,</span></span> 460<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // additionalParams åæ°ï¼å°åç±»å å° URL ä¸</span></span> 461<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">category:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> category</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> },</span></span> 462<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // additionalProps åæ°ï¼å°åç±»åå å° Astro.props.ä¸</span></span> 463<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">category:</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> category</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> }</span></span> 464<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> )</span></span> 465<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> })</span></span> 466<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 467<span class="line"></span> 468<span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">const</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> { </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">posts</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">, </span><span style="--shiki-dark:#4FC1FF;--shiki-light:#0070C1">category</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> } = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">Astro</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">props</span></span> 469<span class="line"></span> 470<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">// å ¶ä½é»è¾çç¥</span></span></code></pre> 471<p>è¿æ ·ï¼æä»¬å¯ä»¥å°ææè¯¥åç±»çæç« æ¾ç¤ºå¨ <code>/category/[åç±»å]</code> æè 472<code>/category/[åç±»å]/page/[页ç ]</code> è¿ä¸ªè·¯å¾ä¸äºã</p> 473<h2 id="islandå²å±¿åè½">Islandï¼å²å±¿ï¼åè½</h2> 474<p>Astro.js ç主æåè½ Islandï¼å²å±¿ï¼ï¼å¯ä»¥ä»¥ <code>.astro</code>
474 æä»¶ä¸ºåä½ï¼å¨é¡µé¢ä¸çæä¸äºäºç¸é离çåºåãè¿äºé离åè½å æ¬ï¼</p> 475<ul> 476<li>CSS é离ãå设æå¨ <code>src/components/a.astro</code> 䏿·»å 以ä¸ç HTML/CSS 代ç ï¼</li> 477</ul> 478<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-html"><span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> class</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#CE9178;--shiki-light:#0000FF">"my-class"</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">Hello World</span><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 479<span class="line"></span> 480<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">style</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 481<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D7BA7D;--shiki-light:#800000"> .my-class</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF"> {</span></span> 482<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> font-size</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">: </span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658">100px</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">;</span></span> 483<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF"> }</span></span> 484<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">style</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 485<p>Astro.js ä¼å¯¹ä¸è¿° HTML å CSS è¿è¡å¤çï¼å¹¶æä¸ä¸ä¸ª <code>data-astro-cid</code> å¼å¤´çæ ç¾ï¼</p> 486<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-html"><span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> class</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#CE9178;--shiki-light:#0000FF">"my-class"</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> data-astro-cid-123456</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">Hello World</span><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">p</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 487<span class="line"></span> 488<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">style</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 489<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D7BA7D;--shiki-light:#800000"> .my-class</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">[</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000">data-astro-cid-123456</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">] {</span></span> 490<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> font-size</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">: </span><span style="--shiki-dark:#B5CEA8;--shiki-light:#098658">100px</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">;</span></span> 491<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF"> }</span></span> 492<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">style</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 493<p>è¿æ ·è¿ä¸ª CSS å°±åªå¯¹ä¸é¢è¿ä¸ª <code>p</code> æ ç¾çæäºã</p> 494<p>è¿ä¸ª <code>data-astro-cid</code> æ ç¾å¯¹äºæææ¥èª <code>
494src/components/a.astro</code> ç HTML/CSS 齿¯ç¸åçï¼å æ¤ä¸é¢ç CSS ä¼åºç¨å°ææçæ¥èª <code>a.astro</code> ç HTMLã使¯å设ææå¦ä¸ä¸ªç»ä»¶ <code>src/components/b.astro</code>ï¼å®ä¼æä¸ä¸ªä¸åçæ ç¾ï¼ä¾å¦ 495<code>data-astro-cid-654321</code>ï¼è¿æ · <code>a.astro</code> ç CSS å°±ä¸ä¼å¯¹ <code>b.astro</code> çæäºã</p> 496<p>è¿å¨å CSS æ¶æ¯ä¸ä¸ªé常好ç¨çåè½ï¼è°æ´ç½é¡µä¸ä¸ªé¨åç CSS æ¶ä¸ç¨æ å¿å½±åå°å ¶ä½é¨åçææäºã</p> 497<ul> 498<li>Javascript ç»ä»¶é离</li> 499</ul> 500<p>妿æç Astro 模æ¿ä¸æ Javascript 代ç ï¼</p> 501<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 502<span class="line"></span> 503<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 504<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">div</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> id</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">"test"</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">Hello world</span><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">div</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 505<span class="line"></span> 506<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">script</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 507<span class="line"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">document</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">getElementById</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">"test"</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">).</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">innerHTML</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> =</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> "Hi there"</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">;</span></span> 508<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">script</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 509<p>Astro.js ä¼èªå¨ä¸ºè¿ä¸ªç»ä»¶çæä¸ä¸ªå²å±¿ï¼å¹¶å¨ç½é¡µå è½½å®æåï¼åæ§è¡è¿ä¸ªå²å±¿ç 510Javascript 代ç ãè¿ä¸ªå²å±¿ä¸ç½é¡µçå ¶ä½é¨åå®å ¨ç¬ç«ï¼å æ¤ä¸ä¼ææ ¢å ¶ä½é¨åçå è½½é度ã</p> 511<p>é¤äºæé«å è½½é度ï¼è¿ä¸ªç¹æ§è¿ç®åäº <code>window.onload</code> ç使ç¨ãå¨ä¼ ç»å端ä¸ï¼å¦ææä»¬æ³å¨ç½é¡µå è½½æ¶åæ§è¡ä»£ç ï¼å¯ä»¥è¿æ ·åï¼</p> 512<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-javascript"><span class="line"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">onload</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = () </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 513<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> console</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">log</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'Hello World'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 514<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span></code></pre> 515<p>ä½å¦ææä»¬æå¤ä¸ªå½æ°éè¦æ§è¡å¢ï¼å¦æç®åå°è¦ç <code>window.onload</code> ä¼å¯¼è´åä¸ä¸ªå½æ°ä¸è¢«æ§è¡ï¼</p> 516<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-javascript"><span class="line"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">onload</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = () </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 517<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> console</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">log</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'è¿ä¸ªå½æ°ä¸ä¼è¢«æ§è¡'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 518<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 519<span class="line"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">onload</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = () </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 520<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> console</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">log</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'Hello World'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 521<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span></code></pre> 522<p>å æ¤æä»¬éè¦ä¸äºæ´å¤æçå¤çï¼</p> 523<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-javascript"><span class="line"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">function</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> addLoadEvent</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">o</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">) {</span></span> 524<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // è®°å½å åç window.onload</span></span> 525<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> var</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> n</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">
525 = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">onload</span></span> 526<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> 'function'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> != </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">typeof</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">onload</span></span> 527<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ? (</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">onload</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">o</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 528<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> : (</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">window</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">onload</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> = </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">function</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> () {</span></span> 529<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // 妿ä¹åè®¾ç½®äº window.onloadï¼å°±åæ¶æ§è¡å å设置ç彿°</span></span> 530<span class="line" style="--line-indent:8ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> n</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> && </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">n</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(), </span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">o</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">()</span></span> 531<span class="line" style="--line-indent:6ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> })</span></span> 532<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">}</span></span> 533<span class="line"></span> 534<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">addLoadEvent</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(() </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 535<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> console</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">log</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'è¿ä¸ªå½æ°ç°å¨ä¼è¢«æ§è¡'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 536<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">})</span></span> 537<span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">addLoadEvent</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(() </span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF">=></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> {</span></span> 538<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> console</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">log</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">'Hello World'</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">)</span></span> 539<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">})</span></span></code></pre> 540<p>å¯è¡ï¼ä½æç¹éº»ç¦ãä¸è¿æäº Astro.jsï¼ä¸è¿°è¿äºæµç¨é½ä¼è¢«èªå¨åï¼</p> 541<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-astro"><span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 542<span class="line"></span> 543<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">---</span></span> 544<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">div</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#E50000"> id</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">=</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">
544"test"</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">Hello world</span><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">div</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 545<span class="line"></span> 546<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"><</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">script</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span> 547<span class="line"><span style="--shiki-dark:#6A9955;--shiki-light:#008000">// è¿æ®µä»£ç ä¼å¨æ´ä¸ªç½é¡µå è½½å®æååæ§è¡ï¼æ éå ¶ä½è®¾ç½®</span></span> 548<span class="line"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">document</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">.</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">getElementById</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">(</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515">"test"</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">).</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080">innerHTML</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> =</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> "Hi there"</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000FF">;</span></span> 549<span class="line"><span style="--shiki-dark:#808080;--shiki-light:#800000"></</span><span style="--shiki-dark:#569CD6;--shiki-light:#800000">script</span><span style="--shiki-dark:#808080;--shiki-light:#800000">></span></span></code></pre> 550<p>ä¸é¢æ¯æä½¿ç¨å²å±¿å è½½ Javascript ç两个ä¾åï¼</p> 551<ul> 552<li><code>WalineComment.astro</code>ï¼ç¨äºå è½½ Waline è¯è®ºç³»ç»çè¯è®ºæ¡ï¼<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/components/fragments/WalineComment.astro" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/components/fragments/WalineComment.astro</a></li> 553<li><code>WalineRecentComments.astro</code>ï¼ç¨äºæ¾ç¤º Waline è¯è®ºç³»ç»çè¿æè¯è®ºï¼<a href="https://github.com/xddxdd/blog/blob/astro-dev/src/components/fragments/WalineRecentComments.astro" rel="noopener noreferrer" target="_blank">https://github.com/xddxdd/blog/blob/astro-dev/src/components/fragments/WalineRecentComments.astro</a></li> 554</ul> 555<h2 id="åå¤çæä»¶ä¾css-å è">åå¤çæä»¶ï¼ä¾ï¼CSS å èï¼</h2> 556<p>Astro.js 䏻页䏿ä¸ä¸ªæä»¶ï¼Integrationsï¼åè¡¨ï¼æä¾äºå¾å¤å¯ä»¥æä¾é¢å¤åè½çæä»¶ï¼<a href="https://astro.build/integrations/" rel="noopener noreferrer" target="_blank">https://astro.build/integrations/</a></p> 557<p>è¿éæä»¥ä¸ä¸ªæä»¶ <a href="https://github.com/Playform/Inline" rel="noopener noreferrer" target="_blank">Inline</a> 为ä¾ï¼å®ä½¿ç¨ 558Google ç <a href="https://github.com/GoogleChromeLabs/critters" rel="noopener noreferrer" target="_blank">critters</a> 项ç®ï¼èªå¨å°å½å页é¢ç¨å°ç CSS å èå°ç½é¡µä¸ï¼ä»¥æé«ç½é¡µå è½½é度ã</p> 559<p>é¦å ä» NPM å®è£ Inline æä»¶ï¼</p> 560<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-bash"><span class="line"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26">npm</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> install</span><span style="--shiki-dark:#569CD6;--shiki-light:#0000FF"> --save</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> @playform/inline</span></span></code></pre> 561<p>ç¶åä¿®æ¹ <code>astro.config.ts</code>ï¼å°æä»¶æ·»å å° <code>defineConfig</code> ç <code>integrations</code> é 置项ä¸ï¼</p> 562<pre class="shiki shiki-themes dark-plus light-plus" style="--shiki-dark:#D4D4D4;--shiki-light:#000000;--shiki-dark-bg:#1E1E1E;--shiki-light-bg:#FFFFFF" tabindex="0"><code class="language-typescript"><span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">
562import</span><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> inline</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> from</span><span style="--shiki-dark:#CE9178;--shiki-light:#A31515"> '@playform/inline'</span></span> 563<span class="line"></span> 564<span class="line"><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB">export</span><span style="--shiki-dark:#C586C0;--shiki-light:#AF00DB"> default</span><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> defineConfig</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">({</span></span> 565<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#9CDCFE;--shiki-light:#001080"> integrations:</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> [</span></span> 566<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // ...</span></span> 567<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#DCDCAA;--shiki-light:#795E26"> critters</span><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">({}),</span></span> 568<span class="line" style="--line-indent:4ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // ...</span></span> 569<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000"> ],</span></span> 570<span class="line" style="--line-indent:2ch"><span style="--shiki-dark:#6A9955;--shiki-light:#008000"> // ...</span></span> 571<span class="line"><span style="--shiki-dark:#D4D4D4;--shiki-light:#000000">})</span></span></code></pre> 572<p>ä¹åï¼ä½ ç¨ <code>astro build</code> å½ä»¤çæçç½é¡µé½ä¼èªå¨è¢«ä¼åã</p> 573<p>类似çï¼Astro è¿æä¾äºå¾å¤å¸¸ç¨çæä»¶ï¼</p> 574<ul> 575<li>MDX æ¯æï¼<a href="https://docs.astro.build/en/guides/integrations-guide/mdx/" rel="noopener noreferrer" target="_blank">https://docs.astro.build/en/guides/integrations-guide/mdx/</a></li> 576<li>çæ 577Sitemapï¼<a href="https://docs.astro.build/en/guides/integrations-guide/sitemap/" rel="noopener noreferrer" target="_blank">https://docs.astro.build/en/guides/integrations-guide/sitemap/</a></li> 578<li>React æ¯æï¼<a href="https://docs.astro.build/en/guides/integrations-guide/react/" rel="noopener noreferrer" target="_blank">https://docs.astro.build/en/guides/integrations-guide/react/</a></li> 579</ul> 580<p>ä½ å¯ä»¥ç¨ç±»ä¼¼çæ¹æ³ï¼é常ç®åå°å è½½è¿äºæä»¶ã</p> 581<h1 id="æ»ç»">æ»ç»</h1> 582<p>æå·²ç»å¨ 2024 å¹´ 3 æ 18 æ¥å°æ´ä¸ªå客系ç»è¿ç§»å° Astro.jsãæ´ä¸ªè¿ç§»è¿ç¨ä¸ï¼ææç½é¡µ URL åä¿æä¸åï¼æçç½é¡µä¸»é¢æ¨¡æ¿ä¹åæ ·è¿ç§»æåã对äºè®¿å®¢æ¥è¯´ï¼æ´ä¸ªå客çå å®¹ãæ ·å¼ååè½åºè¯¥æ²¡æä»»ä½ååã使¯å¯¹äºææ¥è¯´ï¼æ´å¥½çå¼åä½éªæå©äºææ¹ä¾¿å°å®ç°æ´å¤æçåè½ï¼æµè¯ææ°çåç«¯å·¥å ·ï¼ä»¥åè¿è¡è¿ä¸æ¥çæ§è½ä¼åã</p> 583<p>æ´ä¸ªè¿ç¨çææ commit å¯ä»¥å¨ 584<a href="https://github.com/xddxdd/blog/tree/astro-dev" rel="noopener noreferrer" target="_blank">GitHub ä¸ç astro-dev 忝</a>çå°ã</p></div><div class="clearfix" id="post-navi" data-astro-cid-wlifdhof=""><div class="float-end text-end" data-astro-cid-wlifdhof=""><a href="/article/modify-computer/nixos-low-ram-vps.lantian/" title="NixOS ç³»åï¼äºï¼ï¼å¶ä½å°å å VPS ç DD ç£çéå" data-astro-cid-wlifdhof="">NixOS ç³»åï¼äºï¼ï¼å¶ä½å°å å VPS ç DD ç£çéå</a><br data-astro-cid-wlifdhof="">ä¸ä¸ç¯æç« »</div><div class="float-start text-start position-absolute" data-astro-cid-wlifdhof="">« ä¸ä¸ç¯æç« <br data-astro-cid-wlifdhof=""><a href="/article/modify-computer/build-custom-android-kernel-with-nix.lantian/" title="ç¨ Nix ç¼è¯èªå®ä¹ Android å æ ¸" data-astro-cid-wlifdhof="">ç¨ Nix ç¼è¯èªå®ä¹ Android å æ ¸</a></div></div><div id="waline" data-waline-language="zh-CN" data-waline-path="/article/modify-website/migrate-blog-to-astro-js.lantian"></div>
584<script type="module" src="/assets/WalineComment.astro_astro_type_script_index_0_lang.SJyMLKEa.js"></script>
584</div></div></article></div><aside class="d-none d-xl-block" data-astro-cid-pgt5l3fs=""><section class="widget"><h3>ææ°æç« </h3><ul class="list-unstyled"><li>05-13 <a href="/article/fun/ai-agent-bankrupted-their-operator-scan-dn42lantian.lantian/">AI Agent è¯å¾æ«æ DN42 æ¶æä¸»äººæç ´äº§äº</a></li><li>04-13 <a href="/article/modify-computer/modify-filezilla-workaround-bambu-3d-printer-ftp-issue.lantian/">éæ¹ FileZilla è§£å³æç«¹ 3D æå°æºç FTP é®é¢</a></li><li>12-07 <a href="/article/modify-website/dn42-flapalerted-reduce-flapping.lantian/">å¨ DN42 ä¸ä½¿ç¨ FlapAlerted æå¶ Flapping</a></li><li>07-20 <a href="/article/modify-computer/legal-lte-network-at-home-with-open5gs.lantian/">ç¨ Open5GS æå»ºåæ³ç LTE ç½ç»</a></li><li>06-27 <a href="/article/modify-computer/sidestore-without-stosvpn-across-lan.lantian/">å¨å
ç½ä¸å
StosVPN ä½¿ç¨ SideStore</a></li><li>05-19 <a href="/article/modify-computer/nix-logarithmetic-math-library-from-zero.lantian/">ä»é¶å¼å§å®ç° Nix 对æ°å½æ°åº</a></li><li>04-06 <a href="/article/modify-computer/legal-lte-network-at-home-for-100-bucks.lantian/">$100ï¼DIY æå»ºåæ³ç LTE ç½ç»</a></li><li>02-10 <a href="/article/modify-computer/build-custom-android-kernel-with-nix.lantian/">ç¨ Nix ç¼è¯èªå®ä¹ Android å
æ ¸</a></li><li>04-20 <a href="/article/modify-website/migrate-blog-to-astro-js.lantian/">ä½¿ç¨ Astro.js éææçå客</a></li><li>12-16 <a href="/article/modify-computer/nixos-low-ram-vps.lantian/">NixOS ç³»åï¼äºï¼ï¼å¶ä½å°å
å VPS ç DD ç£çéå</a></li><li>09-20 <a href="/article/modify-computer/nix-trigonometric-math-library-from-zero.lantian/">ä»é¶å¼å§å®ç° Nix ä¸è§å½æ°åº</a></li><li>05-29 <a href="/article/random-notes/pipewire-sigkill-fix.lantian/">è§£å³ Pipewire 被 SIGKILL çé®é¢</a></li><li>05-12 <a href="/article/modify-website/how-to-kill-the-dn42-network.lantian/">å¦ä½å¼ç DN42 ç½ç»ï¼2023-05-12 æ´æ°ï¼</a></li><li>05-08 <a href="/article/modify-computer/laptop-muxed-nvidia-passthrough.lantian/">Optimus MUXed ç¬è®°æ¬ä¸ç NVIDIA èææºæ¾å¡ç´éï¼2023-05 æ´æ°ï¼</a></li><li>04-17 <a href="/article/random-notes/fix-china-telecom-roaming-no-4g-on-aosp-rom.lantian/">ä¿®æ¹ APN è§£å³ AOSP ROM ä¸ä¸å½çµä¿¡æ æ³ 4G 漫游é®é¢</a></li></ul></section><section class="widget"><h3>ææ°è¯è®º</h3><ul class="list-unstyled" id="recent-comments"><li><a href="#">Loading...</a></li></ul></section>
584<script type="module" src="/assets/WalineRecentComments.astro_astro_type_script_index_0_lang.IH-4y8rJ.js"></script>
584<section class="widget"><h3>å
¶å®åè½</h3><ul class="list-unstyled"><li><i class="fas fa-fw fa-rss"></i> <a href="/rss2.zh.xml" target="_blank">RSS 订é
</a> | <a href="/feed.zh.xml" target="_blank">Atom</a> | <a href="/feed.zh.json" target="_blank">JSON</a></li><li><i class="fas fa-fw fa-rss"></i> <a href="/rss2.xml" target="_blank">RSS 订é
</a> | <a href="/feed.xml" target="_blank">Atom</a> | <a href="/feed.json" target="_blank">JSON</a>(å
¨è¯è¨)</li><li><i class="fas fa-fw fa-globe"></i> <a href="https://stats.uptimerobot.com/NLYPbrSal6" target="_blank">æå¡å¨ç¶æ</a></li><li><i class="fas fa-fw fa-sitemap"></i> <a href="https://lg.lantian.pub" target="_blank">DN42 èç¹ç¶æ</a></li><li><i class="fas fa-fw fa-link"></i> <a href="gopher://lantian.pub" target="_blank">ä½¿ç¨ Gopher å议访é®</a></li></ul></section><section class="widget"><h3>åæ
龿¥</h3><ul class="list-unstyled"><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://0x7f.cc">0x7f Blog ð</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://alanyhq.com">Alanyhq</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://blog.cas7.moe">Blog of Moecast</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://jerryxiao.cc">JerryXiao</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://snli.org">Shucheng Li</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://sangsir.com">SangSir | èºæ¯çç䏿µå¥è©</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://yuetau.net">YuetAu's Spot</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="https://blog.baoshuo.ren/?utm_source=friends">å®ç¡å客</a></li><li><i class="fas fa-fw fa-link"></i> <a target="_blank" href="http://foreverblog.cn">åå¹´ä¹çº¦</a></li></ul></section></aside></div><footer class="clearfix" data-astro-cid-3jm3l2uw=""><div id="copyright" class="float-end text-end" data-astro-cid-3jm3l2uw=""><i class="fas fa-copyright" data-astro-cid-3jm3l2uw=""></i>2012-2026Lan Tian @ Blog<br data-astro-cid-3jm3l2uw=""><small data-astro-cid-3jm3l2uw="">åºäº Astro v7.2.2 æå»º @ 2026-09-24 05:42:06</small></div>
584<script type="module" src="/assets/PlausibleAnalytics.astro_astro_type_script_index_0_lang.CCqn5Tkb.js"></script>
584</footer></div></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.