fix blog url & giscus

Author: maindraster

astro.config.mjs

@@ -4,19 +4,33 @@ import starlightImageZoom from 'starlight-image-zoom';
 import remarkMath from "remark-math";
 import rehypeMathjax from 'rehype-mathjax';
 import starlightBlog from 'starlight-blog'
+import starlightGiscus from 'starlight-giscus'
 
 import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://maindraster.github.io',
+  site: 'https://maindraster.netlify.app',
   base: "/",
 
   integrations: [starlight({
-    plugins: [starlightBlog({
+    plugins: [
+      starlightGiscus({
+        repo: 'maindraster/docgiscus',
+        repoId: 'R_kgDON-oOVQ',
+        category: 'Announcement',
+        categoryId: 'DIC_kwDON-oOVc4CnRoe',
+        theme:'catppuccin_latte'
+    }),
+      starlightBlog({
       title: "博客",
       postCount: 5,
       recentPostCount: 10,
+      blog: {
+        dir: 'src/content/blog',
+        // 确保路由模式正确
+        routePattern: '/blog/[...slug]'
+      }
     }),starlightImageZoom(),
     // starlightUtils({
     //   navLinks: {
@@ -34,8 +48,9 @@ export default defineConfig({
       }
     },
     customCss: [
-      './src/tailwind2.css',
+    './src/tailwind2.css',
     // 你的自定义 CSS 文件的相对路径
+    './src/styles/giscus.css',
     './src/styles/root.css', 
 	  './src/styles/search.css', 
     './src/styles/iconfont.css', 
@@ -93,3 +108,19 @@ export default defineConfig({
     remarkRehype: { footnoteLabel: '参考', footnoteBackLabel: '返回正文' },
   }
 });
+
+// <script src="https://giscus.app/client.js"
+//         data-repo="maindraster/docgiscus"
+//         data-repo-id="R_kgDON-oOVQ"
+//         data-category="Announcements"
+//         data-category-id="DIC_kwDON-oOVc4CnRoe"
+//         data-mapping="title"
+//         data-strict="0"
+//         data-reactions-enabled="1"
+//         data-emit-metadata="0"
+//         data-input-position="bottom"
+//         data-theme="light_tritanopia"
+//         data-lang="zh-CN"
+//         crossorigin="anonymous"
+//         async>
+// </script>

package.json

@@ -30,6 +30,7 @@
     "remark-math": "^6.0.0",
     "sharp": "^0.33.5",
     "starlight-blog": "^0.17.2",
+    "starlight-giscus": "^0.5.1",
     "starlight-image-zoom": "^0.8.0",
     "starlight-showcases": "^0.2.0",
     "starlight-site-graph": "^0.1.8",

pnpm-lock.yaml

@@ -1,9 +1,12 @@
 import { defineCollection } from 'astro:content';
 import { docsSchema,i18nSchema } from '@astrojs/starlight/schema';
+import { docsLoader} from '@astrojs/starlight/loaders';
 import { blogSchema } from 'starlight-blog/schema';
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema({ 
+	docs: defineCollection({ 
+		loader: docsLoader(),
+		schema: docsSchema({ 
 		extend: (context) => blogSchema(context)
 	}) }),
 	i18n: defineCollection({ type: 'data', schema: i18nSchema() }),

src/content/config.ts

@@ -0,0 +1,40 @@
+// src/scripts/giscus-theme.js
+function updateGiscusTheme() {
+    const frame = document.querySelector('iframe.giscus-frame');
+    if (frame) {
+      // 从 localStorage 获取当前主题
+      const currentTheme = localStorage.getItem('starlight-theme') || 'auto';
+      // 根据主题设置对应的 giscus 主题
+      const giscusTheme = currentTheme === 'dark' ? 'dark_dimmed' : 'light';
+      
+      frame.contentWindow.postMessage(
+        {
+          giscus: {
+            setConfig: {
+              theme: giscusTheme
+            }
+          }
+        },
+        'https://giscus.app'
+      );
+    }
+  }
+  
+  // 监听主题选择器变化
+  document.addEventListener('DOMContentLoaded', function() {
+    const themeSelect = document.querySelector('starlight-theme-select');
+    if (themeSelect) {
+      themeSelect.addEventListener('change', updateGiscusTheme);
+    }
+  });
+  
+  // 监听 localStorage 变化
+  window.addEventListener('storage', (e) => {
+    if (e.key === 'starlight-theme') {
+      updateGiscusTheme();
+    }
+  });
+  
+  // 初始化时执行一次
+  document.addEventListener('DOMContentLoaded', updateGiscusTheme);
+  

src/scripts/theme.js

@@ -80,4 +80,5 @@ top: 0;
   justify-content: center;
   align-items: center;
   height: 400px; 
-}
+}
+