diff --git a/src/components/Comments/Waline.astro b/src/components/Comments/Waline.astro index bb5dc5c..bba49a1 100644 --- a/src/components/Comments/Waline.astro +++ b/src/components/Comments/Waline.astro @@ -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) - + /* Rendering Options */ + --waline-avatar-radius: 0.5rem; + } + \ No newline at end of file diff --git a/src/content/posts/Theme Guide-en.md b/src/content/posts/Theme Guide-en.md index ea4cf37..91fe5af 100644 --- a/src/content/posts/Theme Guide-en.md +++ b/src/content/posts/Theme Guide-en.md @@ -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' } ``` diff --git a/src/content/posts/Theme Guide-es.md b/src/content/posts/Theme Guide-es.md index d91d9c8..792fae3 100644 --- a/src/content/posts/Theme Guide-es.md +++ b/src/content/posts/Theme Guide-es.md @@ -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' +} +``` diff --git a/src/content/posts/Theme Guide-ja.md b/src/content/posts/Theme Guide-ja.md index 89de181..794975a 100644 --- a/src/content/posts/Theme Guide-ja.md +++ b/src/content/posts/Theme Guide-ja.md @@ -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' +} +``` diff --git a/src/content/posts/Theme Guide-ru.md b/src/content/posts/Theme Guide-ru.md index 12b8050..bd0861a 100644 --- a/src/content/posts/Theme Guide-ru.md +++ b/src/content/posts/Theme Guide-ru.md @@ -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' +} +``` diff --git a/src/content/posts/Theme Guide-zh-tw.md b/src/content/posts/Theme Guide-zh-tw.md index 8d4a640..706b9db 100644 --- a/src/content/posts/Theme Guide-zh-tw.md +++ b/src/content/posts/Theme Guide-zh-tw.md @@ -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' +} +``` diff --git a/src/content/posts/Theme Guide-zh.md b/src/content/posts/Theme Guide-zh.md index 94bb0bb..203becf 100644 --- a/src/content/posts/Theme Guide-zh.md +++ b/src/content/posts/Theme Guide-zh.md @@ -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' } ```