From 96a89ddcd54b37b33860964f3531658e26fb5a7c Mon Sep 17 00:00:00 2001 From: radishzzz Date: Sat, 15 Mar 2025 02:52:23 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20i18n=20support=20for=20head?= =?UTF-8?q?er,=20subtitle=20and=20about=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 10 +++++++++- src/components/MainHeader.astro | 28 +++++++++++++++++----------- src/components/MobileHeader.astro | 23 ++++++++++++++++------- src/config.ts | 6 +++--- src/content/about/about-en.md | 5 +++++ src/content/about/about-es.md | 5 +++++ src/content/about/about-ja.md | 5 +++++ src/content/about/about-ru.md | 5 +++++ src/content/about/about-zh-tw.md | 5 +++++ src/content/about/about-zh.md | 5 +++++ src/content/config.ts | 10 +++++++++- src/i18n/ui.ts | 12 ++++++++++++ src/pages/[...about].astro | 14 +++++++------- 13 files changed, 103 insertions(+), 30 deletions(-) create mode 100644 src/content/about/about-en.md create mode 100644 src/content/about/about-es.md create mode 100644 src/content/about/about-ja.md create mode 100644 src/content/about/about-ru.md create mode 100644 src/content/about/about-zh-tw.md create mode 100644 src/content/about/about-zh.md diff --git a/.vscode/settings.json b/.vscode/settings.json index 19774d9..f3c17ad 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -64,6 +64,7 @@ "Artículos", "astrojs", "attributify", + "belleza", "Beze", "blurhash", "bmoji", @@ -96,13 +97,16 @@ "rashomon", "rehype", "reimagines", + "Retipografía", "Retypeset", + "Reviviendo", "Roundhand", "Sentimentalisme", "Servetus", "Sobre", "srcset", "STIX", + "tipográfica", "titlebar", "Twikoo", "Umami", @@ -112,8 +116,12 @@ "waline", "walinejs", "weibo", + "Возрождая", + "красоту", + "Переверстка", "Посты", "себе", - "Теги" + "Теги", + "типографики" ] } diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro index 25262a3..2520ea9 100644 --- a/src/components/MainHeader.astro +++ b/src/components/MainHeader.astro @@ -1,11 +1,20 @@ --- import themeConfig from '@/config' +import { ui } from '@/i18n/ui' import { getPageInfo } from '@/utils/page' -const { title, subtitle } = themeConfig.site -const { titleSpace } = themeConfig.global -const { getLocalizedPath } = getPageInfo(Astro.url.pathname) +const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname) +const currentUI = ui[currentLang as keyof typeof ui] +const { title, subtitle } = themeConfig.site +const headerTitle = title || currentUI.title +const headerSubtitle = !subtitle + ? '' + : (subtitle === 'Revive the beauty of typography' + ? currentUI.subtitle + : subtitle) + +const { titleSpace } = themeConfig.global const marginBottom = { 1: 'mb-0.625', 2: 'mb-1.875', @@ -13,26 +22,23 @@ const marginBottom = { }[titleSpace] || 'mb-3.125' --- -
+

- {title} + {headerTitle}

- {subtitle && ( + {headerSubtitle && (

- {subtitle} + {headerSubtitle}

)}
diff --git a/src/components/MobileHeader.astro b/src/components/MobileHeader.astro index ee50b38..6aa8e9f 100644 --- a/src/components/MobileHeader.astro +++ b/src/components/MobileHeader.astro @@ -1,11 +1,20 @@ --- import themeConfig from '@/config' +import { ui } from '@/i18n/ui' import { getPageInfo } from '@/utils/page' -const { title, subtitle } = themeConfig.site -const { titleSpace } = themeConfig.global -const { getLocalizedPath } = getPageInfo(Astro.url.pathname) +const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname) +const currentUI = ui[currentLang as keyof typeof ui] +const { title, subtitle } = themeConfig.site +const headerTitle = title || currentUI.title +const headerSubtitle = !subtitle + ? '' + : (subtitle === 'Revive the beauty of typography' + ? currentUI.subtitle + : subtitle) + +const { titleSpace } = themeConfig.global const marginBottom = { 1: 'mb-1.625', 2: 'mb-2.875', @@ -18,21 +27,21 @@ const marginBottom = {
- {title} + {headerTitle}
- {subtitle && ( + {headerSubtitle && ( )}
diff --git a/src/config.ts b/src/config.ts index b46659f..b1ebdd6 100644 --- a/src/config.ts +++ b/src/config.ts @@ -4,9 +4,9 @@ export const themeConfig: ThemeConfig = { // SITE INFORMATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START site: { // site title - title: 'Retypeset', + title: '', // site subtitle (optional) - subtitle: '再现版式之美', + subtitle: 'Revive the beauty of typography', // site description for SEO description: 'Retypeset is a static blog theme based on the Astro framework, inspired by Typography. Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space.', // author name @@ -60,7 +60,7 @@ export const themeConfig: ThemeConfig = { // date format for posts dateFormat: 'YYYY-MM-DD', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY // space between title and subtitle - titleSpace: 3, // 1, 2, 3 + titleSpace: 2, // 1, 2, 3 }, // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END diff --git a/src/content/about/about-en.md b/src/content/about/about-en.md new file mode 100644 index 0000000..78e167d --- /dev/null +++ b/src/content/about/about-en.md @@ -0,0 +1,5 @@ +--- +lang: en +--- + +Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework, inspired by [Typography](https://astro-theme-typography.vercel.app/). Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space. \ No newline at end of file diff --git a/src/content/about/about-es.md b/src/content/about/about-es.md new file mode 100644 index 0000000..da0f2e7 --- /dev/null +++ b/src/content/about/about-es.md @@ -0,0 +1,5 @@ +--- +lang: es +--- + +Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/), inspirado en [Typography](https://astro-theme-typography.vercel.app/). Retypeset establece un nuevo estándar visual y reimagina la disposición de todas las páginas, ofreciendo una experiencia de lectura similar a la de los libros impresos, reviviendo la belleza de la tipografía. Detalles en cada mirada, elegancia en cada espacio. diff --git a/src/content/about/about-ja.md b/src/content/about/about-ja.md new file mode 100644 index 0000000..dbab425 --- /dev/null +++ b/src/content/about/about-ja.md @@ -0,0 +1,5 @@ +--- +lang: ja +--- + +Retypeset は [Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマで、[Typography](https://astro-theme-typography.vercel.app/) からインスピレーションを得ています。新しい視覚的標準を確立し、すべてのページのレイアウトを再考することで、紙の本のような読書体験を提供し、タイポグラフィの美しさを蘇らせます。細部へのこだわりと、洗練された空間デザインが特徴です。 diff --git a/src/content/about/about-ru.md b/src/content/about/about-ru.md new file mode 100644 index 0000000..f0fe1f1 --- /dev/null +++ b/src/content/about/about-ru.md @@ -0,0 +1,5 @@ +--- +lang: ru +--- + +Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/) и вдохновленная [Typography](https://astro-theme-typography.vercel.app/). Retypeset устанавливает новый визуальный стандарт и переосмысливает компоновку всех страниц, предлагая опыт чтения, подобный бумажным книгам, возрождая красоту типографики. Детали в каждом взгляде, элегантность в каждом пространстве. diff --git a/src/content/about/about-zh-tw.md b/src/content/about/about-zh-tw.md new file mode 100644 index 0000000..8890350 --- /dev/null +++ b/src/content/about/about-zh-tw.md @@ -0,0 +1,5 @@ +--- +lang: zh-tw +--- + +Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態博客主題，設計靈感來自 [Typography](https://astro-theme-typography.vercel.app/)。本主題通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。 diff --git a/src/content/about/about-zh.md b/src/content/about/about-zh.md new file mode 100644 index 0000000..5346c75 --- /dev/null +++ b/src/content/about/about-zh.md @@ -0,0 +1,5 @@ +--- +lang: zh +--- + +Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，设计灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 diff --git a/src/content/config.ts b/src/content/config.ts index 0de47b3..906f90b 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,3 +1,4 @@ +import { allLocales } from '@/config' import { defineCollection, z } from 'astro:content' const postsCollection = defineCollection({ @@ -13,7 +14,7 @@ const postsCollection = defineCollection({ draft: z.boolean().optional().default(false), pin: z.number().int().min(0).max(99).optional().default(0), toc: z.boolean().optional().default(false), - lang: z.string().optional().default(''), + lang: z.enum(['', ...allLocales]).optional().default(''), abbrlink: z.string().optional().default('').refine( abbrlink => !abbrlink || /^[a-z0-9\-]*$/.test(abbrlink), { message: 'Abbrlink can only contain lowercase letters, numbers and hyphens' }, @@ -21,6 +22,13 @@ const postsCollection = defineCollection({ }), }) +const aboutCollection = defineCollection({ + schema: z.object({ + lang: z.enum(['', ...allLocales]).optional().default(''), + }), +}) + export const collections = { posts: postsCollection, + about: aboutCollection, } diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index 29f211c..d4698a7 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -1,30 +1,42 @@ export const ui = { 'zh': { + title: '重新编排', + subtitle: '再现版式之美', posts: '文章', tags: '标签', about: '关于', }, 'zh-tw': { + title: '重新編排', + subtitle: '再現版式之美', posts: '文章', tags: '標籤', about: '關於', }, 'ja': { + title: '再組版', + subtitle: '印刷の美を甦らせる', posts: '記事', tags: 'タグ', about: '概要', }, 'en': { + title: 'Retypeset', + subtitle: 'Revive the beauty of typography', posts: 'Posts', tags: 'Tags', about: 'About', }, 'es': { + title: 'Retipografía', + subtitle: 'Reviviendo la belleza tipográfica', posts: 'Artículos', tags: 'Etiquetas', about: 'Sobre', }, 'ru': { + title: 'Переверстка', + subtitle: 'Возрождая красоту типографики', posts: 'Посты', tags: 'Теги', about: 'О себе', diff --git a/src/pages/[...about].astro b/src/pages/[...about].astro index 11b2686..cb7bcee 100644 --- a/src/pages/[...about].astro +++ b/src/pages/[...about].astro @@ -1,6 +1,7 @@ --- import { allLocales, defaultLocale } from '@/config' import Layout from '@/layouts/Layout.astro' +import { getCollection } from 'astro:content' export async function getStaticPaths() { type PathItem = { @@ -30,17 +31,16 @@ export async function getStaticPaths() { } const { lang } = Astro.props + +const allAboutEntries = await getCollection('about') +const aboutEntry = allAboutEntries.find(entry => entry.data.lang === lang) + || allAboutEntries.find(entry => entry.data.lang === '') +const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null } ---
- {lang === 'en' -? ( -

Retypeset is a static blog theme based on the Astro framework, inspired by Typography. Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space.

- ) -: ( -

Retypeset 是一款基于Astro框架的静态博客主题，设计灵感来自Typography。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。

- )} + {Content && }