mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
✨ feat: i18n support for header, subtitle and about pages
This commit is contained in:
radishzzz
parent
22dc899a95
commit
96a89ddcd5
13 changed files with 103 additions and 30 deletions
10
.vscode/settings.json
vendored
10
.vscode/settings.json
vendored
|
|
@ -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",
|
||||
"Возрождая",
|
||||
"красоту",
|
||||
"Переверстка",
|
||||
"Посты",
|
||||
"себе",
|
||||
"Теги"
|
||||
"Теги",
|
||||
"типографики"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
---
|
||||
|
||||
<header
|
||||
class="mb-10.625"
|
||||
lg="fixed"
|
||||
>
|
||||
<header class="mb-10.625 lg:fixed">
|
||||
<h1 class={`${marginBottom} text-8 c-primary font-bold font-title lg:text-9`}>
|
||||
<!-- Fix text cropping issues during view transition on ios by adding a div tag -->
|
||||
<div
|
||||
class="box-content inline-block pr-1.25"
|
||||
transition:name="site-title"
|
||||
transition:name={`site-title-${currentLang}`}
|
||||
data-disable-transition-on-theme
|
||||
>
|
||||
<a href={getLocalizedPath('/')}>
|
||||
{title}
|
||||
{headerTitle}
|
||||
</a>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
{subtitle && (
|
||||
{headerSubtitle && (
|
||||
<h2 class="text-3.5 c-secondary font-navbar lg:text-4">
|
||||
{subtitle}
|
||||
{headerSubtitle}
|
||||
</h2>
|
||||
)}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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 = {
|
|||
<!-- Fix text cropping issues during view transition on ios by adding a div tag -->
|
||||
<div
|
||||
class="box-content inline-block pr-1.25"
|
||||
transition:name="site-title"
|
||||
transition:name={`site-title-${currentLang}`}
|
||||
data-disable-transition-on-theme
|
||||
>
|
||||
<a href={getLocalizedPath('/')}>
|
||||
{title}
|
||||
{headerTitle}
|
||||
</a>
|
||||
</div>
|
||||
</h3>
|
||||
|
||||
{subtitle && (
|
||||
{headerSubtitle && (
|
||||
<div
|
||||
class="text-3.5 opacity-0"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{subtitle}
|
||||
{headerSubtitle}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
5
src/content/about/about-en.md
Normal file
5
src/content/about/about-en.md
Normal file
|
|
@ -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.
|
||||
5
src/content/about/about-es.md
Normal file
5
src/content/about/about-es.md
Normal file
|
|
@ -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.
|
||||
5
src/content/about/about-ja.md
Normal file
5
src/content/about/about-ja.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
lang: ja
|
||||
---
|
||||
|
||||
Retypeset は [Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマで、[Typography](https://astro-theme-typography.vercel.app/) からインスピレーションを得ています。新しい視覚的標準を確立し、すべてのページのレイアウトを再考することで、紙の本のような読書体験を提供し、タイポグラフィの美しさを蘇らせます。細部へのこだわりと、洗練された空間デザインが特徴です。
|
||||
5
src/content/about/about-ru.md
Normal file
5
src/content/about/about-ru.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
lang: ru
|
||||
---
|
||||
|
||||
Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/) и вдохновленная [Typography](https://astro-theme-typography.vercel.app/). Retypeset устанавливает новый визуальный стандарт и переосмысливает компоновку всех страниц, предлагая опыт чтения, подобный бумажным книгам, возрождая красоту типографики. Детали в каждом взгляде, элегантность в каждом пространстве.
|
||||
5
src/content/about/about-zh-tw.md
Normal file
5
src/content/about/about-zh-tw.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
lang: zh-tw
|
||||
---
|
||||
|
||||
Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態博客主題，設計靈感來自 [Typography](https://astro-theme-typography.vercel.app/)。本主題通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。
|
||||
5
src/content/about/about-zh.md
Normal file
5
src/content/about/about-zh.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
lang: zh
|
||||
---
|
||||
|
||||
Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，设计灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: 'О себе',
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="uno-decorative-line"></div>
|
||||
<div class="heti mt-4.375">
|
||||
{lang === 'en'
|
||||
? (
|
||||
<p>Retypeset is a static blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. 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.</p>
|
||||
)
|
||||
: (
|
||||
<p>Retypeset 是一款基于<a href="https://astro.build/">Astro</a>框架的静态博客主题，设计灵感来自<a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。</p>
|
||||
)}
|
||||
{Content && <Content />}
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue