reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +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 {
color: color-mix(in oklch, var(--waline-theme-color), transparent 20%);
color: oklch(var(--un-preset-theme-colors-primary) / 0.75);
}
#waline .wl-edit,
@ -177,70 +177,34 @@ document.addEventListener('astro:after-swap', initWaline)
<!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
<!-- https://waline.js.org/reference/client/style.html -->
<style
define:vars={{
lightPrimary,
lightSecondary,
lightBackground,
darkPrimary,
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);
<style>
#waline {
/* Regular Colors */
--waline-white: var(--uno-colors-background);
--waline-light-grey: oklch(var(--un-preset-theme-colors-primary) / 0.25);
--waline-dark-grey: var(--uno-colors-secondary);
/* Theme Colors */
--waline-theme-color: var(--lightPrimary);
--waline-active-color: var(--lightPrimary);
/* Theme Colors */
--waline-theme-color: var(--uno-colors-primary);
--waline-active-color: var(--uno-colors-primary);
/* Layout Colors */
--waline-color: var(--lightSecondary);
--waline-bg-color: var(--lightBackground);
--waline-bg-color-light: var(--lightBackground);
--waline-bg-color-hover: var(--lightBackground);
--waline-border-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
--waline-disable-bg-color: color-mix(in oklch, var(--lightSecondary), transparent 92%);
--waline-disable-color: var(--lightPrimary);
/* Layout Colors */
--waline-color: var(--uno-colors-secondary);
--waline-bg-color: var(--uno-colors-background);
--waline-bg-color-light: var(--uno-colors-background);
--waline-bg-color-hover: var(--uno-colors-background);
--waline-border-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
--waline-disable-bg-color: oklch(var(--un-preset-theme-colors-secondary) / 0.05);
--waline-disable-color: var(--uno-colors-primary);
/* Special Colors */
--waline-bq-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
/* Special Colors */
--waline-bq-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
/* Information */
--waline-info-bg-color: var(--lightBackground);
--waline-info-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
/* Information */
--waline-info-bg-color: var(--uno-colors-background);
--waline-info-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
/* Rendering Options */
--waline-avatar-radius: 20%;
}
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>
/* Rendering Options */
--waline-avatar-radius: 0.5rem;
}
</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
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 title
title: 'Retypeset'
// site subtitle
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...'
// use i18n title/subtitle/description from src/i18n/ui.ts instead of static ones above
i18nTitle: true // true, false
// author name
author: 'radishzz'
@ -35,27 +36,27 @@ site: {
}
```
### Color
### Theme Color
```typescript
```ts
color: {
// default theme mode
mode: 'light' // light, dark
// light mode
light: {
// primary color
// used for title, hover, etc
// oklch color picker: https://oklch.com/
primary: 'oklch(25% 0.005 298)'
// secondary color
// used for post text
secondary: 'oklch(40% 0.005 298)'
// background color
background: 'oklch(96% 0.005 298)'
};
}
// dark mode
dark: {
// primary color
// used for title, hover, etc
// oklch color picker: https://oklch.com/
primary: 'oklch(92% 0.005 298)'
// secondary color
// used for post text
@ -66,16 +67,18 @@ color: {
}
```
### Font
### Global Settings
```typescript
```ts
global: {
// default language
// language of the site root path '/'
locale: 'zh' // zh, zh-tw, ja, en, es, ru
// more languages
// Generate multi-language paths such as '/es/' '/ru/'
// not fill in the locale code above again
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
// date format for posts
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: {
// enable comment system
enabled: true // true, false
// waline comment system
// https://waline.js.org/en/
waline: {
// server url
serverURL: 'https://retypeset-comment.radishzz.cc'
// emoji url
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/tw-emoji'
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
// more emojis: https://waline.js.org/en/guide/features/emoji.html
]
// gif search
search: false // true, false
// image uploader
// bug: unable to hide image uploader icon
imageUploader: false // true, false
}
}
@ -112,39 +113,32 @@ comment: {
### SEO
```typescript
```ts
seo: {
// @twitter ID
twitterID: '@radishzz_'
// site verification
verification: {
// google search console
// https://search.google.com/search-console
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// bing webmaster tools
// https://www.bing.com/webmasters
bing: '64708CD514011A7965C84DDE1D169F87'
// yandex webmaster
// https://webmaster.yandex.com
yandex: ''
// baidu search
// https://ziyuan.baidu.com
baidu: ''
};
}
// google analytics
// https://analytics.google.com
googleAnalyticsID: ''
// umami analytics
// https://cloud.umami.is
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// follow verification
// https://follow.is/
follow: {
// feed ID
feedID: ''
// user ID
userID: ''
};
}
// apiflash access key
// automatically generate website screenshots for open graph images
// get your access key at: https://apiflash.com/
@ -152,40 +146,39 @@ seo: {
}
```
### Footer
### Footer Settings
```typescript
```ts
footer: {
// social links
links: [
{
name: 'RSS',
url: '/rss.xml' // rss.xml, atom.xml
url: '/rss.xml', // rss.xml, atom.xml
},
{
name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset'
url: 'https://github.com/radishzzz/astro-theme-retypeset',
},
{
name: 'Twitter',
url: 'https://x.com/radishzz_'
url: 'https://x.com/radishzz_',
},
// {
// name: 'Email';
// url: 'https://example@gmail.com'
// name: 'Email',
// url: 'https://example@gmail.com',
// }
];
]
// year of website start
startYear: 2024
}
```
### Preload
### Preload Resources
```typescript
```ts
preload: {
// link prefetch
// docs: https://docs.astro.build/en/guides/prefetch/#prefetch-strategies
// link prefetch strategies
linkPrefetch: 'viewport' // hover, tap, viewport, load
// comment server url
commentURL: 'https://retypeset-comment.radishzz.cc'
@ -193,11 +186,9 @@ preload: {
imageHostURL: 'https://image.radishzz.cc'
// custom google analytics js
// for users who route analytics javascript to a customized domain
// See https://gist.github.com/xiaopc/0602f06ca465d76bd9efd3dda9393738
customGoogleAnalyticsJS: ''
// custom umami analytics js
// 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'
}
```

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.
## 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のテーマ設定ガイドです。設定ファイル [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. Настройте свой блог, изменяя конфигурационный файл [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 的主題配置介紹。通過修改配置文件 [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 title
// 站点标题
title: 'Retypeset'
// site subtitle
// 站点副标题
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
// author name
// 作者名称
author: 'radishzz'
// site url
// 站点地址
url: 'https://retypeset.radishzz.cc'
// favicon url
// recommended formats: svg, png or ico
favicon: '/icon/favicon.svg' // or https://example.com/favicon.svg
// 站点图标
// 推荐格式: svg, png, ico
favicon: '/icon/favicon.svg' // 或 https://example.com/favicon.svg
}
```
### Color
### 主题配色
```typescript
```ts
color: {
// default theme mode
// 默认主题
mode: 'light' // light, dark
// 亮色模式
light: {
// primary color
// used for title, hover, etc
// oklch color picker: https://oklch.com/
// 高亮颜色
// 用于站点标题、鼠标悬停效果等
primary: 'oklch(25% 0.005 298)'
// secondary color
// used for post text
// 次要颜色
// 用于普通文本
secondary: 'oklch(40% 0.005 298)'
// background color
// 背景色
background: 'oklch(96% 0.005 298)'
};
}
// 暗色模式
dark: {
// primary color
// used for title, hover, etc
// oklch color picker: https://oklch.com/
// 高亮颜色
// 用于标题、hover等
primary: 'oklch(92% 0.005 298)'
// secondary color
// used for post text
// 次要颜色
// 用于普通文本
secondary: 'oklch(77% 0.005 298)'
// background color
// 背景色
background: 'oklch(22% 0.005 298)'
}
}
```
### Font
### 全局设置
```typescript
```ts
global: {
// default language
// 默认语言
// 站点根路径 ‘/’ 的语言
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']
// font styles for post text
// 字体样式
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
// gap between title and subtitle
// 标题与副标题之间的距离
titleGap: 2 // 1, 2, 3
}
```
### Comment
### 评论服务
```typescript
```ts
comment: {
// enable comment system
// 开启评论
enabled: true // true, false
// waline comment system
// https://waline.js.org/en/
// waline 评论
waline: {
// server url
// 服务器地址
serverURL: 'https://retypeset-comment.radishzz.cc'
// emoji url
// emoji 表情地址
emoji: [
'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji',
// 'https://unpkg.com/@waline/emojis@1.2.0/bmoji',
// more emojis: https://waline.js.org/en/guide/features/emoji.html
'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
// gif 搜索
search: false // true, false
// image uploader
// bug: unable to hide image uploader icon
// 图片上传
imageUploader: false // true, false
}
}
```
### SEO
### 搜索引擎优化
```typescript
```ts
seo: {
// @twitter ID
twitterID: '@radishzz_'
// site verification
// 站点验证
verification: {
// google search console
// https://search.google.com/search-console
// google 搜索控制台
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// bing webmaster tools
// https://www.bing.com/webmasters
// bing 网站管理员工具
bing: '64708CD514011A7965C84DDE1D169F87'
// yandex webmaster
// https://webmaster.yandex.com
// yandex 网站管理员
yandex: ''
// baidu search
// https://ziyuan.baidu.com
// baidu 站长工具
baidu: ''
};
// google analytics
// https://analytics.google.com
}
// google 网站分析
googleAnalyticsID: ''
// umami analytics
// https://cloud.umami.is
// umami 网站分析
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// follow verification
// https://follow.is/
// follow 验证
follow: {
// feed ID
// 订阅 ID
feedID: ''
// user ID
// 用户 ID
userID: ''
};
// apiflash access key
// automatically generate website screenshots for open graph images
// get your access key at: https://apiflash.com/
}
// apiflash access key 访问密钥
// 自动生成网站截图用于 open graph
// 获取访问密钥: https://apiflash.com/
apiflashKey: ''
}
```
### Footer
### 自定义页脚
```typescript
```ts
footer: {
// social links
// 社交链接
links: [
{
name: 'RSS',
url: '/rss.xml' // rss.xml, atom.xml
url: '/rss.xml', // rss.xml, atom.xml
},
{
name: 'GitHub',
url: 'https://github.com/radishzzz/astro-theme-retypeset'
url: 'https://github.com/radishzzz/astro-theme-retypeset',
},
{
name: 'Twitter',
url: 'https://x.com/radishzz_'
url: 'https://x.com/radishzz_',
},
// {
// name: 'Email';
// url: 'https://example@gmail.com'
// name: 'Email',
// url: 'https://example@gmail.com',
// }
];
// year of website start
]
// 建站年份
startYear: 2024
}
```
### Preload
### 资源预加载
```typescript
```ts
preload: {
// link prefetch
// docs: https://docs.astro.build/en/guides/prefetch/#prefetch-strategies
// 链接预加载策略
linkPrefetch: 'viewport' // hover, tap, viewport, load
// comment server url
// 评论服务器地址
commentURL: 'https://retypeset-comment.radishzz.cc'
// image hosting url
// 图床地址
imageHostURL: 'https://image.radishzz.cc'
// custom google analytics js
// for users who route analytics javascript to a customized domain
// See https://gist.github.com/xiaopc/0602f06ca465d76bd9efd3dda9393738
// 定制 google analytics js
// 适用于路由 google analytics js 到自定义域名的情况
customGoogleAnalyticsJS: ''
// custom umami analytics js
// 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
// 定制 umami analytics js
// 适用于自部署 umami，或路由 umami analytics js 到自定义域名的情况
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}
```