mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
docs: update readme and theme guides
This commit is contained in:
radishzzz
parent
49793d5d55
commit
043b811ce4
10 changed files with 572 additions and 598 deletions
|
|
@ -10,11 +10,11 @@ lang: en
|
|||
abbrlink: theme-guide
|
||||
---
|
||||
|
||||
Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework. This guide covers the theme configuration, how to create new posts, and additional configuration options.
|
||||
Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework. This guide introduces theme configuration and how to create new articles, helping you quickly set up your personal blog.
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
Modify the theme configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) to customize your blog.
|
||||
Customize your blog through the configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
|
||||
|
||||
### Site Information
|
||||
|
||||
|
|
@ -195,6 +195,88 @@ preload: {
|
|||
}
|
||||
```
|
||||
|
||||
## Additional Configuration
|
||||
|
||||
Besides the configuration file `src/config.ts`, some configuration options are located in other files.
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
Code block syntax highlighting themes.
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// available themes: https://shiki.style/themes
|
||||
// background color follows the blog theme by default, not the syntax highlighting theme
|
||||
themes: {
|
||||
light: 'github-light' // light theme
|
||||
dark: 'github-dark' // dark theme
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Article Excerpt
|
||||
|
||||
Character count for automatic article excerpts.
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // Chinese, Japanese, Korean
|
||||
other: number // Other languages
|
||||
}> = {
|
||||
list: { // Homepage article list
|
||||
cjk: 120, // Auto-excerpts first 120 characters
|
||||
other: 240, // Auto-excerpts first 240 characters
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graph social image styles.
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // required local path and PNG format
|
||||
size: [250], // logo width
|
||||
},
|
||||
font: {
|
||||
title: { // title
|
||||
families: ['Noto Sans SC'], // font
|
||||
weight: 'Bold', // weight
|
||||
color: [34, 33, 36], // color
|
||||
lineHeight: 1.5, // line height
|
||||
},
|
||||
},
|
||||
fonts: [ // font paths (local or remote)
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // background color
|
||||
// more configurations: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS Feed
|
||||
|
||||
RSS feed page styles.
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* font color */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* background color */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* secondary font color */
|
||||
</style>
|
||||
```
|
||||
|
||||
## Creating a New Post
|
||||
|
||||
Create a new file with `.md` or `.mdx` extension in the `src/content/posts/` directory, and add `Front Matter` metadata at the top of the file.
|
||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
|||
|
||||
#### abbrlink
|
||||
|
||||
Customizes the article URL.
|
||||
Customizes the article URL. Can only contain lowercase letters, numbers, and hyphens `-`.
|
||||
|
||||
```md
|
||||
# src/config.ts
|
||||
|
|
@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
||||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
## Additional Configuration
|
||||
|
||||
Beyond the configuration file `src/config.ts`, there are some configuration options scattered in other files.
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
Code block syntax highlighting themes.
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// available themes: https://shiki.style/themes
|
||||
// background color follows the blog theme by default, not the syntax highlighting theme
|
||||
themes: {
|
||||
light: 'github-light' // light theme
|
||||
dark: 'github-dark' // dark theme
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Article Excerpt
|
||||
|
||||
Character count limit for automatic article excerpts.
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // Chinese, Japanese, Korean
|
||||
other: number // Other languages
|
||||
}> = {
|
||||
list: { // Homepage article list
|
||||
cjk: 120, // Auto-excerpts first 120 characters
|
||||
other: 240, // Auto-excerpts first 240 characters
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graph social image styles.
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // required local path and PNG format
|
||||
size: [250], // logo width
|
||||
},
|
||||
font: {
|
||||
title: { // title
|
||||
families: ['Noto Sans SC'], // font
|
||||
weight: 'Bold', // weight
|
||||
color: [34, 33, 36], // color
|
||||
lineHeight: 1.5, // line height
|
||||
},
|
||||
},
|
||||
fonts: [ // font paths (local or remote)
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // background color
|
||||
// more configurations: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS Feed
|
||||
|
||||
RSS feed page styles.
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* font color */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* background color */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* secondary font color */
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ lang: es
|
|||
abbrlink: theme-guide
|
||||
---
|
||||
|
||||
Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/). Esta guía cubre la configuración del tema, cómo crear nuevas publicaciones y opciones de configuración adicionales.
|
||||
Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/). Esta guía presenta la configuración del tema y cómo crear nuevos artículos, ayudándote a configurar rápidamente tu blog personal.
|
||||
|
||||
## Configuración del Tema
|
||||
|
||||
Modifica el archivo de configuración del tema [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) para personalizar tu blog.
|
||||
Personaliza tu blog a través del archivo de configuración [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
|
||||
|
||||
### Información del Sitio
|
||||
|
||||
|
|
@ -195,6 +195,88 @@ preload: {
|
|||
}
|
||||
```
|
||||
|
||||
## Configuración Adicional
|
||||
|
||||
Además del archivo de configuración `src/config.ts`, algunas opciones de configuración se encuentran en otros archivos.
|
||||
|
||||
### Resaltado de Sintaxis
|
||||
|
||||
Temas de resaltado de sintaxis para bloques de código.
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// temas disponibles: https://shiki.style/themes
|
||||
// el color de fondo sigue el tema del blog por defecto, no el tema de resaltado de sintaxis
|
||||
themes: {
|
||||
light: 'github-light' // tema claro
|
||||
dark: 'github-dark' // tema oscuro
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Extracto de Artículo
|
||||
|
||||
Cantidad de caracteres para extractos automáticos de artículos.
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // Chino, Japonés, Coreano
|
||||
other: number // Otros idiomas
|
||||
}> = {
|
||||
list: { // Lista de artículos en página principal
|
||||
cjk: 120, // Extrae automáticamente los primeros 120 caracteres
|
||||
other: 240, // Extrae automáticamente los primeros 240 caracteres
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Estilos de imágenes sociales Open Graph.
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // ruta local requerida y formato PNG
|
||||
size: [250], // ancho del logo
|
||||
},
|
||||
font: {
|
||||
title: { // título
|
||||
families: ['Noto Sans SC'], // fuente
|
||||
weight: 'Bold', // peso
|
||||
color: [34, 33, 36], // color
|
||||
lineHeight: 1.5, // altura de línea
|
||||
},
|
||||
},
|
||||
fonts: [ // rutas de fuentes (locales o remotas)
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // color de fondo
|
||||
// más configuraciones: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### Canal RSS
|
||||
|
||||
Estilos de página del feed RSS.
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* color de fuente */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* color de fondo */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* color de fuente secundario */
|
||||
</style>
|
||||
```
|
||||
|
||||
## Creación de un Nuevo Artículo
|
||||
|
||||
Crea un nuevo archivo con extensión `.md` o `.mdx` en el directorio `src/content/posts/`, y añade los metadatos `Front Matter` en la parte superior del archivo.
|
||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
|||
|
||||
#### abbrlink
|
||||
|
||||
Personaliza la URL del artículo.
|
||||
Personaliza la URL del artículo. Solo puede contener letras minúsculas, números y guiones `-`.
|
||||
|
||||
```md
|
||||
# src/config.ts
|
||||
|
|
@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
||||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
## Configuración Adicional
|
||||
|
||||
Más allá del archivo de configuración `src/config.ts`, hay algunas opciones de configuración dispersas en otros archivos.
|
||||
|
||||
### Resaltado de Sintaxis
|
||||
|
||||
Temas de resaltado de sintaxis para bloques de código.
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// temas disponibles: https://shiki.style/themes
|
||||
// el color de fondo sigue el tema del blog por defecto, no el tema de resaltado de sintaxis
|
||||
themes: {
|
||||
light: 'github-light' // tema claro
|
||||
dark: 'github-dark' // tema oscuro
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Extracto de Artículo
|
||||
|
||||
Límite de cantidad de caracteres para extractos automáticos de artículos.
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // Chino, Japonés, Coreano
|
||||
other: number // Otros idiomas
|
||||
}> = {
|
||||
list: { // Lista de artículos en página principal
|
||||
cjk: 120, // Extrae automáticamente los primeros 120 caracteres
|
||||
other: 240, // Extrae automáticamente los primeros 240 caracteres
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Estilos de imágenes sociales Open Graph.
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // ruta local requerida y formato PNG
|
||||
size: [250], // ancho del logo
|
||||
},
|
||||
font: {
|
||||
title: { // título
|
||||
families: ['Noto Sans SC'], // fuente
|
||||
weight: 'Bold', // peso
|
||||
color: [34, 33, 36], // color
|
||||
lineHeight: 1.5, // altura de línea
|
||||
},
|
||||
},
|
||||
fonts: [ // rutas de fuentes (locales o remotas)
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // color de fondo
|
||||
// más configuraciones: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### Canal RSS
|
||||
|
||||
Estilos de página del feed RSS.
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* color de fuente */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* color de fondo */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* color de fuente secundario */
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ lang: ja
|
|||
abbrlink: theme-guide
|
||||
---
|
||||
|
||||
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。このガイドではRetypesetテーマの設定方法、新しい記事の作成方法、その他の設定オプションについて説明します。
|
||||
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。本ガイドではテーマの設定方法と新しい記事の作成方法を紹介し、個人ブログを素早く構築できるようサポートします。
|
||||
|
||||
## テーマ設定
|
||||
|
||||
設定ファイル [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) を修正してブログをカスタマイズできます。
|
||||
設定ファイル [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) からあなたのブログをカスタマイズできます。
|
||||
|
||||
### サイト情報
|
||||
|
||||
|
|
@ -195,6 +195,88 @@ preload: {
|
|||
}
|
||||
```
|
||||
|
||||
## その他の設定
|
||||
|
||||
設定ファイル `src/config.ts` 以外にも、一部の設定は他のファイルにあります。
|
||||
|
||||
### シンタックスハイライト
|
||||
|
||||
コードブロックのシンタックスハイライトテーマ。
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// 利用可能なテーマ: https://shiki.style/themes
|
||||
// 背景色はデフォルトでシンタックスハイライトテーマではなく、ブログテーマに従います
|
||||
themes: {
|
||||
light: 'github-light' // ライトテーマ
|
||||
dark: 'github-dark' // ダークテーマ
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 記事の抜粋
|
||||
|
||||
記事の自動抜粋の文字数。
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // 中国語、日本語、韓国語
|
||||
other: number // その他の言語
|
||||
}> = {
|
||||
list: { // ホームページ記事リスト
|
||||
cjk: 120, // 先頭から120文字を自動抜粋
|
||||
other: 240, // 先頭から240文字を自動抜粋
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graphソーシャル画像スタイル。
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // ローカルパスのPNG形式が必要
|
||||
size: [250], // ロゴの幅
|
||||
},
|
||||
font: {
|
||||
title: { // タイトル
|
||||
families: ['Noto Sans SC'], // フォント
|
||||
weight: 'Bold', // 太さ
|
||||
color: [34, 33, 36], // 色
|
||||
lineHeight: 1.5, // 行の高さ
|
||||
},
|
||||
},
|
||||
fonts: [ // フォントパス（ローカルまたはリモート）
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // 背景色
|
||||
// その他の設定: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSSフィード
|
||||
|
||||
RSSフィードページスタイル。
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* フォントカラー */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景色 */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* セカンダリフォントカラー */
|
||||
</style>
|
||||
```
|
||||
|
||||
## 新しい記事の作成
|
||||
|
||||
`src/content/posts/` ディレクトリに `.md` または `.mdx` 拡張子を持つ新しいファイルを作成し、ファイルの先頭に `Front Matter` メタデータを追加します。
|
||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
|||
|
||||
#### abbrlink
|
||||
|
||||
記事のURLをカスタマイズします。
|
||||
記事のURLをカスタマイズします。小文字、数字、ハイフン `-` のみ使用できます。
|
||||
|
||||
```md
|
||||
# src/config.ts
|
||||
|
|
@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
||||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
## その他の設定
|
||||
|
||||
設定ファイル `src/config.ts` 以外にも、他のファイルに散らばっている設定オプションがあります。
|
||||
|
||||
### シンタックスハイライト
|
||||
|
||||
コードブロックのシンタックスハイライトテーマ。
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// 利用可能なテーマ: https://shiki.style/themes
|
||||
// 背景色はデフォルトでシンタックスハイライトテーマではなく、ブログテーマに従います
|
||||
themes: {
|
||||
light: 'github-light' // ライトテーマ
|
||||
dark: 'github-dark' // ダークテーマ
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 記事の抜粋
|
||||
|
||||
記事の自動抜粋の文字数量制限。
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // 中国語、日本語、韓国語
|
||||
other: number // その他の言語
|
||||
}> = {
|
||||
list: { // ホームページ記事リスト
|
||||
cjk: 120, // 先頭から120文字を自動抜粋
|
||||
other: 240, // 先頭から240文字を自動抜粋
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graphソーシャル画像スタイル。
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // ローカルパスのPNG形式が必要
|
||||
size: [250], // ロゴの幅
|
||||
},
|
||||
font: {
|
||||
title: { // タイトル
|
||||
families: ['Noto Sans SC'], // フォント
|
||||
weight: 'Bold', // 太さ
|
||||
color: [34, 33, 36], // 色
|
||||
lineHeight: 1.5, // 行の高さ
|
||||
},
|
||||
},
|
||||
fonts: [ // フォントパス（ローカルまたはリモート）
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // 背景色
|
||||
// その他の設定: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSSフィード
|
||||
|
||||
RSSフィードページスタイル。
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* フォントカラー */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景色 */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* セカンダリフォントカラー */
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ lang: ru
|
|||
abbrlink: theme-guide
|
||||
---
|
||||
|
||||
Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/). Это руководство охватывает настройку темы, создание новых статей и дополнительные параметры конфигурации.
|
||||
Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/). Данное руководство знакомит с настройками темы и созданием новых статей, помогая вам быстро настроить личный блог.
|
||||
|
||||
## Конфигурация темы
|
||||
|
||||
Настройте свой блог, изменяя конфигурационный файл темы [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
|
||||
Настройте свой блог через конфигурационный файл [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts).
|
||||
|
||||
### Информация о сайте
|
||||
|
||||
|
|
@ -195,6 +195,88 @@ preload: {
|
|||
}
|
||||
```
|
||||
|
||||
## Дополнительная конфигурация
|
||||
|
||||
Кроме файла конфигурации `src/config.ts`, некоторые параметры находятся в других файлах.
|
||||
|
||||
### Подсветка синтаксиса
|
||||
|
||||
Темы подсветки синтаксиса для блоков кода.
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// доступные темы: https://shiki.style/themes
|
||||
// цвет фона по умолчанию следует теме блога, а не теме подсветки синтаксиса
|
||||
themes: {
|
||||
light: 'github-light' // светлая тема
|
||||
dark: 'github-dark' // темная тема
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Отрывок статьи
|
||||
|
||||
Количество символов для автоматических отрывков статей.
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // Китайский, Японский, Корейский
|
||||
other: number // Другие языки
|
||||
}> = {
|
||||
list: { // Список статей на главной странице
|
||||
cjk: 120, // Автоматически берет первые 120 символов
|
||||
other: 240, // Автоматически берет первые 240 символов
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Стили изображений Open Graph для социальных сетей.
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // требуется локальный путь и формат PNG
|
||||
size: [250], // ширина логотипа
|
||||
},
|
||||
font: {
|
||||
title: { // заголовок
|
||||
families: ['Noto Sans SC'], // шрифт
|
||||
weight: 'Bold', // вес
|
||||
color: [34, 33, 36], // цвет
|
||||
lineHeight: 1.5, // высота строки
|
||||
},
|
||||
},
|
||||
fonts: [ // пути к шрифтам (локальные или удаленные)
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // цвет фона
|
||||
// дополнительные настройки: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS-лента
|
||||
|
||||
Стили страницы RSS-ленты.
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* цвет шрифта */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* цвет фона */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* вторичный цвет шрифта */
|
||||
</style>
|
||||
```
|
||||
|
||||
## Создание Новой Статьи
|
||||
|
||||
Создайте новый файл с расширением `.md` или `.mdx` в директории `src/content/posts/` и добавьте метаданные `Front Matter` в верхней части файла.
|
||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
|||
|
||||
#### abbrlink
|
||||
|
||||
Настраивает URL статьи.
|
||||
Настраивает URL статьи. Может содержать только строчные буквы, цифры и дефисы `-`.
|
||||
|
||||
```md
|
||||
# src/config.ts
|
||||
|
|
@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
||||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
## Дополнительная конфигурация
|
||||
|
||||
Помимо файла конфигурации `src/config.ts`, существуют некоторые параметры конфигурации, разбросанные в других файлах.
|
||||
|
||||
### Подсветка синтаксиса
|
||||
|
||||
Темы подсветки синтаксиса для блоков кода.
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// доступные темы: https://shiki.style/themes
|
||||
// цвет фона по умолчанию следует теме блога, а не теме подсветки синтаксиса
|
||||
themes: {
|
||||
light: 'github-light' // светлая тема
|
||||
dark: 'github-dark' // темная тема
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Отрывок статьи
|
||||
|
||||
Лимит количества символов для автоматических отрывков статей.
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // Китайский, Японский, Корейский
|
||||
other: number // Другие языки
|
||||
}> = {
|
||||
list: { // Список статей на главной странице
|
||||
cjk: 120, // Автоматически берет первые 120 символов
|
||||
other: 240, // Автоматически берет первые 240 символов
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Стили изображений Open Graph для социальных сетей.
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // требуется локальный путь и формат PNG
|
||||
size: [250], // ширина логотипа
|
||||
},
|
||||
font: {
|
||||
title: { // заголовок
|
||||
families: ['Noto Sans SC'], // шрифт
|
||||
weight: 'Bold', // вес
|
||||
color: [34, 33, 36], // цвет
|
||||
lineHeight: 1.5, // высота строки
|
||||
},
|
||||
},
|
||||
fonts: [ // пути к шрифтам (локальные или удаленные)
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // цвет фона
|
||||
// дополнительные настройки: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS-лента
|
||||
|
||||
Стили страницы RSS-ленты.
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* цвет шрифта */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* цвет фона */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* вторичный цвет шрифта */
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ lang: zh-tw
|
|||
abbrlink: theme-guide
|
||||
---
|
||||
|
||||
Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本文是 Retypeset 主題的上手指南，包括主題配置介紹，如何創建新文章和更多配置說明。
|
||||
Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本文為 Retypeset 主題上手指南，主要介紹主題配置與如何創建新文章，幫助你快速搭建個人部落格。
|
||||
|
||||
## 主題配置
|
||||
|
||||
修改主題配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 來自定義你的部落格。
|
||||
通過配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 自定義你的部落格。
|
||||
|
||||
### 站點信息
|
||||
|
||||
|
|
@ -195,6 +195,88 @@ preload: {
|
|||
}
|
||||
```
|
||||
|
||||
## 更多配置
|
||||
|
||||
除了配置文件 `src/config.ts` 外，還有部分配置項位於其它文件中。
|
||||
|
||||
### 語法高亮
|
||||
|
||||
代碼塊的語法高亮主題。
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// 可選主題：https://shiki.style/themes
|
||||
// 背景色默認跟隨部落格主題，而非語法高亮主題
|
||||
themes: {
|
||||
light: 'github-light' // 亮色主題
|
||||
dark: 'github-dark' // 暗色主題
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 文章摘要
|
||||
|
||||
文章自動摘要的字元數量。
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // 中文、日文、韓文
|
||||
other: number // 其他語言
|
||||
}> = {
|
||||
list: { // 首頁文章列表
|
||||
cjk: 120, // 自動摘要前 120 字
|
||||
other: 240, // 自動摘要前 240 字
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graph 社交圖片樣式。
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // 本地路徑的 PNG 圖片
|
||||
size: [250], // logo 寬度
|
||||
},
|
||||
font: {
|
||||
title: { // 標題
|
||||
families: ['Noto Sans SC'], // 字體
|
||||
weight: 'Bold', // 字重
|
||||
color: [34, 33, 36], // 顏色
|
||||
lineHeight: 1.5, // 行高
|
||||
},
|
||||
},
|
||||
fonts: [ // 字體路徑（本地或遠程）
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // 背景色
|
||||
// 更多配置：https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS 訂閱
|
||||
|
||||
RSS 訂閱頁配色。
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* 字體顏色 */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景顏色 */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* 次要字體顏色 */
|
||||
</style>
|
||||
```
|
||||
|
||||
## 創建新文章
|
||||
|
||||
在 `src/content/posts/` 目錄中新建以 `.md` 或 `.mdx` 為後綴的文件，並在文件頂部添加 `Front Matter` 元數據。
|
||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
|||
|
||||
#### abbrlink
|
||||
|
||||
自定義文章 URL。
|
||||
自定義文章 URL。只能包含小寫字母、數字和連字符 `-`。
|
||||
|
||||
```md
|
||||
# src/config.ts
|
||||
|
|
@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
||||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
## 更多配置
|
||||
|
||||
除了配置文件 `src/config.ts` 外，還有一些配置項分散在其它文件中。
|
||||
|
||||
### 語法高亮
|
||||
|
||||
代碼塊的語法高亮主題。
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// 可選主題：https://shiki.style/themes
|
||||
// 背景色默認跟隨部落格主題，而非語法高亮主題
|
||||
themes: {
|
||||
light: 'github-light' // 亮色主題
|
||||
dark: 'github-dark' // 暗色主題
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 文章摘要
|
||||
|
||||
文章自動摘要的字符數量限制。
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // 中文、日文、韓文
|
||||
other: number // 其他語言
|
||||
}> = {
|
||||
list: { // 首頁文章列表
|
||||
cjk: 120, // 自動摘要前 120 字
|
||||
other: 240, // 自動摘要前 240 字
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graph 社交圖片樣式。
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // 本地路徑的 PNG 圖片
|
||||
size: [250], // logo 寬度
|
||||
},
|
||||
font: {
|
||||
title: { // 標題
|
||||
families: ['Noto Sans SC'], // 字體
|
||||
weight: 'Bold', // 字重
|
||||
color: [34, 33, 36], // 顏色
|
||||
lineHeight: 1.5, // 行高
|
||||
},
|
||||
},
|
||||
fonts: [ // 字體路徑（本地或遠程）
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // 背景色
|
||||
// 更多配置：https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS 訂閱
|
||||
|
||||
RSS 訂閱頁配色。
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* 字體顏色 */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景顏色 */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* 次要字體顏色 */
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ lang: zh
|
|||
abbrlink: theme-guide
|
||||
---
|
||||
|
||||
Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本文是 Retypeset 主题的上手指南，包括主题配置介绍，如何创建新文章和更多配置说明。
|
||||
Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本文为 Retypeset 主题上手指南，主要介绍主题配置与如何创建新文章，帮助你快速搭建个人博客。
|
||||
|
||||
## 主题配置
|
||||
|
||||
修改主题配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 来自定义你的博客。
|
||||
通过配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 自定义你的博客。
|
||||
|
||||
### 站点信息
|
||||
|
||||
|
|
@ -195,6 +195,88 @@ preload: {
|
|||
}
|
||||
```
|
||||
|
||||
## 更多配置
|
||||
|
||||
除了配置文件 `src/config.ts` 外，还有部分配置项位于其它文件中。
|
||||
|
||||
### 语法高亮
|
||||
|
||||
代码块的语法高亮主题。
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// 可选主题：https://shiki.style/themes
|
||||
// 背景色固定跟随博客主题，而非语法高亮主题
|
||||
themes: {
|
||||
light: 'github-light' // 亮色主题
|
||||
dark: 'github-dark' // 暗色主题
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 文章摘要
|
||||
|
||||
文章自动摘要的字符数量。
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // 中文、日文、韩文
|
||||
other: number // 其他语言
|
||||
}> = {
|
||||
list: { // 首页文章列表
|
||||
cjk: 120, // 自动摘要前 120 字
|
||||
other: 240, // 自动摘要前 240 字
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graph 社交图片样式。
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // 本地路径的 PNG 图片
|
||||
size: [250], // logo 宽度
|
||||
},
|
||||
font: {
|
||||
title: { // 标题
|
||||
families: ['Noto Sans SC'], // 字体
|
||||
weight: 'Bold', // 字重
|
||||
color: [34, 33, 36], // 颜色
|
||||
lineHeight: 1.5, // 行高
|
||||
},
|
||||
},
|
||||
fonts: [ // 字体路径（本地或远程）
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // 背景色
|
||||
// 更多配置：https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS 订阅
|
||||
|
||||
RSS 订阅页配色。
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* 字体颜色 */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景颜色 */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* 次要字体颜色 */
|
||||
</style>
|
||||
```
|
||||
|
||||
## 创建新文章
|
||||
|
||||
在 `src/content/posts/` 目录中新建以 `.md` 或 `.mdx` 为后缀的文件，并在文件顶部添加 `Front Matter` 元数据。
|
||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
|||
|
||||
#### abbrlink
|
||||
|
||||
自定义文章 URL。
|
||||
自定义文章 URL。只能包含小写字母、数字和连字符 `-`。
|
||||
|
||||
```md
|
||||
# src/config.ts
|
||||
|
|
@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
||||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
## 更多配置
|
||||
|
||||
除了配置文件 `src/config.ts` 外，还有一些配置项分散在其它文件中。
|
||||
|
||||
### 语法高亮
|
||||
|
||||
代码块的语法高亮主题。
|
||||
|
||||
```ts
|
||||
// astro.config.ts
|
||||
|
||||
shikiConfig: {
|
||||
// 可选主题：https://shiki.style/themes
|
||||
// 背景色固定跟随博客主题，而非语法高亮主题
|
||||
themes: {
|
||||
light: 'github-light' // 亮色主题
|
||||
dark: 'github-dark' // 暗色主题
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 文章摘要
|
||||
|
||||
文章自动摘要的字符数量限制。
|
||||
|
||||
```ts
|
||||
// src/utils/description.ts
|
||||
|
||||
const EXCERPT_LENGTHS: Record<ExcerptScene, {
|
||||
cjk: number // 中文、日文、韩文
|
||||
other: number // 其他语言
|
||||
}> = {
|
||||
list: { // 首页文章列表
|
||||
cjk: 120, // 自动摘要前 120 字
|
||||
other: 240, // 自动摘要前 240 字
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Open Graph 社交图片样式。
|
||||
|
||||
```ts
|
||||
// src/pages/og/[...image].ts
|
||||
|
||||
getImageOptions: (_path, page) => ({
|
||||
logo: {
|
||||
path: './public/icon/og-logo.png', // 本地路径的 PNG 图片
|
||||
size: [250], // logo 宽度
|
||||
},
|
||||
font: {
|
||||
title: { // 标题
|
||||
families: ['Noto Sans SC'], // 字体
|
||||
weight: 'Bold', // 字重
|
||||
color: [34, 33, 36], // 颜色
|
||||
lineHeight: 1.5, // 行高
|
||||
},
|
||||
},
|
||||
fonts: [ // 字体路径（本地或远程）
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
|
||||
'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
|
||||
],
|
||||
bgGradient: [[242, 241, 245]], // 背景色
|
||||
// 更多配置：https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
|
||||
})
|
||||
```
|
||||
|
||||
### RSS 订阅
|
||||
|
||||
RSS 订阅页配色。
|
||||
|
||||
```html
|
||||
<!-- public/rss/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{color:oklch(25% 0.005 298)} /* 字体颜色 */
|
||||
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景颜色 */
|
||||
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* 次要字体颜色 */
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue