reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 03:32:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update theme guide

Browse source
This commit is contained in:
radishzzz 2025-03-26 18:45:03 +00:00
parent 0545b1d0e5
commit f3fc03b8d6
7 changed files with 878 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/components/Comments/Waline.astro
View file

@ -162,7 +162,7 @@ document.addEventListener('astro:after-swap', initWaline)
} }
#waline .wl-time { #waline .wl-time {
color: color-mix(in oklch, var(--waline-theme-color), transparent 20%); color: oklch(var(--un-preset-theme-colors-primary) / 0.75);
} }
#waline .wl-edit, #waline .wl-edit,
@ -177,70 +177,34 @@ document.addEventListener('astro:after-swap', initWaline)
<!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> --> <!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
<!-- https://waline.js.org/reference/client/style.html --> <!-- https://waline.js.org/reference/client/style.html -->
<style <style>
define:vars={{ #waline {
lightPrimary, /* Regular Colors */
lightSecondary, --waline-white: var(--uno-colors-background);
lightBackground, --waline-light-grey: oklch(var(--un-preset-theme-colors-primary) / 0.25);
darkPrimary, --waline-dark-grey: var(--uno-colors-secondary);
darkSecondary,
darkBackground,
}}
>
#waline {
/* Regular Colors */
--waline-white: var(--lightBackground);
--waline-light-grey: color-mix(in oklch, var(--lightPrimary), transparent 75%);
--waline-dark-grey: var(--lightSecondary);
/* Theme Colors */ /* Theme Colors */
--waline-theme-color: var(--lightPrimary); --waline-theme-color: var(--uno-colors-primary);
--waline-active-color: var(--lightPrimary); --waline-active-color: var(--uno-colors-primary);
/* Layout Colors */ /* Layout Colors */
--waline-color: var(--lightSecondary); --waline-color: var(--uno-colors-secondary);
--waline-bg-color: var(--lightBackground); --waline-bg-color: var(--uno-colors-background);
--waline-bg-color-light: var(--lightBackground); --waline-bg-color-light: var(--uno-colors-background);
--waline-bg-color-hover: var(--lightBackground); --waline-bg-color-hover: var(--uno-colors-background);
--waline-border-color: color-mix(in oklch, var(--lightPrimary), transparent 75%); --waline-border-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
--waline-disable-bg-color: color-mix(in oklch, var(--lightSecondary), transparent 92%); --waline-disable-bg-color: oklch(var(--un-preset-theme-colors-secondary) / 0.05);
--waline-disable-color: var(--lightPrimary); --waline-disable-color: var(--uno-colors-primary);
/* Special Colors */ /* Special Colors */
--waline-bq-color: color-mix(in oklch, var(--lightPrimary), transparent 75%); --waline-bq-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
/* Information */ /* Information */
--waline-info-bg-color: var(--lightBackground); --waline-info-bg-color: var(--uno-colors-background);
--waline-info-color: color-mix(in oklch, var(--lightPrimary), transparent 75%); --waline-info-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
/* Rendering Options */ /* Rendering Options */
--waline-avatar-radius: 20%; --waline-avatar-radius: 0.5rem;
} }
</style>
html.dark #waline {
/* Regular Colors */
--waline-white: var(--darkBackground);
--waline-light-grey: color-mix(in oklch, var(--darkPrimary), transparent 75%);
--waline-dark-grey: var(--darkSecondary);
/* Theme Colors */
--waline-theme-color: var(--darkPrimary);
--waline-active-color: var(--darkPrimary);
/* Layout Colors */
--waline-color: var(--darkSecondary);
--waline-bg-color: var(--darkBackground);
--waline-bg-color-light: var(--darkBackground);
--waline-bg-color-hover: var(--darkBackground);
--waline-border-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
--waline-disable-bg-color: color-mix(in oklch, var(--darkSecondary), transparent 92%);
--waline-disable-color: var(--darkPrimary);
/* Special Colors */
--waline-bq-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
/* Information */
--waline-info-bg-color: var(--darkBackground);
--waline-info-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
}
</style>

75
src/content/posts/Theme Guide-en.md
View file

@ -12,18 +12,19 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
## Theme Configuration ## Theme Configuration
Below is the theme configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) for Retypeset. Below is the theme configuration guide for Retypeset. Customize your blog by modifying the configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
### Site ### Site Information
```typescript ```ts
site: { site: {
// site title // site title
title: 'Retypeset' title: 'Retypeset'
// site subtitle // site subtitle
subtitle: 'Revive the beauty of typography' subtitle: 'Revive the beauty of typography'
// site description // site description
description: 'Retypeset is a static blog theme based on the Astro framework. Inspired by Typography...' description: 'Retypeset is a static blog theme...'
// use i18n title/subtitle/description from src/i18n/ui.ts instead of static ones above
i18nTitle: true // true, false i18nTitle: true // true, false
// author name // author name
author: 'radishzz' author: 'radishzz'
@ -35,27 +36,27 @@ site: {
} }
``` ```
### Color ### Theme Color
```typescript ```ts
color: { color: {
// default theme mode // default theme mode
mode: 'light' // light, dark mode: 'light' // light, dark
// light mode
light: { light: {
// primary color // primary color
// used for title, hover, etc // used for title, hover, etc
// oklch color picker: https://oklch.com/
primary: 'oklch(25% 0.005 298)' primary: 'oklch(25% 0.005 298)'
// secondary color // secondary color
// used for post text // used for post text
secondary: 'oklch(40% 0.005 298)' secondary: 'oklch(40% 0.005 298)'
// background color // background color
background: 'oklch(96% 0.005 298)' background: 'oklch(96% 0.005 298)'
}; }
// dark mode
dark: { dark: {
// primary color // primary color
// used for title, hover, etc // used for title, hover, etc
// oklch color picker: https://oklch.com/
primary: 'oklch(92% 0.005 298)' primary: 'oklch(92% 0.005 298)'
// secondary color // secondary color
// used for post text // used for post text
@ -66,16 +67,18 @@ color: {
} }
``` ```
### Font ### Global Settings
```typescript ```ts
global: { global: {
// default language // default language
// language of the site root path '/'
locale: 'zh' // zh, zh-tw, ja, en, es, ru locale: 'zh' // zh, zh-tw, ja, en, es, ru
// more languages // more languages
// Generate multi-language paths such as '/es/' '/ru/'
// not fill in the locale code above again // not fill in the locale code above again
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru'] moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
// font styles for post text // font style
fontStyle: 'sans' // sans, serif fontStyle: 'sans' // sans, serif
// date format for posts // date format for posts
dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
@ -84,27 +87,25 @@ global: {
} }
``` ```
### Comment ### Comment System
```typescript ```ts
comment: { comment: {
// enable comment system // enable comment system
enabled: true // true, false enabled: true // true, false
// waline comment system // waline comment system
// https://waline.js.org/en/
waline: { waline: {
// server url // server url
serverURL: 'https://retypeset-comment.radishzz.cc' serverURL: 'https://retypeset-comment.radishzz.cc'
// emoji url // emoji url
emoji: [ emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji', 'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji', // 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// more emojis: https://waline.js.org/en/guide/features/emoji.html // more emojis: https://waline.js.org/en/guide/features/emoji.html
] ]
// gif search // gif search
search: false // true, false search: false // true, false
// image uploader // image uploader
// bug: unable to hide image uploader icon
imageUploader: false // true, false imageUploader: false // true, false
} }
} }
@ -112,39 +113,32 @@ comment: {
### SEO ### SEO
```typescript ```ts
seo: { seo: {
// @twitter ID // @twitter ID
twitterID: '@radishzz_' twitterID: '@radishzz_'
// site verification // site verification
verification: { verification: {
// google search console // google search console
// https://search.google.com/search-console
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM' google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// bing webmaster tools // bing webmaster tools
// https://www.bing.com/webmasters
bing: '64708CD514011A7965C84DDE1D169F87' bing: '64708CD514011A7965C84DDE1D169F87'
// yandex webmaster // yandex webmaster
// https://webmaster.yandex.com
yandex: '' yandex: ''
// baidu search // baidu search
// https://ziyuan.baidu.com
baidu: '' baidu: ''
}; }
// google analytics // google analytics
// https://analytics.google.com
googleAnalyticsID: '' googleAnalyticsID: ''
// umami analytics // umami analytics
// https://cloud.umami.is
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697' umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// follow verification // follow verification
// https://follow.is/
follow: { follow: {
// feed ID // feed ID
feedID: '' feedID: ''
// user ID // user ID
userID: '' userID: ''
}; }
// apiflash access key // apiflash access key
// automatically generate website screenshots for open graph images // automatically generate website screenshots for open graph images
// get your access key at: https://apiflash.com/ // get your access key at: https://apiflash.com/
@ -152,40 +146,39 @@ seo: {
} }
``` ```
### Footer ### Footer Settings
```typescript ```ts
footer: { footer: {
// social links // social links
links: [ links: [
{ {
name: 'RSS', name: 'RSS',
url: '/rss.xml' // rss.xml, atom.xml url: '/rss.xml', // rss.xml, atom.xml
}, },
{ {
name: 'GitHub', name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset' url: 'https://github.com/radishzzz/astro-theme-retypeset',
}, },
{ {
name: 'Twitter', name: 'Twitter',
url: 'https://x.com/radishzz_' url: 'https://x.com/radishzz_',
}, },
// { // {
// name: 'Email'; // name: 'Email',
// url: 'https://example@gmail.com' // url: 'https://example@gmail.com',
// } // }
]; ]
// year of website start // year of website start
startYear: 2024 startYear: 2024
} }
``` ```
### Preload ### Preload Resources
```typescript ```ts
preload: { preload: {
// link prefetch // link prefetch strategies
// docs: https://docs.astro.build/en/guides/prefetch/#prefetch-strategies
linkPrefetch: 'viewport' // hover, tap, viewport, load linkPrefetch: 'viewport' // hover, tap, viewport, load
// comment server url // comment server url
commentURL: 'https://retypeset-comment.radishzz.cc' commentURL: 'https://retypeset-comment.radishzz.cc'
@ -193,11 +186,9 @@ preload: {
imageHostURL: 'https://image.radishzz.cc' imageHostURL: 'https://image.radishzz.cc'
// custom google analytics js // custom google analytics js
// for users who route analytics javascript to a customized domain // for users who route analytics javascript to a customized domain
// See https://gist.github.com/xiaopc/0602f06ca465d76bd9efd3dda9393738
customGoogleAnalyticsJS: '' customGoogleAnalyticsJS: ''
// custom umami analytics js // custom umami analytics js
// for users who deploy umami on their own, or route analytics javascript to a customized domain // for users who deploy umami on their own, or route analytics javascript to a customized domain
// see https://github.com/umami-software/umami/discussions/1026
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js' customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
} }
``` ```

183
src/content/posts/Theme Guide-es.md
View file

@ -9,3 +9,186 @@ abbrlink: theme-guide
--- ---
Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/). Inspirado por [Typography](https://astro-theme-typography.vercel.app/), Retypeset establece un nuevo estándar visual y reimagina el diseño de todas las páginas, creando 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. Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/). Inspirado por [Typography](https://astro-theme-typography.vercel.app/), Retypeset establece un nuevo estándar visual y reimagina el diseño de todas las páginas, creando 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.
## Configuración del Tema
A continuación se presenta la guía de configuración del tema Retypeset. Personaliza tu blog modificando el archivo de configuración [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
### Información del Sitio
```ts
site: {
// título del sitio
title: 'Retypeset'
// subtítulo del sitio
subtitle: 'Revive the beauty of typography'
// descripción del sitio
description: 'Retypeset is a static blog theme...'
// usar título/subtítulo/descripción en varios idiomas desde src/i18n/ui.ts en lugar de los estáticos anteriores
i18nTitle: true // true, false
// nombre del autor
author: 'radishzz'
// url del sitio
url: 'https://retypeset.radishzz.cc'
// url del favicon
// formatos recomendados: svg, png o ico
favicon: '/icon/favicon.svg' // o https://example.com/favicon.svg
}
```
### Color del Tema
```ts
color: {
// modo de tema predeterminado
mode: 'light' // light, dark
// modo claro
light: {
// color primario
// usado para títulos, hover, etc
primary: 'oklch(25% 0.005 298)'
// color secundario
// usado para texto de publicaciones
secondary: 'oklch(40% 0.005 298)'
// color de fondo
background: 'oklch(96% 0.005 298)'
}
// modo oscuro
dark: {
// color primario
// usado para títulos, hover, etc
primary: 'oklch(92% 0.005 298)'
// color secundario
// usado para texto de publicaciones
secondary: 'oklch(77% 0.005 298)'
// color de fondo
background: 'oklch(22% 0.005 298)'
}
}
```
### Configuración Global
```ts
global: {
// idioma predeterminado
// idioma de la ruta raíz del sitio '/'
locale: 'zh' // zh, zh-tw, ja, en, es, ru
// más idiomas
// Genera rutas multilingües como '/es/' '/ru/'
// no rellenar de nuevo el código de localización anterior
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
// estilo de fuente
fontStyle: 'sans' // sans, serif
// formato de fecha para publicaciones
dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
// espacio entre título y subtítulo
titleGap: 2 // 1, 2, 3
}
```
### Sistema de Comentarios
```ts
comment: {
// habilitar sistema de comentarios
enabled: true // true, false
// sistema de comentarios waline
waline: {
// URL del servidor
serverURL: 'https://retypeset-comment.radishzz.cc'
// URL de emojis
emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// más emojis: https://waline.js.org/en/guide/features/emoji.html
]
// búsqueda de gif
search: false // true, false
// cargador de imágenes
imageUploader: false // true, false
}
}
```
### SEO
```ts
seo: {
// ID de Twitter
twitterID: '@radishzz_'
// verificación del sitio
verification: {
// google search console
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// herramientas para webmasters de bing
bing: '64708CD514011A7965C84DDE1D169F87'
// webmaster de yandex
yandex: ''
// búsqueda baidu
baidu: ''
}
// google analytics
googleAnalyticsID: ''
// umami analytics
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// verificación de seguimiento
follow: {
// ID de feed
feedID: ''
// ID de usuario
userID: ''
}
// clave de acceso apiflash
// genera automáticamente capturas de pantalla del sitio web para imágenes de open graph
// obtén tu clave de acceso en: https://apiflash.com/
apiflashKey: ''
}
```
### Configuración del Pie de Página
```ts
footer: {
// enlaces sociales
links: [
{
name: 'RSS',
url: '/rss.xml', // rss.xml, atom.xml
},
{
name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset',
},
{
name: 'Twitter',
url: 'https://x.com/radishzz_',
},
// {
// name: 'Email',
// url: 'https://example@gmail.com',
// }
]
// año de inicio del sitio web
startYear: 2024
}
```
### Precargar Recursos
```ts
preload: {
// estrategias de precarga de enlaces
linkPrefetch: 'viewport' // hover, tap, viewport, load
// URL del servidor de comentarios
commentURL: 'https://retypeset-comment.radishzz.cc'
// URL de alojamiento de imágenes
imageHostURL: 'https://image.radishzz.cc'
// js personalizado de google analytics
// para usuarios que redirigen javascript de analytics a un dominio personalizado
customGoogleAnalyticsJS: ''
// js personalizado de umami analytics
// para usuarios que implementan umami por su cuenta, o redirigen javascript de analytics a un dominio personalizado
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}
```

183
src/content/posts/Theme Guide-ja.md
View file

@ -9,3 +9,186 @@ abbrlink: theme-guide
--- ---
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/) からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。 Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/) からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
## テーマ設定
以下はRetypesetのテーマ設定ガイドです。設定ファイル [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) を修正してブログをカスタマイズできます。
### サイト情報
```ts
site: {
// サイトタイトル
title: 'Retypeset'
// サイトサブタイトル
subtitle: 'Revive the beauty of typography'
// サイト説明
description: 'Retypeset is a static blog theme...'
// 上記の静的設定の代わりに src/i18n/ui.ts の多言語タイトル/サブタイトル/説明を使用
i18nTitle: true // true, false
// 著者名
author: 'radishzz'
// サイトURL
url: 'https://retypeset.radishzz.cc'
// ファビコンURL
// 推奨フォーマット: svg, png, ico
favicon: '/icon/favicon.svg' // または https://example.com/favicon.svg
}
```
### テーマカラー
```ts
color: {
// デフォルトテーマモード
mode: 'light' // light, dark
// ライトモード
light: {
// プライマリカラー
// サイトタイトル、ホバー効果などに使用
primary: 'oklch(25% 0.005 298)'
// セカンダリカラー
// 通常テキストに使用
secondary: 'oklch(40% 0.005 298)'
// 背景色
background: 'oklch(96% 0.005 298)'
}
// ダークモード
dark: {
// プライマリカラー
// タイトル、ホバーなどに使用
primary: 'oklch(92% 0.005 298)'
// セカンダリカラー
// 通常テキストに使用
secondary: 'oklch(77% 0.005 298)'
// 背景色
background: 'oklch(22% 0.005 298)'
}
}
```
### グローバル設定
```ts
global: {
// デフォルト言語
// サイトのルートパス '/' の言語
locale: 'zh' // zh, zh-tw, ja, en, es, ru
// その他の言語
// '/ja/' '/en/' などの多言語パスを生成
// デフォルト言語を重複して入力しないでください
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
// フォントスタイル
fontStyle: 'sans' // sans, serif
// 記事の日付フォーマット
dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
// タイトルとサブタイトルの間隔
titleGap: 2 // 1, 2, 3
}
```
### コメントサービス
```ts
comment: {
// コメント機能を有効にする
enabled: true // true, false
// waline コメント
waline: {
// サーバー URL
serverURL: 'https://retypeset-comment.radishzz.cc'
// 絵文字 URL
emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// その他の絵文字: https://waline.js.org/en/guide/features/emoji.html
]
// gif 検索
search: false // true, false
// 画像アップローダー
imageUploader: false // true, false
}
}
```
### 検索エンジン最適化
```ts
seo: {
// @twitter ID
twitterID: '@radishzz_'
// サイト認証
verification: {
// Google Search Console
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// Bing ウェブマスターツール
bing: '64708CD514011A7965C84DDE1D169F87'
// Yandex ウェブマスター
yandex: ''
// Baidu 検索
baidu: ''
}
// Google Analytics
googleAnalyticsID: ''
// Umami Analytics
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// フォロー認証
follow: {
// フィードID
feedID: ''
// ユーザーID
userID: ''
}
// APIFlash アクセスキー
// OpenGraph 用のウェブサイトスクリーンショットを自動生成
// アクセスキーの取得: https://apiflash.com/
apiflashKey: ''
}
```
### フッター設定
```ts
footer: {
// ソーシャルリンク
links: [
{
name: 'RSS',
url: '/rss.xml', // rss.xml, atom.xml
},
{
name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset',
},
{
name: 'Twitter',
url: 'https://x.com/radishzz_',
},
// {
// name: 'Email',
// url: 'https://example@gmail.com',
// }
]
// サイト開始年
startYear: 2024
}
```
### リソースプリロード
```ts
preload: {
// リンクプリフェッチ戦略
linkPrefetch: 'viewport' // hover, tap, viewport, load
// コメントサーバー URL
commentURL: 'https://retypeset-comment.radishzz.cc'
// 画像ホスティング URL
imageHostURL: 'https://image.radishzz.cc'
// カスタム Google Analytics JS
// アナリティクス JavaScript をカスタムドメインにルーティングするユーザー向け
customGoogleAnalyticsJS: ''
// カスタム Umami Analytics JS
// Umami を自己デプロイしたり、アナリティクス JavaScript をカスタムドメインにルーティングするユーザー向け
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}
```

183
src/content/posts/Theme Guide-ru.md
View file

@ -9,3 +9,186 @@ abbrlink: theme-guide
--- ---
Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/). Вдохновленная [Typography](https://astro-theme-typography.vercel.app/), Retypeset устанавливает новый визуальный стандарт и переосмысливает компоновку всех страниц, создавая опыт чтения, напоминающий печатные книги, возрождая красоту типографики. Детали в каждом взгляде, элегантность в каждом пространстве. Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/). Вдохновленная [Typography](https://astro-theme-typography.vercel.app/), Retypeset устанавливает новый визуальный стандарт и переосмысливает компоновку всех страниц, создавая опыт чтения, напоминающий печатные книги, возрождая красоту типографики. Детали в каждом взгляде, элегантность в каждом пространстве.
## Конфигурация темы
Ниже приведено руководство по конфигурации темы Retypeset. Настройте свой блог, изменяя конфигурационный файл [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
### Информация о сайте
```ts
site: {
// заголовок сайта
title: 'Retypeset'
// подзаголовок сайта
subtitle: 'Revive the beauty of typography'
// описание сайта
description: 'Retypeset is a static blog theme...'
// использовать многоязычные заголовок/подзаголовок/описание из src/i18n/ui.ts вместо статических выше
i18nTitle: true // true, false
// имя автора
author: 'radishzz'
// адрес сайта
url: 'https://retypeset.radishzz.cc'
// url фавикона
// рекомендуемые форматы: svg, png или ico
favicon: '/icon/favicon.svg' // или https://example.com/favicon.svg
}
```
### Цвет темы
```ts
color: {
// режим темы по умолчанию
mode: 'light' // light, dark
// светлый режим
light: {
// основной цвет
// используется для заголовков, эффекта наведения и т.д.
primary: 'oklch(25% 0.005 298)'
// вторичный цвет
// используется для текста постов
secondary: 'oklch(40% 0.005 298)'
// цвет фона
background: 'oklch(96% 0.005 298)'
}
// темный режим
dark: {
// основной цвет
// используется для заголовков, эффекта наведения и т.д.
primary: 'oklch(92% 0.005 298)'
// вторичный цвет
// используется для текста постов
secondary: 'oklch(77% 0.005 298)'
// цвет фона
background: 'oklch(22% 0.005 298)'
}
}
```
### Глобальные настройки
```ts
global: {
// язык по умолчанию
// язык корневого пути сайта '/'
locale: 'zh' // zh, zh-tw, ja, en, es, ru
// дополнительные языки
// Создает многоязычные пути, такие как '/es/' '/ru/'
// не указывайте повторно код локали, указанный выше
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
// стиль шрифта
fontStyle: 'sans' // sans, serif
// формат даты для постов
dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
// промежуток между заголовком и подзаголовком
titleGap: 2 // 1, 2, 3
}
```
### Система комментариев
```ts
comment: {
// включить систему комментариев
enabled: true // true, false
// система комментариев waline
waline: {
// URL сервера
serverURL: 'https://retypeset-comment.radishzz.cc'
// URL эмодзи
emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// дополнительные эмодзи: https://waline.js.org/en/guide/features/emoji.html
]
// поиск gif
search: false // true, false
// загрузчик изображений
imageUploader: false // true, false
}
}
```
### SEO
```ts
seo: {
// @twitter ID
twitterID: '@radishzz_'
// верификация сайта
verification: {
// консоль поиска Google
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// инструменты вебмастера Bing
bing: '64708CD514011A7965C84DDE1D169F87'
// вебмастер Яндекса
yandex: ''
// поиск Baidu
baidu: ''
}
// Google Analytics
googleAnalyticsID: ''
// Umami Analytics
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// верификация подписки
follow: {
// ID ленты
feedID: ''
// ID пользователя
userID: ''
}
// ключ доступа apiflash
// автоматически генерирует скриншоты веб-сайта для изображений Open Graph
// получите ключ доступа на: https://apiflash.com/
apiflashKey: ''
}
```
### Настройки подвала
```ts
footer: {
// социальные ссылки
links: [
{
name: 'RSS',
url: '/rss.xml', // rss.xml, atom.xml
},
{
name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset',
},
{
name: 'Twitter',
url: 'https://x.com/radishzz_',
},
// {
// name: 'Email',
// url: 'https://example@gmail.com',
// }
]
// год начала работы веб-сайта
startYear: 2024
}
```
### Предзагрузка ресурсов
```ts
preload: {
// стратегии предзагрузки ссылок
linkPrefetch: 'viewport' // hover, tap, viewport, load
// URL сервера комментариев
commentURL: 'https://retypeset-comment.radishzz.cc'
// URL хостинга изображений
imageHostURL: 'https://image.radishzz.cc'
// пользовательский скрипт Google Analytics
// для пользователей, которые направляют JavaScript аналитики на собственный домен
customGoogleAnalyticsJS: ''
// пользовательский скрипт Umami Analytics
// для пользователей, которые развертывают Umami самостоятельно или направляют JavaScript аналитики на собственный домен
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}
```

183
src/content/posts/Theme Guide-zh-tw.md
View file

@ -9,3 +9,186 @@ abbrlink: theme-guide
--- ---
Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本主題以 [活版印字](https://astro-theme-typography.vercel.app/) 為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。 Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本主題以 [活版印字](https://astro-theme-typography.vercel.app/) 為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。
## 主題配置
以下為 Retypeset 的主題配置介紹。通過修改配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 來自定義你的部落格。
### 站點信息
```ts
site: {
// 站點標題
title: 'Retypeset'
// 站點副標題
subtitle: 'Revive the beauty of typography'
// 站點介紹
description: 'Retypeset is a static blog theme...'
// 使用 src/i18n/ui.ts 中的多語言標題/副標題/站點描述，替換以上靜態配置
i18nTitle: true // true, false
// 作者名稱
author: 'radishzz'
// 站點地址
url: 'https://retypeset.radishzz.cc'
// 站點圖標
// 推薦格式: svg, png, ico
favicon: '/icon/favicon.svg' // 或 https://example.com/favicon.svg
}
```
### 主題配色
```ts
color: {
// 默認主題
mode: 'light' // light, dark
// 亮色模式
light: {
// 高亮顏色
// 用於站點標題、滑鼠懸停效果等
primary: 'oklch(25% 0.005 298)'
// 次要顏色
// 用於普通文本
secondary: 'oklch(40% 0.005 298)'
// 背景色
background: 'oklch(96% 0.005 298)'
}
// 暗色模式
dark: {
// 高亮顏色
// 用於標題、hover等
primary: 'oklch(92% 0.005 298)'
// 次要顏色
// 用於普通文本
secondary: 'oklch(77% 0.005 298)'
// 背景色
background: 'oklch(22% 0.005 298)'
}
}
```
### 全局設置
```ts
global: {
// 默認語言
// 站點根路徑 '/' 的語言
locale: 'zh' // zh, zh-tw, ja, en, es, ru
// 更多語言
// 生成 '/ja/' '/en/' 等多語言路徑
// 不要重複填寫默認語言
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
// 字體樣式
fontStyle: 'sans' // sans, serif
// 文章日期格式
dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
// 標題與副標題之間的距離
titleGap: 2 // 1, 2, 3
}
```
### 評論服務
```ts
comment: {
// 開啟評論
enabled: true // true, false
// waline 評論
waline: {
// 服務器地址
serverURL: 'https://retypeset-comment.radishzz.cc'
// emoji 表情地址
emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// 更多表情: https://waline.js.org/en/guide/features/emoji.html
]
// gif 搜索
search: false // true, false
// 圖片上傳
imageUploader: false // true, false
}
}
```
### 搜索引擎優化
```ts
seo: {
// @twitter ID
twitterID: '@radishzz_'
// 站點驗證
verification: {
// google 搜索控制台
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// bing 網站管理員工具
bing: '64708CD514011A7965C84DDE1D169F87'
// yandex 網站管理員
yandex: ''
// baidu 站長工具
baidu: ''
}
// google 網站分析
googleAnalyticsID: ''
// umami 網站分析
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// follow 驗證
follow: {
// 訂閱 ID
feedID: ''
// 用戶 ID
userID: ''
}
// apiflash access key 訪問密鑰
// 自動生成網站截圖用於 open graph
// 獲取訪問密鑰: https://apiflash.com/
apiflashKey: ''
}
```
### 自定義頁腳
```ts
footer: {
// 社交鏈接
links: [
{
name: 'RSS',
url: '/rss.xml', // rss.xml, atom.xml
},
{
name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset',
},
{
name: 'Twitter',
url: 'https://x.com/radishzz_',
},
// {
// name: 'Email',
// url: 'https://example@gmail.com',
// }
]
// 建站年份
startYear: 2024
}
```
### 資源預加載
```ts
preload: {
// 鏈接預加載策略
linkPrefetch: 'viewport' // hover, tap, viewport, load
// 評論服務器地址
commentURL: 'https://retypeset-comment.radishzz.cc'
// 圖床地址
imageHostURL: 'https://image.radishzz.cc'
// 定制 google analytics js
// 適用於路由 google analytics js 到自定義域名的情況
customGoogleAnalyticsJS: ''
// 定制 umami analytics js
// 適用於自部署 umami，或路由 umami analytics js 到自定義域名的情況
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}
```

181
src/content/posts/Theme Guide-zh.md
View file

@ -12,192 +12,183 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
## 主题配置 ## 主题配置
以下是 Retypeset 的主题配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts)（待翻译）。 以下为 Retypeset 的主题配置介绍。通过修改配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 来自定义你的博客。
### Site ### 站点信息
```typescript ```ts
site: { site: {
// site title // 站点标题
title: 'Retypeset' title: 'Retypeset'
// site subtitle // 站点副标题
subtitle: 'Revive the beauty of typography' subtitle: 'Revive the beauty of typography'
// site description // 站点介绍
description: 'Retypeset is a static blog theme based on the Astro framework. Inspired by Typography...' description: 'Retypeset is a static blog theme...'
// 使用 src/i18n/ui.ts 中的多语言标题/副标题/站点描述，替换以上静态配置
i18nTitle: true // true, false i18nTitle: true // true, false
// author name // 作者名称
author: 'radishzz' author: 'radishzz'
// site url // 站点地址
url: 'https://retypeset.radishzz.cc' url: 'https://retypeset.radishzz.cc'
// favicon url // 站点图标
// recommended formats: svg, png or ico // 推荐格式: svg, png, ico
favicon: '/icon/favicon.svg' // or https://example.com/favicon.svg favicon: '/icon/favicon.svg' // 或 https://example.com/favicon.svg
} }
``` ```
### Color ### 主题配色
```typescript ```ts
color: { color: {
// default theme mode // 默认主题
mode: 'light' // light, dark mode: 'light' // light, dark
// 亮色模式
light: { light: {
// primary color // 高亮颜色
// used for title, hover, etc // 用于站点标题、鼠标悬停效果等
// oklch color picker: https://oklch.com/
primary: 'oklch(25% 0.005 298)' primary: 'oklch(25% 0.005 298)'
// secondary color // 次要颜色
// used for post text // 用于普通文本
secondary: 'oklch(40% 0.005 298)' secondary: 'oklch(40% 0.005 298)'
// background color // 背景色
background: 'oklch(96% 0.005 298)' background: 'oklch(96% 0.005 298)'
}; }
// 暗色模式
dark: { dark: {
// primary color // 高亮颜色
// used for title, hover, etc // 用于标题、hover等
// oklch color picker: https://oklch.com/
primary: 'oklch(92% 0.005 298)' primary: 'oklch(92% 0.005 298)'
// secondary color // 次要颜色
// used for post text // 用于普通文本
secondary: 'oklch(77% 0.005 298)' secondary: 'oklch(77% 0.005 298)'
// background color // 背景色
background: 'oklch(22% 0.005 298)' background: 'oklch(22% 0.005 298)'
} }
} }
``` ```
### Font ### 全局设置
```typescript ```ts
global: { global: {
// default language // 默认语言
// 站点根路径 ‘/’ 的语言
locale: 'zh' // zh, zh-tw, ja, en, es, ru locale: 'zh' // zh, zh-tw, ja, en, es, ru
// more languages // 更多语言
// not fill in the locale code above again // 生成 ‘/ja/' '/en/’ 等多语言路径
// 不要重复填写默认语言
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru'] moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
// font styles for post text // 字体样式
fontStyle: 'sans' // sans, serif fontStyle: 'sans' // sans, serif
// date format for posts // 文章日期格式
dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY dateFormat: 'YYYY-MM-DD' // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
// gap between title and subtitle // 标题与副标题之间的距离
titleGap: 2 // 1, 2, 3 titleGap: 2 // 1, 2, 3
} }
``` ```
### Comment ### 评论服务
```typescript ```ts
comment: { comment: {
// enable comment system // 开启评论
enabled: true // true, false enabled: true // true, false
// waline comment system // waline 评论
// https://waline.js.org/en/
waline: { waline: {
// server url // 服务器地址
serverURL: 'https://retypeset-comment.radishzz.cc' serverURL: 'https://retypeset-comment.radishzz.cc'
// emoji url // emoji 表情地址
emoji: [ emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji', 'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji', // 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// more emojis: https://waline.js.org/en/guide/features/emoji.html // 更多表情: https://waline.js.org/en/guide/features/emoji.html
] ]
// gif search // gif 搜索
search: false // true, false search: false // true, false
// image uploader // 图片上传
// bug: unable to hide image uploader icon
imageUploader: false // true, false imageUploader: false // true, false
} }
} }
``` ```
### SEO ### 搜索引擎优化
```typescript ```ts
seo: { seo: {
// @twitter ID // @twitter ID
twitterID: '@radishzz_' twitterID: '@radishzz_'
// site verification // 站点验证
verification: { verification: {
// google search console // google 搜索控制台
// https://search.google.com/search-console
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM' google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// bing webmaster tools // bing 网站管理员工具
// https://www.bing.com/webmasters
bing: '64708CD514011A7965C84DDE1D169F87' bing: '64708CD514011A7965C84DDE1D169F87'
// yandex webmaster // yandex 网站管理员
// https://webmaster.yandex.com
yandex: '' yandex: ''
// baidu search // baidu 站长工具
// https://ziyuan.baidu.com
baidu: '' baidu: ''
}; }
// google analytics // google 网站分析
// https://analytics.google.com
googleAnalyticsID: '' googleAnalyticsID: ''
// umami analytics // umami 网站分析
// https://cloud.umami.is
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697' umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// follow verification // follow 验证
// https://follow.is/
follow: { follow: {
// feed ID // 订阅 ID
feedID: '' feedID: ''
// user ID // 用户 ID
userID: '' userID: ''
}; }
// apiflash access key // apiflash access key 访问密钥
// automatically generate website screenshots for open graph images // 自动生成网站截图用于 open graph
// get your access key at: https://apiflash.com/ // 获取访问密钥: https://apiflash.com/
apiflashKey: '' apiflashKey: ''
} }
``` ```
### Footer ### 自定义页脚
```typescript ```ts
footer: { footer: {
// social links // 社交链接
links: [ links: [
{ {
name: 'RSS', name: 'RSS',
url: '/rss.xml' // rss.xml, atom.xml url: '/rss.xml', // rss.xml, atom.xml
}, },
{ {
name: 'GitHub', name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset' url: 'https://github.com/radishzzz/astro-theme-retypeset',
}, },
{ {
name: 'Twitter', name: 'Twitter',
url: 'https://x.com/radishzz_' url: 'https://x.com/radishzz_',
}, },
// { // {
// name: 'Email'; // name: 'Email',
// url: 'https://example@gmail.com' // url: 'https://example@gmail.com',
// } // }
]; ]
// year of website start // 建站年份
startYear: 2024 startYear: 2024
} }
``` ```
### Preload ### 资源预加载
```typescript ```ts
preload: { preload: {
// link prefetch // 链接预加载策略
// docs: https://docs.astro.build/en/guides/prefetch/#prefetch-strategies
linkPrefetch: 'viewport' // hover, tap, viewport, load linkPrefetch: 'viewport' // hover, tap, viewport, load
// comment server url // 评论服务器地址
commentURL: 'https://retypeset-comment.radishzz.cc' commentURL: 'https://retypeset-comment.radishzz.cc'
// image hosting url // 图床地址
imageHostURL: 'https://image.radishzz.cc' imageHostURL: 'https://image.radishzz.cc'
// custom google analytics js // 定制 google analytics js
// for users who route analytics javascript to a customized domain // 适用于路由 google analytics js 到自定义域名的情况
// See https://gist.github.com/xiaopc/0602f06ca465d76bd9efd3dda9393738
customGoogleAnalyticsJS: '' customGoogleAnalyticsJS: ''
// custom umami analytics js // 定制 umami analytics js
// for users who deploy umami on their own, or route analytics javascript to a customized domain // 适用于自部署 umami，或路由 umami analytics js 到自定义域名的情况
// see https://github.com/umami-software/umami/discussions/1026
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js' customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
} }
``` ```