chore: update theme guide

This commit is contained in:
radishzzz 2025-03-26 11:04:21 +00:00
parent 899523f60f
commit 0545b1d0e5
2 changed files with 266 additions and 74 deletions

View file

@ -10,194 +10,194 @@ abbrlink: theme-guide
Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework. Inspired by [Typography](https://astro-theme-typography.vercel.app/), Retypeset establishes a new visual standard and reimagines the layout of all pages, creating a reading experience reminiscent of paper books, reviving the beauty of typography. Details in every sight, elegance in every space. Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework. Inspired by [Typography](https://astro-theme-typography.vercel.app/), Retypeset establishes a new visual standard and reimagines the layout of all pages, creating a reading experience reminiscent of paper books, reviving the beauty of typography. Details in every sight, elegance in every space.
## 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 file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) for Retypeset.
## Site ### Site
``` ```typescript
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 based on the Astro framework. Inspired by Typography...'
i18nTitle: true, // true, false i18nTitle: true // true, false
// author name // author name
author: 'radishzz', author: 'radishzz'
// site url // site url
url: 'https://retypeset.radishzz.cc', url: 'https://retypeset.radishzz.cc'
// favicon url // favicon url
// recommended formats: svg, png or ico // recommended formats: svg, png or ico
favicon: '/icon/favicon.svg', // or https://example.com/favicon.svg favicon: '/icon/favicon.svg' // or https://example.com/favicon.svg
}, }
``` ```
## Color ### Color
``` ```typescript
color: { color: {
// default theme mode // default theme mode
mode: 'light', // light, dark mode: 'light' // light, dark
light: { light: {
// primary color // primary color
// used for title, hover, etc // used for title, hover, etc
// oklch color picker: https://oklch.com/ // 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: { dark: {
// primary color // primary color
// used for title, hover, etc // used for title, hover, etc
// oklch color picker: https://oklch.com/ // 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
secondary: 'oklch(77% 0.005 298)', secondary: 'oklch(77% 0.005 298)'
// background color // background color
background: 'oklch(22% 0.005 298)', background: 'oklch(22% 0.005 298)'
}, }
}, }
``` ```
## Font ### Font
``` ```typescript
global: { global: {
// default language // default language
locale: 'zh', // zh, zh-tw, ja, en, es, ru locale: 'zh' // zh, zh-tw, ja, en, es, ru
// more languages // more languages
// 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 styles for post text
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
// gap between title and subtitle // gap between title and subtitle
titleGap: 2, // 1, 2, 3 titleGap: 2 // 1, 2, 3
}, }
``` ```
## Comment ### Comment
``` ```typescript
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/ // 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 // bug: unable to hide image uploader icon
imageUploader: false, // true, false imageUploader: false // true, false
}, }
}, }
``` ```
## SEO ### SEO
``` ```typescript
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 // https://search.google.com/search-console
google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM', google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
// bing webmaster tools // bing webmaster tools
// https://www.bing.com/webmasters // https://www.bing.com/webmasters
bing: '64708CD514011A7965C84DDE1D169F87', bing: '64708CD514011A7965C84DDE1D169F87'
// yandex webmaster // yandex webmaster
// https://webmaster.yandex.com // https://webmaster.yandex.com
yandex: '', yandex: ''
// baidu search // baidu search
// https://ziyuan.baidu.com // https://ziyuan.baidu.com
baidu: '', baidu: ''
}, };
// google analytics // google analytics
// https://analytics.google.com // https://analytics.google.com
googleAnalyticsID: '', googleAnalyticsID: ''
// umami analytics // umami analytics
// https://cloud.umami.is // https://cloud.umami.is
umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697', umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
// follow verification // follow verification
// https://follow.is/ // 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/
apiflashKey: '', apiflashKey: ''
}, }
``` ```
## Footer ### Footer
``` ```typescript
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
``` ```typescript
preload: { preload: {
// link prefetch // link prefetch
// docs: https://docs.astro.build/en/guides/prefetch/#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'
// image hosting url // image hosting url
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 // 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 // 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'
},
// PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
} }
``` ```

View file

@ -9,3 +9,195 @@ 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)(待翻译)。
### Site
```typescript
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...'
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
}
```
### Color
```typescript
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/
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
global: {
// default language
locale: 'zh' // zh, zh-tw, ja, en, es, ru
// more languages
// 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
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
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',
// 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
}
}
```
### SEO
```typescript
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/
apiflashKey: ''
}
```
### Footer
```typescript
footer: {
// social links
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'
// }
];
// year of website start
startYear: 2024
}
```
### Preload
```typescript
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
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'
}
```