From 9b9bdb2811c4c05b1af51750d258a28e15169095 Mon Sep 17 00:00:00 2001 From: radishzzz Date: Thu, 13 Mar 2025 01:21:19 +0000 Subject: [PATCH] fix: correctly correspond to the og of each article --- src/config.ts | 38 ++++++++++++++++++++++++------------ src/layouts/Head.astro | 22 +++++---------------- src/layouts/Layout.astro | 5 +++-- src/pages/og/[...route].ts | 2 +- src/pages/posts/[slug].astro | 1 + src/types/index.d.ts | 3 +++ 6 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/config.ts b/src/config.ts index 8932ec9..2a888ae 100644 --- a/src/config.ts +++ b/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', diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro index 47b3229..0a79ff5 100644 --- a/src/layouts/Head.astro +++ b/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}` --- diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 26be3bb..205d06a 100644 --- a/src/layouts/Layout.astro +++ b/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 > - +
[ - data.abbrlink || slug, // Prioritize using abbrlink instead of slug + slug, { title: data.title, description: data.description || '', diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro index 71ee590..3155210 100644 --- a/src/pages/posts/[slug].astro +++ b/src/pages/posts/[slug].astro @@ -26,6 +26,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()

diff --git a/src/types/index.d.ts b/src/types/index.d.ts index be0f62e..200a0f5 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -60,6 +60,9 @@ export interface ThemeConfig { feedID?: string userID?: string } + openGraph?: { + url?: string + } } footer: {