fix: correctly correspond to the og of each article

src/config.ts

@@ -31,7 +31,8 @@ export const themeConfig: ThemeConfig = {
       // background color
       background: 'oklch(96% 0.005 298)',
       // code block theme
-      codeTheme: 'github-light', // available themes: https://shiki.style/themes
+      // available themes: https://shiki.style/themes
+      codeTheme: 'github-light',
     },
     dark: {
       // title color
@@ -41,7 +42,8 @@ export const themeConfig: ThemeConfig = {
       // background color
       background: 'oklch(22% 0.005 298)',
       // code block theme
-      codeTheme: 'github-dark', // available themes: https://shiki.style/themes
+      // available themes: https://shiki.style/themes
+      codeTheme: 'github-dark',
     },
   },
   // COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
@@ -52,7 +54,7 @@ export const themeConfig: ThemeConfig = {
     locale: 'zh', // zh, zh-tw, ja, en, es, ru
     // more languages
     // not fill in the locale above again
-    moreLocale: ['zh-tw', 'ja', 'en', 'es', 'ru'], // zh, zh-tw, ja, en, es, ru
+    moreLocale: ['zh-tw', 'ja', 'en', 'es', 'ru'], // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
     // font styles for text
     fontStyle: 'sans', // sans, serif
     // date format for posts
@@ -76,7 +78,8 @@ export const themeConfig: ThemeConfig = {
       // gif search
       search: false, // true, false
       // image uploader
-      imageUploader: false, // true, false (BUG：unable to hide image uploader icon)
+      // bug: unable to hide image uploader icon
+      imageUploader: false, // true, false
     },
     // disqus: TODO
     // giscus: TODO
@@ -91,26 +94,37 @@ export const themeConfig: ThemeConfig = {
     // site verification
     verification: {
       // Google Search Console
-      google: '', // https://search.google.com/search-console
+      // docs: https://search.google.com/search-console
+      google: '',
       // Bing Webmaster Tools
-      bing: '', // https://www.bing.com/webmasters
+      // docs: https://www.bing.com/webmasters
+      bing: '',
       // Yandex Webmaster
-      yandex: '', // https://webmaster.yandex.com
+      // docs: https://webmaster.yandex.com
+      yandex: '',
       // Baidu Search
-      baidu: '', // https://ziyuan.baidu.com
+      // docs: https://ziyuan.baidu.com
+      baidu: '',
     },
     // Google Analytics
-    googleAnalyticsID: '', // https://analytics.google.com
+    // docs: https://analytics.google.com
+    googleAnalyticsID: '',
     // Umami Analytics
-    umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697', // https://cloud.umami.is
+    // docs: https://cloud.umami.is
+    umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697',
     // follow verification
-    // https://follow.is/
+    // docs: https://follow.is/
     follow: {
       // feed ID
       feedID: '',
       // user ID
       userID: '',
     },
+    // Open Graph
+    openGraph: {
+      // image url (1200x630)
+      url: '', // https://placehold.co/1200x630
+    },
   },
   // SEO SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
@@ -120,7 +134,7 @@ export const themeConfig: ThemeConfig = {
     links: [
       {
         name: 'RSS',
-        url: '/rss.xml', // rss.xml or atom.xml
+        url: '/rss.xml', // rss.xml, atom.xml
       },
       {
         name: 'GitHub',

src/layouts/Head.astro

@@ -1,39 +1,27 @@
 ---
 import themeConfig from '@/config'
-import { isPostPage } from '@/utils/path'
 import { ClientRouter } from 'astro:transitions'
 
 interface Props {
   postTitle?: string
   postDescription?: string
+  postSlug?: string
 }
 
-const { postTitle, postDescription } = Astro.props
+const { postTitle, postDescription, postSlug } = Astro.props
 
 const { title, subtitle, description, author, url, favicon } = themeConfig.site
 const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
 const { locale, moreLocale } = themeConfig.global
-const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
+// TODO: Change openGraph image fallback url
+const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '', openGraph = 'https://placehold.co/1200x630' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
 const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 
 const initMetaTheme = mode === 'dark' ? darkMode : lightMode
 const pageTitle = postTitle ? `${postTitle} | ${title}` : `${title} - ${subtitle}`
 const pageDescription = postDescription || description
-
-// Determine the OG image for the page
-// Check if the current page is a post
-const currentPath = Astro.url.pathname
-const isPost = isPostPage(currentPath)
-
-// Extract slug from URL as the post identifier
-const pathParts = currentPath.split('/').filter(part => part !== '')
-const slug = pathParts.length > 0 ? pathParts[pathParts.length - 1] : ''
-
-// Prioritize auto-generated OG image, otherwise use fallback OG image
-const pageImage = isPost && slug
-  ? `${url}/og/${slug}.png`
-  : (favicon.startsWith('http') ? favicon : `${url}${favicon}`)
+const pageImage = postSlug ? `${url}/og/${postSlug}.png` : `${openGraph}`
 ---
 <head>
 <!-- Basic info -->

src/layouts/Layout.astro

@@ -18,9 +18,10 @@ import '@/styles/heti.css'
 interface Props {
   postTitle?: string
   postDescription?: string
+  postSlug?: string
 }
 
-const { postTitle, postDescription } = Astro.props
+const { postTitle, postDescription, postSlug } = Astro.props
 const { isHome, isPost } = getPagePath(Astro.url.pathname)
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
 
@@ -34,7 +35,7 @@ const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
   class={fontStyle}
   data-overlayscrollbars-initialize
 >
-  <Head {postTitle} {postDescription} />
+  <Head {postTitle} {postDescription} {postSlug} />
   <body data-overlayscrollbars-initialize>
     <!--  -->
     <div

src/pages/og/[...route].ts

@@ -7,7 +7,7 @@ const blogEntries = await getCollection('posts')
 // Convert to page data objects
 const pages = Object.fromEntries(
   blogEntries.map(({ slug, data }) => [
-    data.abbrlink || slug, // Prioritize using abbrlink instead of slug
+    slug,
     {
       title: data.title,
       description: data.description || '',

src/pages/posts/[slug].astro

@@ -26,6 +26,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
 <Layout
   postTitle={post.data.title}
   postDescription={description}
+  postSlug={post.slug}
 >
   <article class="heti mb-12.6">
     <h1 class="post-title">

src/types/index.d.ts

@@ -60,6 +60,9 @@ export interface ThemeConfig {
       feedID?: string
       userID?: string
     }
+    openGraph?: {
+      url?: string
+    }
   }
 
   footer: {