mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
docs: update theme guides
This commit is contained in:
radishzzz
parent
3da5b38407
commit
59297d534e
18 changed files with 848 additions and 384 deletions
|
|
@ -39,9 +39,9 @@
|
|||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^22.14.1",
|
||||
"@types/sanitize-html": "^2.15.0",
|
||||
"@unocss/eslint-plugin": "66.1.0-beta.10",
|
||||
"@unocss/preset-attributify": "66.1.0-beta.10",
|
||||
"@unocss/reset": "66.1.0-beta.10",
|
||||
"@unocss/eslint-plugin": "66.1.0-beta.11",
|
||||
"@unocss/preset-attributify": "66.1.0-beta.11",
|
||||
"@unocss/reset": "66.1.0-beta.11",
|
||||
"astro-eslint-parser": "^1.2.2",
|
||||
"eslint": "^9.24.0",
|
||||
"eslint-plugin-astro": "^1.3.1",
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
"reading-time": "^1.5.0",
|
||||
"sharp": "^0.34.1",
|
||||
"typescript": "~5.8.3",
|
||||
"unocss": "66.1.0-beta.10",
|
||||
"unocss": "66.1.0-beta.11",
|
||||
"unocss-preset-theme": "^0.14.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
|
|
|
|||
582
pnpm-lock.yaml
generated
582
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -12,7 +12,7 @@
|
|||
<style type="text/css">
|
||||
/* Basic styles */
|
||||
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
|
||||
body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:16px;line-height:1.5;word-wrap:break-word}
|
||||
body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:16px;line-height:1.5;word-wrap:break-word;color:oklch(25% 0.005 298)}
|
||||
*{box-sizing:border-box}
|
||||
p{margin-top:0;margin-bottom:16px}
|
||||
strong{font-weight:600}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ abbrlink: markdown-style-guide
|
|||
>
|
||||
> —— <cite>『秋の夜』[^1]</cite>
|
||||
|
||||
[^1]: [『秋の夜』](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))は魯迅の散文詩集『野草』の最初の散文詩で、1924年に書かれました。
|
||||
[^1]: 『[秋の夜](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))』は魯迅の散文詩集『野草』の最初の散文詩で、1924年に書かれました。
|
||||
```
|
||||
|
||||
#### 効果
|
||||
|
|
@ -106,7 +106,7 @@ abbrlink: markdown-style-guide
|
|||
>
|
||||
> —— <cite>『秋の夜』[^1]</cite>
|
||||
|
||||
[^1]: [『秋の夜』](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))は魯迅の散文詩集『野草』の最初の散文詩で、1924年に書かれました。
|
||||
[^1]: 『[秋の夜](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))』は魯迅の散文詩集『野草』の最初の散文詩で、1924年に書かれました。
|
||||
|
||||
## 表
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ abbrlink: markdown-style-guide
|
|||
>
|
||||
> —— <cite>《秋夜》[^1]</cite>
|
||||
|
||||
[^1]: [《秋夜》](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85)) 是魯迅散文詩集《野草》中的第一首散文詩，創作於1924年。
|
||||
[^1]: 《[秋夜](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))》是魯迅散文詩集《野草》中的第一首散文詩，創作於1924年。
|
||||
```
|
||||
|
||||
#### 效果
|
||||
|
|
@ -106,7 +106,7 @@ abbrlink: markdown-style-guide
|
|||
>
|
||||
> —— <cite>《秋夜》[^1]</cite>
|
||||
|
||||
[^1]: [《秋夜》](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85)) 是魯迅散文詩集《野草》中的第一首散文詩，創作於1924年。
|
||||
[^1]: 《[秋夜](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))》是魯迅散文詩集《野草》中的第一首散文詩，創作於1924年。
|
||||
|
||||
## 表格
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ abbrlink: markdown-style-guide
|
|||
>
|
||||
> —— <cite>《秋夜》[^1]</cite>
|
||||
|
||||
[^1]: [《秋夜》](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85)) 是鲁迅散文诗集《野草》中的第一首散文诗，创作于1924年。
|
||||
[^1]: 《[秋夜](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))》是鲁迅散文诗集《野草》中的第一首散文诗，创作于1924年。
|
||||
```
|
||||
|
||||
#### 效果
|
||||
|
|
@ -106,7 +106,7 @@ abbrlink: markdown-style-guide
|
|||
>
|
||||
> —— <cite>《秋夜》[^1]</cite>
|
||||
|
||||
[^1]: [《秋夜》](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85)) 是鲁迅散文诗集《野草》中的第一首散文诗，创作于1924年。
|
||||
[^1]: 《[秋夜](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85))》是鲁迅散文诗集《野草》中的第一首散文诗，创作于1924年。
|
||||
|
||||
## 表格
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ lang: en
|
|||
abbrlink: theme-color-schemes
|
||||
---
|
||||
|
||||
Retypeset defines theme color schemes based on the [OKLCH](https://oklch.com/) color space, with a default print-style black, white, and gray color scheme.
|
||||
Retypeset defines theme color schemes based on the [OKLCH](https://oklch.com/) color space, with a default black, white, and gray color scheme that simulates a print style.
|
||||
|
||||
To meet personalization needs, I've created several color schemes for the theme. You can replace the default colors in [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) and **restart the development server** to apply the new color scheme.
|
||||
To meet personalization needs, I've created several color schemes for the theme. You can replace the default color scheme in [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) and **restart the development server** to preview the new color scheme.
|
||||
|
||||
## Pale Scallion
|
||||
## Scallion White
|
||||
|
||||
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Crow's Wing
|
||||
## Raven Teal
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Inkstone Indigo
|
||||
## Ink Blue
|
||||
|
||||
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Rice Paper Glow
|
||||
## Ecru
|
||||
|
||||
|
||||
|
||||
|
|
@ -82,4 +82,4 @@ dark: {
|
|||
secondary: 'oklch(0.80 0.017 59.39)',
|
||||
background: 'oklch(0.23 0 0)',
|
||||
},
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ lang: es
|
|||
abbrlink: theme-color-schemes
|
||||
---
|
||||
|
||||
Retypeset define los esquemas de color del tema basados en el espacio de color [OKLCH](https://oklch.com/), con un esquema predeterminado de estilo de impresión en negro, blanco y gris.
|
||||
Retypeset define los esquemas de color del tema basados en el espacio de color [OKLCH](https://oklch.com/), con un esquema predeterminado de colores negro, blanco y gris que simula un estilo de impresión.
|
||||
|
||||
Para satisfacer las necesidades de personalización, he creado varios esquemas de color para el tema. Puedes reemplazar los colores predeterminados en [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) y **reiniciar el servidor de desarrollo** para aplicar el nuevo esquema de color.
|
||||
Para satisfacer las necesidades de personalización, he creado varios esquemas de colores para el tema. Puedes reemplazar el esquema de colores predeterminado en [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) y **reiniciar el servidor de desarrollo** para previsualizar el nuevo esquema de colores.
|
||||
|
||||
## Blanco Cebollino
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Amarillo Arroz
|
||||
## Beige
|
||||
|
||||
|
||||
|
||||
|
|
@ -82,4 +82,4 @@ dark: {
|
|||
secondary: 'oklch(0.80 0.017 59.39)',
|
||||
background: 'oklch(0.23 0 0)',
|
||||
},
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ lang: ja
|
|||
abbrlink: theme-color-schemes
|
||||
---
|
||||
|
||||
Retypesetは、[OKLCH](https://oklch.com/)カラースペースに基づいてテーマカラーを定義し、デフォルトでは印刷スタイルの白黒グレーの配色を採用しています。
|
||||
Retypesetは、[OKLCH](https://oklch.com/)カラースペースに基づいてテーマカラーを定義し、デフォルトでは印刷スタイルを模した白黒グレーの配色を採用しています。
|
||||
|
||||
個性的なニーズを満たすため、いくつかのカラースキームを作成しました。[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) でデフォルトの配色を置き換え、**開発サーバーを再起動**して新しい配色をプレビューできます。
|
||||
|
||||
## 若葱色
|
||||
## 葱白色
|
||||
|
||||
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## 濡羽色
|
||||
## 烏青
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## 藍墨色
|
||||
## 墨藍
|
||||
|
||||
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## 糯色
|
||||
## 米色
|
||||
|
||||
|
||||
|
||||
|
|
@ -82,4 +82,4 @@ dark: {
|
|||
secondary: 'oklch(0.80 0.017 59.39)',
|
||||
background: 'oklch(0.23 0 0)',
|
||||
},
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ lang: ru
|
|||
abbrlink: theme-color-schemes
|
||||
---
|
||||
|
||||
Retypeset определяет цветовые схемы темы на основе цветового пространства [OKLCH](https://oklch.com/), с предустановленной типографской цветовой схемой черного, белого и серого.
|
||||
Retypeset определяет цветовые схемы темы на основе цветового пространства [OKLCH](https://oklch.com/), с предустановленной схемой черного, белого и серого цветов, имитирующей печатный стиль.
|
||||
|
||||
Для удовлетворения индивидуальных потребностей я создал несколько цветовых схем для темы. Вы можете заменить цвета по умолчанию в [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) и **перезапустить сервер разработки**, чтобы просмотреть новую цветовую схему.
|
||||
|
||||
## Луковая Белизна
|
||||
## Бледно-зелёный
|
||||
|
||||
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Воронова Синева
|
||||
## Воронёный
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Чернильная Глубина
|
||||
## Чернильно-синий
|
||||
|
||||
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ dark: {
|
|||
},
|
||||
```
|
||||
|
||||
## Рисовое Сияние
|
||||
## Кремовый
|
||||
|
||||
|
||||
|
||||
|
|
@ -82,4 +82,4 @@ dark: {
|
|||
secondary: 'oklch(0.80 0.017 59.39)',
|
||||
background: 'oklch(0.23 0 0)',
|
||||
},
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: 主題配色指南
|
||||
published: 2025-04-11
|
||||
description: Retypeset 基於 OKLCH 顏色空間來定義主題配色，預設為印刷風格的黑白灰配色。為滿足個性化需求，我為主題製作了一些配色方案。你可以在 src/config.ts 中替換預設配色，並重啟開發伺服器以應用新配色。
|
||||
tags:
|
||||
- 指南
|
||||
toc: false
|
||||
|
|
@ -9,9 +8,9 @@ lang: zh-tw
|
|||
abbrlink: theme-color-schemes
|
||||
---
|
||||
|
||||
Retypeset 基於 [OKLCH](https://oklch.com/) 顏色空間來定義主題配色，預設為印刷風格的黑白灰配色。
|
||||
Retypeset 基於 [OKLCH](https://oklch.com/) 顏色空間來定義主題配色，預設為模擬印刷風格的黑白灰配色。
|
||||
|
||||
為滿足個性化需求，我為主題製作了一些配色方案。你可以在 [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) 中替換預設配色，並**重新啟動開發伺服器**以預覽新配色。
|
||||
|
||||
## 蔥白
|
||||
|
||||
|
|
@ -83,4 +82,4 @@ dark: {
|
|||
secondary: 'oklch(0.80 0.017 59.39)',
|
||||
background: 'oklch(0.23 0 0)',
|
||||
},
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: 主题配色指南
|
||||
published: 2025-04-11
|
||||
description: Retypeset 基于 OKLCH 颜色空间来定义主题配色，预设为印刷风格的黑白灰配色。为满足个性化需求，我为主题制作了一些配色方案。你可以在 src/config.ts 中替换默认配色，并重启开发服务器以应用新配色。
|
||||
tags:
|
||||
- 指南
|
||||
toc: false
|
||||
|
|
@ -9,9 +8,9 @@ lang: zh
|
|||
abbrlink: theme-color-schemes
|
||||
---
|
||||
|
||||
Retypeset 基于 [OKLCH](https://oklch.com/) 颜色空间来定义主题配色，预设为印刷风格的黑白灰配色。
|
||||
Retypeset 基于 [OKLCH](https://oklch.com/) 颜色空间来定义主题配色，默认为模拟印刷风格的黑白灰配色。
|
||||
|
||||
为满足个性化需求，我为主题制作了一些配色方案。你可以在 [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) 中替换默认配色，并**重启开发服务器**以预览新配色。
|
||||
|
||||
## 葱白
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Theme Guide
|
||||
published: 2025-01-26
|
||||
updated: 2025-03-12
|
||||
updated: 2025-04-13
|
||||
tags:
|
||||
- Blog Theme
|
||||
- Guide
|
||||
|
|
@ -58,10 +58,8 @@ color: {
|
|||
// dark mode
|
||||
dark: {
|
||||
// primary color
|
||||
// used for title, hover, etc
|
||||
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)'
|
||||
|
|
@ -199,7 +197,7 @@ preload: {
|
|||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
### Front Matter
|
||||
|
||||
|
|
@ -210,13 +208,13 @@ title: Theme Guide
|
|||
published: 2025-01-26
|
||||
|
||||
# Optional
|
||||
description: The first 240 characters of the article will be automatically selected as the description.
|
||||
description: The first 240 characters of the article will be automatically selected as the excerpt.
|
||||
updated: 2025-03-26
|
||||
tags:
|
||||
- Blog Theme
|
||||
- Guide
|
||||
|
||||
# Advanced, optional
|
||||
# Advanced, Optional
|
||||
draft: true/false
|
||||
pin: 1-99
|
||||
toc: true/false
|
||||
|
|
@ -237,7 +235,7 @@ Pins the article to the top. The higher the number, the higher the priority of t
|
|||
|
||||
#### toc
|
||||
|
||||
Generate table of contents. Default is true.
|
||||
Generate table of contents. Shows h2 to h4 headings. Default is true.
|
||||
|
||||
#### lang
|
||||
|
||||
|
|
@ -281,6 +279,83 @@ src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
### Automated Features
|
||||
## Additional Configuration
|
||||
|
||||
Automatically calculates article reading time. Automatically generates Open Graph images for each article. Articles with the same abbrlink will automatically share Waline comments, regardless of the lang 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
|
||||
// src/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 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
|
||||
cjk: 120, // Excerpt limit is 120 characters
|
||||
other: 240, // Excerpt limit is 240 characters
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Styling for Open Graph social images.
|
||||
|
||||
```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
|
||||
|
||||
Color scheme for the RSS feed page.
|
||||
|
||||
```html
|
||||
<!-- public/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{margin:0;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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Guía del Tema
|
||||
published: 2025-01-26
|
||||
updated: 2025-03-12
|
||||
updated: 2025-04-13
|
||||
tags:
|
||||
- Tema de Blog
|
||||
- Guía
|
||||
|
|
@ -58,10 +58,8 @@ color: {
|
|||
// 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)'
|
||||
|
|
@ -199,7 +197,7 @@ preload: {
|
|||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
### Front Matter
|
||||
|
||||
|
|
@ -210,13 +208,13 @@ title: Guía del Tema
|
|||
published: 2025-01-26
|
||||
|
||||
# Opcional
|
||||
description: Los primeros 240 caracteres del artículo se seleccionarán automáticamente como descripción.
|
||||
description: Los primeros 240 caracteres del artículo se seleccionarán automáticamente como extracto.
|
||||
updated: 2025-03-26
|
||||
tags:
|
||||
- Tema de Blog
|
||||
- Guía
|
||||
|
||||
# Avanzado, opcional
|
||||
# Avanzado, Opcional
|
||||
draft: true/false
|
||||
pin: 1-99
|
||||
toc: true/false
|
||||
|
|
@ -237,7 +235,7 @@ Fija el artículo en la parte superior. Cuanto mayor sea el número, mayor será
|
|||
|
||||
#### toc
|
||||
|
||||
¿Generar índice? Valor predeterminado: true.
|
||||
Genera tabla de contenidos. Muestra encabezados h2 a h4. El valor predeterminado es true.
|
||||
|
||||
#### lang
|
||||
|
||||
|
|
@ -281,6 +279,84 @@ src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
### Funciones Automatizadas
|
||||
## Configuración Adicional
|
||||
|
||||
Calcula automáticamente el tiempo de lectura del artículo. Genera automáticamente imágenes Open Graph para cada artículo. Los artículos con el mismo abbrlink compartirán automáticamente comentarios de Waline, independientemente de la configuración de lang.
|
||||
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
|
||||
// src/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 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: { // Página principal
|
||||
cjk: 120, // Límite de extracto es 120 caracteres
|
||||
other: 240, // Límite de extracto es 240 caracteres
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Open Graph
|
||||
|
||||
Estilo para 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
|
||||
|
||||
Esquema de colores para la página de feed RSS.
|
||||
|
||||
```html
|
||||
<!-- public/rss-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{margin:0;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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: テーマ使用ガイド
|
||||
published: 2025-01-26
|
||||
updated: 2025-03-12
|
||||
updated: 2025-04-13
|
||||
tags:
|
||||
- ブログテーマ
|
||||
- ガイド
|
||||
|
|
@ -58,10 +58,8 @@ color: {
|
|||
// ダークモード
|
||||
dark: {
|
||||
// プライマリカラー
|
||||
// サイトタイトル、ホバー効果などに使用
|
||||
primary: 'oklch(92% 0.005 298)'
|
||||
// セカンダリカラー
|
||||
// 通常テキストに使用
|
||||
secondary: 'oklch(77% 0.005 298)'
|
||||
// 背景色
|
||||
background: 'oklch(22% 0.005 298)'
|
||||
|
|
@ -199,7 +197,7 @@ preload: {
|
|||
|
||||
## 新しい記事の作成
|
||||
|
||||
`src/content/posts/` ディレクトリに `.md` または `.mdx` 拡張子を持つ新しいファイルを作成し、ファイルの先頭に Front Matter メタデータを追加します。
|
||||
`src/content/posts/` ディレクトリに `.md` または `.mdx` 拡張子を持つ新しいファイルを作成し、ファイルの先頭に `Front Matter` メタデータを追加します。
|
||||
|
||||
### Front Matter
|
||||
|
||||
|
|
@ -210,7 +208,7 @@ title: テーマ使用ガイド
|
|||
published: 2025-01-26
|
||||
|
||||
# 任意
|
||||
description: 記事の最初の120文字が自動的に説明として選択されます。
|
||||
description: 記事の最初の120文字が自動的に要約として選択されます。
|
||||
updated: 2025-03-26
|
||||
tags:
|
||||
- ブログテーマ
|
||||
|
|
@ -237,7 +235,7 @@ abbrlink: theme-guide
|
|||
|
||||
#### toc
|
||||
|
||||
目次を自動生成するかどうか。デフォルトは true。
|
||||
目次を自動生成するかどうか。h2からh4までの見出しを表示します。デフォルトは true。
|
||||
|
||||
#### lang
|
||||
|
||||
|
|
@ -281,6 +279,84 @@ src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
### 自動化機能の説明
|
||||
## その他の設定
|
||||
|
||||
記事の読書時間を自動的に計算します。各記事のOpen Graph画像を自動的に生成します。同じabbrlinkを持つ記事は、lang設定に関係なく、Walineコメントを自動的に共有します。
|
||||
設定ファイル `src/config.ts` 以外にも、他のファイルに散らばっている設定オプションがあります。
|
||||
|
||||
### シンタックスハイライト
|
||||
|
||||
コードブロックのシンタックスハイライトテーマ。
|
||||
|
||||
```ts
|
||||
// src/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-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{margin:0;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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Руководство по теме
|
||||
published: 2025-01-26
|
||||
updated: 2025-03-12
|
||||
updated: 2025-04-13
|
||||
tags:
|
||||
- Тема блога
|
||||
- Руководство
|
||||
|
|
@ -58,10 +58,8 @@ color: {
|
|||
// темный режим
|
||||
dark: {
|
||||
// основной цвет
|
||||
// используется для заголовков, эффекта наведения и т.д.
|
||||
primary: 'oklch(92% 0.005 298)'
|
||||
// вторичный цвет
|
||||
// используется для текста постов
|
||||
secondary: 'oklch(77% 0.005 298)'
|
||||
// цвет фона
|
||||
background: 'oklch(22% 0.005 298)'
|
||||
|
|
@ -196,9 +194,10 @@ preload: {
|
|||
customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
|
||||
}
|
||||
```
|
||||
|
||||
## Создание Новой Статьи
|
||||
|
||||
Создайте новый файл с расширением `.md` или `.mdx` в директории `src/content/posts/` и добавьте метаданные Front Matter в верхней части файла.
|
||||
Создайте новый файл с расширением `.md` или `.mdx` в директории `src/content/posts/` и добавьте метаданные `Front Matter` в верхней части файла.
|
||||
|
||||
### Front Matter
|
||||
|
||||
|
|
@ -209,13 +208,13 @@ title: Руководство по теме
|
|||
published: 2025-01-26
|
||||
|
||||
# Опционально
|
||||
description: Первые 240 символов статьи будут автоматически выбраны в качестве описания.
|
||||
description: Первые 240 символов статьи будут автоматически выбраны в качестве выдержки.
|
||||
updated: 2025-03-26
|
||||
tags:
|
||||
- Тема блога
|
||||
- Руководство
|
||||
|
||||
# Расширенные настройки, опционально
|
||||
# Расширенные настройки, Опционально
|
||||
draft: true/false
|
||||
pin: 1-99
|
||||
toc: true/false
|
||||
|
|
@ -236,7 +235,7 @@ abbrlink: theme-guide
|
|||
|
||||
#### toc
|
||||
|
||||
Генерировать оглавление. По умолчанию: true.
|
||||
Генерировать оглавление. Показывает заголовки от h2 до h4. По умолчанию: true.
|
||||
|
||||
#### lang
|
||||
|
||||
|
|
@ -280,6 +279,84 @@ src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
### Автоматические Функции
|
||||
## Дополнительная конфигурация
|
||||
|
||||
Автоматически рассчитывает время чтения статьи. Автоматически генерирует изображения Open Graph для каждой статьи. Статьи с одинаковым abbrlink будут автоматически совместно использовать комментарии Waline, независимо от настройки lang.
|
||||
Помимо файла конфигурации `src/config.ts`, существуют некоторые параметры конфигурации, разбросанные в других файлах.
|
||||
|
||||
### Подсветка синтаксиса
|
||||
|
||||
Темы подсветки синтаксиса для блоков кода.
|
||||
|
||||
```ts
|
||||
// src/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-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{margin:0;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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 主題上手指南
|
||||
published: 2025-01-26
|
||||
updated: 2025-03-12
|
||||
updated: 2025-04-13
|
||||
tags:
|
||||
- 部落格主題
|
||||
- 指南
|
||||
|
|
@ -24,7 +24,7 @@ site: {
|
|||
title: 'Retypeset'
|
||||
// 站點副標題
|
||||
subtitle: 'Revive the beauty of typography'
|
||||
// 站點介紹
|
||||
// 站點描述
|
||||
description: 'Retypeset is a static blog theme...'
|
||||
// 使用 src/i18n/ui.ts 中的多語言標題/副標題/站點描述，替換以上靜態配置
|
||||
i18nTitle: true // true, false
|
||||
|
|
@ -58,10 +58,8 @@ color: {
|
|||
// 暗色模式
|
||||
dark: {
|
||||
// 高亮顏色
|
||||
// 用於站點標題、滑鼠懸停效果等
|
||||
primary: 'oklch(92% 0.005 298)'
|
||||
// 次要顏色
|
||||
// 用於普通文本
|
||||
secondary: 'oklch(77% 0.005 298)'
|
||||
// 背景色
|
||||
background: 'oklch(22% 0.005 298)'
|
||||
|
|
@ -199,7 +197,7 @@ preload: {
|
|||
|
||||
## 創建新文章
|
||||
|
||||
在 `src/content/posts/` 目錄中新建以 `.md` 或 `.mdx` 為後綴的文件，並在文件頂部添加 Front Matter 元數據。
|
||||
在 `src/content/posts/` 目錄中新建以 `.md` 或 `.mdx` 為後綴的文件，並在文件頂部添加 `Front Matter` 元數據。
|
||||
|
||||
### Front Matter
|
||||
|
||||
|
|
@ -210,7 +208,7 @@ title: 主題上手指南
|
|||
published: 2025-01-26
|
||||
|
||||
# 可選
|
||||
description: 自動選取文章前 120 字作為描述。
|
||||
description: 自動選取文章前 120 字作為摘要。
|
||||
updated: 2025-03-26
|
||||
tags:
|
||||
- 部落格主題
|
||||
|
|
@ -237,7 +235,7 @@ abbrlink: theme-guide
|
|||
|
||||
#### toc
|
||||
|
||||
是否生成目錄。預設為 true。
|
||||
是否生成目錄。顯示 h2 至 h4 標題。預設為 true。
|
||||
|
||||
#### lang
|
||||
|
||||
|
|
@ -281,6 +279,84 @@ src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
### 自動化配置介紹
|
||||
## 更多配置
|
||||
|
||||
自動計算文章閱讀時間。自動為每篇文章生成 Open Graph 圖片。相同 abbrlink 的文章會自動共享 Waline 評論，且不受 lang 配置影響。
|
||||
除了配置文件 `src/config.ts` 外，還有一些配置項分散在其它文件中。
|
||||
|
||||
### 語法高亮
|
||||
|
||||
代碼塊的語法高亮主題。
|
||||
|
||||
```ts
|
||||
// src/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-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{margin:0;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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 主题上手指南
|
||||
published: 2025-01-26
|
||||
updated: 2025-03-12
|
||||
updated: 2025-04-13
|
||||
tags:
|
||||
- 博客主题
|
||||
- 指南
|
||||
|
|
@ -24,7 +24,7 @@ site: {
|
|||
title: 'Retypeset'
|
||||
// 站点副标题
|
||||
subtitle: 'Revive the beauty of typography'
|
||||
// 站点介绍
|
||||
// 站点描述
|
||||
description: 'Retypeset is a static blog theme...'
|
||||
// 使用 src/i18n/ui.ts 中的多语言标题/副标题/站点描述，替换以上静态配置
|
||||
i18nTitle: true // true, false
|
||||
|
|
@ -58,10 +58,8 @@ color: {
|
|||
// 暗色模式
|
||||
dark: {
|
||||
// 高亮颜色
|
||||
// 用于站点标题、鼠标悬停效果等
|
||||
primary: 'oklch(92% 0.005 298)'
|
||||
// 次要颜色
|
||||
// 用于普通文本
|
||||
secondary: 'oklch(77% 0.005 298)'
|
||||
// 背景色
|
||||
background: 'oklch(22% 0.005 298)'
|
||||
|
|
@ -74,10 +72,10 @@ color: {
|
|||
```ts
|
||||
global: {
|
||||
// 默认语言
|
||||
// 站点根路径 ‘/’ 的语言
|
||||
// 站点根路径 '/' 的语言
|
||||
locale: 'zh' // zh, zh-tw, ja, en, es, ru
|
||||
// 更多语言
|
||||
// 生成 ‘/ja/' '/en/’ 等多语言路径
|
||||
// 生成 '/ja/' '/en/' 等多语言路径
|
||||
// 不要重复填写默认语言，可以为空 []
|
||||
moreLocales: ['zh-tw', 'ja', 'en', 'es', 'ru'] // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
|
||||
// 字体样式
|
||||
|
|
@ -199,7 +197,7 @@ preload: {
|
|||
|
||||
## 创建新文章
|
||||
|
||||
在 `src/content/posts/` 目录中新建以 `.md` 或 `.mdx` 为后缀的文件，并在文件顶部添加 Front Matter 元数据。
|
||||
在 `src/content/posts/` 目录中新建以 `.md` 或 `.mdx` 为后缀的文件，并在文件顶部添加 `Front Matter` 元数据。
|
||||
|
||||
### Front Matter
|
||||
|
||||
|
|
@ -210,7 +208,7 @@ title: 主题上手指南
|
|||
published: 2025-01-26
|
||||
|
||||
# 可选
|
||||
description: 自动选取文章前 120 字作为描述。
|
||||
description: 自动选取文章前 120 字作为摘要。
|
||||
updated: 2025-03-26
|
||||
tags:
|
||||
- 博客主题
|
||||
|
|
@ -237,7 +235,7 @@ abbrlink: theme-guide
|
|||
|
||||
#### toc
|
||||
|
||||
是否生成目录。默认为 true。
|
||||
是否生成目录。显示 h2 至 h4 标题。默认为 true。
|
||||
|
||||
#### lang
|
||||
|
||||
|
|
@ -281,6 +279,84 @@ src/content/posts/guide/apple.md -> example.com/es/posts/banana/
|
|||
src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/
|
||||
```
|
||||
|
||||
### 自动化配置介绍
|
||||
## 更多配置
|
||||
|
||||
自动计算文章阅读时间。自动为每篇文章生成 Open Graph 图片。相同 abbrlink 的文章会自动共享 Waline 评论，且不受 lang 配置影响。
|
||||
除了配置文件 `src/config.ts` 外，还有一些配置项分散在其它文件中。
|
||||
|
||||
### 语法高亮
|
||||
|
||||
代码块的语法高亮主题。
|
||||
|
||||
```ts
|
||||
// src/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-style.xsl -->
|
||||
|
||||
<style type="text/css">
|
||||
body{margin:0;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