mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 11:41:17 +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
42
README.md
42
README.md
|
|
@ -30,7 +30,7 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Built with Astro and UnoCSS
|
- Built with Astro and UnoCSS
|
||||||
- Support for SEO, Sitemap, OpenGraph, TOC, RSS, MDX and KaTeX
|
- Support for SEO, Sitemap, OpenGraph, TOC, RSS, MDX and LaTeX
|
||||||
- i18n support
|
- i18n support
|
||||||
- Light / Dark mode
|
- Light / Dark mode
|
||||||
- Elegant view transitions
|
- Elegant view transitions
|
||||||
|
|
@ -49,55 +49,43 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
|
||||||
<a>
|
<a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## Usage
|
## Getting Started
|
||||||
|
|
||||||
1. [`Fork`](https://github.com/radishzzz/astro-theme-retypeset/fork) this repository, or use this template to create a new repository.
|
1. [Fork](https://github.com/radishzzz/astro-theme-retypeset/fork) this repository, or use this template to create a new repository.
|
||||||
|
|
||||||
2. In your forked repository, click the `Code` button, copy the `HTTPS` repository URL, and run the following commands in your terminal:
|
2. Click the `Code` button, copy the `HTTPS` URL, and run the following commands in your terminal:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Clone the remote repository to your local machine
|
# Clone the repository
|
||||||
git clone repository-url
|
git clone repository-url
|
||||||
|
|
||||||
# Navigate to the repository directory
|
# Navigate to the project directory
|
||||||
cd repository-name
|
cd repository-name
|
||||||
|
|
||||||
# Install pnpm globally (if not already installed)
|
# Install pnpm globally (if not already installed)
|
||||||
npm install -g pnpm
|
npm install -g pnpm
|
||||||
|
|
||||||
# Install project dependencies
|
# Install dependencies
|
||||||
pnpm install
|
pnpm install
|
||||||
|
|
||||||
# Start the local development server
|
# Start the development server
|
||||||
pnpm dev
|
pnpm dev
|
||||||
```
|
```
|
||||||
|
|
||||||
3. Open [http://localhost:4321/](http://localhost:4321/) in your browser to preview the theme in real-time.
|
3. Open [localhost:4321](http://localhost:4321/) in your browser to see a live preview of your website.
|
||||||
|
|
||||||
4. Modify the theme configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) to customize your blog.
|
4. Refer to the [Theme Guide](https://retypeset.radishzz.cc/en/posts/theme-guide/) to customize your blog and create new articles.
|
||||||
|
|
||||||
5. Commit and push your changes to the remote repository.
|
5. Refer to the [Astro Deployment Guides](https://docs.astro.build/en/guides/deploy/) to deploy your blog to Netlify, Vercel, or other platforms.
|
||||||
|
|
||||||
## Documentation
|
|
||||||
|
|
||||||
- [Theme Guide](https://retypeset.radishzz.cc/en/posts/theme-guide/)
|
|
||||||
- [Markdown Style Guide](https://retypeset.radishzz.cc/en/posts/markdown-style-guide/)
|
|
||||||
- [Theme Color Schemes](https://retypeset.radishzz.cc/en/posts/theme-color-schemes/)
|
|
||||||
|
|
||||||
## Deploy
|
|
||||||
|
|
||||||
1. Click `Deploy to Netlify` or `Deploy to Vercel` below.
|
|
||||||
|
|
||||||
 [](https://app.netlify.com/start)
|
 [](https://app.netlify.com/start)
|
||||||
[](https://vercel.com/new)
|
[](https://vercel.com/new)
|
||||||
|
|
||||||
2. Follow the instructions, select your repository, and click `Deploy` to start deployment.
|
|
||||||
|
|
||||||
3. For other platforms, please refer to the [Astro Deployment Guides](https://docs.astro.build/en/guides/deploy/).
|
|
||||||
|
|
||||||
## Updates
|
## Updates
|
||||||
|
|
||||||
Theme Retypeset releases new features and bug fixes from time to time. You can refer to the [GitHub Docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to run `Sync fork` in your forked repository to synchronize with the latest branch. Be careful not to click `Discard Changes`, or you will lose your modifications.
|
- Refer to the [GitHub Docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to run `Sync fork` in your repository to sync with the latest branch.
|
||||||
|
|
||||||
|
- Do not click `Discard Changes`, or you will lose your modifications.
|
||||||
|
|
||||||
## Commands
|
## Commands
|
||||||
|
|
||||||
|
|
@ -105,7 +93,7 @@ All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
| :--------------------- | :----------------------------------------------- |
|
| :--------------------- | :----------------------------------------------- |
|
||||||
| `pnpm install` | Install project dependencies |
|
| `pnpm install` | Install dependencies |
|
||||||
| `pnpm dev` | Starts local dev server at `localhost:4321` |
|
| `pnpm dev` | Starts local dev server at `localhost:4321` |
|
||||||
| `pnpm build` | Build your production site to `./dist/` |
|
| `pnpm build` | Build your production site to `./dist/` |
|
||||||
| `pnpm preview` | Preview your build locally, before deploying |
|
| `pnpm preview` | Preview your build locally, before deploying |
|
||||||
|
|
|
||||||
46
README.zh.md
46
README.zh.md
|
|
@ -30,7 +30,7 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
|
||||||
## 特征
|
## 特征
|
||||||
|
|
||||||
- 基于 Astro 与 UnoCSS 开发
|
- 基于 Astro 与 UnoCSS 开发
|
||||||
- 支持 SEO、Sitemap、OpenGraph、TOC、RSS、MDX 和 KaTeX
|
- 支持 SEO、Sitemap、OpenGraph、TOC、RSS、MDX 和 LaTeX
|
||||||
- i18n 多语言
|
- i18n 多语言
|
||||||
- 亮色/暗色模式
|
- 亮色/暗色模式
|
||||||
- 优雅的过渡动画
|
- 优雅的过渡动画
|
||||||
|
|
@ -49,55 +49,43 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
|
||||||
<a>
|
<a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## 用法
|
## 开始
|
||||||
|
|
||||||
1. 点击 [`Fork`](https://github.com/radishzzz/astro-theme-retypeset/fork) 复刻此仓库，或使用此模版创建新仓库。
|
1. [Fork](https://github.com/radishzzz/astro-theme-retypeset/fork) 此仓库，或使用此模版创建新仓库。
|
||||||
|
|
||||||
2. 在复刻仓库中点击 `Code` 按钮，复制 `HTTPS` 仓库地址，并在终端中执行：
|
2. 点击 `Code` 按钮，复制 `HTTPS` 地址，在终端执行：
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 克隆远程仓库至本地
|
# 克隆仓库
|
||||||
git clone 仓库地址
|
git clone 仓库地址
|
||||||
|
|
||||||
# 进入本地仓库根目录
|
# 进入项目目录
|
||||||
cd 仓库名称
|
cd 仓库名称
|
||||||
|
|
||||||
# 全局安装 pnpm（若未安装）
|
# 全局安装 pnpm（如果未安装）
|
||||||
npm install -g pnpm
|
npm install -g pnpm
|
||||||
|
|
||||||
# 安装项目依赖
|
# 安装依赖
|
||||||
pnpm install
|
pnpm install
|
||||||
|
|
||||||
# 启动本地开发服务器
|
# 启动开发服务器
|
||||||
pnpm dev
|
pnpm dev
|
||||||
```
|
```
|
||||||
|
|
||||||
3. 在浏览器中打开 [http://localhost:4321/](http://localhost:4321/)，即可实时预览主题效果。
|
3. 在浏览器中打开 [localhost:4321](http://localhost:4321/)，查看网站的实时预览。
|
||||||
|
|
||||||
4. 修改主题配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 来自定义你的博客。
|
4. 参考 [主题上手指南](https://retypeset.radishzz.cc/posts/theme-guide/)，自定义你的博客并创建新文章。
|
||||||
|
|
||||||
5. 提交并推送你的修改至远程仓库。
|
5. 参考 [Astro 部署指南](https://docs.astro.build/zh-cn/guides/deploy/)，将博客部署至 Netlify、Vercel 等平台。
|
||||||
|
|
||||||
## 文档
|
|
||||||
|
|
||||||
- [主题上手指南](https://retypeset.radishzz.cc/posts/theme-guide/)
|
|
||||||
- [Markdown 样式指南](https://retypeset.radishzz.cc/posts/markdown-style-guide/)
|
|
||||||
- [主题配色指南](https://retypeset.radishzz.cc/posts/theme-color-schemes/)
|
|
||||||
|
|
||||||
## 部署
|
|
||||||
|
|
||||||
1. 点击下方 `Deploy to Netlify` 或 `Deploy to Vercel`。
|
|
||||||
|
|
||||||
 [](https://app.netlify.com/start)
|
 [](https://app.netlify.com/start)
|
||||||
[](https://vercel.com/new)
|
[](https://vercel.com/new)
|
||||||
|
|
||||||
2. 跟随指示，选择对应仓库，再点击 `Deploy` 即可开始部署。
|
|
||||||
|
|
||||||
3. 其它平台请参考 [Astro 部署指南](https://docs.astro.build/zh-cn/guides/deploy/)。
|
|
||||||
|
|
||||||
## 更新
|
## 更新
|
||||||
|
|
||||||
Retypeset 主题会不定期发布新功能和问题修复。你可以参考 [GitHub 文档](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)，在复刻仓库中执行 `Sync fork` 同步最新分支。注意，不要点击 `Discard Changes`，否则会丢失你的更改。
|
- 参考 [GitHub 文档](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)，在仓库中执行 `Sync fork` 同步复刻。
|
||||||
|
|
||||||
|
- 不要点击 `Discard Changes`，否则会丢失你的更改。
|
||||||
|
|
||||||
## 指令
|
## 指令
|
||||||
|
|
||||||
|
|
@ -105,7 +93,7 @@ Retypeset 主题会不定期发布新功能和问题修复。你可以参考 [Gi
|
||||||
|
|
||||||
| 指令 | 作用 |
|
| 指令 | 作用 |
|
||||||
| :--------------------- | :------------------------------------- |
|
| :--------------------- | :------------------------------------- |
|
||||||
| `pnpm install` | 安装项目依赖 |
|
| `pnpm install` | 安装依赖 |
|
||||||
| `pnpm dev` | 在 `localhost:4321` 启动本地开发服务器 |
|
| `pnpm dev` | 在 `localhost:4321` 启动本地开发服务器 |
|
||||||
| `pnpm build` | 构建网站至 `./dist/` |
|
| `pnpm build` | 构建网站至 `./dist/` |
|
||||||
| `pnpm preview` | 本地预览已构建的网站 |
|
| `pnpm preview` | 本地预览已构建的网站 |
|
||||||
|
|
@ -123,8 +111,6 @@ Retypeset 主题会不定期发布新功能和问题修复。你可以参考 [Gi
|
||||||
|
|
||||||
## Star History
|
## Star History
|
||||||
|
|
||||||
感谢每一位 star 的朋友，你们的支持是我持续维护项目的动力！
|
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://star-history.com/#radishzzz/astro-theme-retypeset&Date">
|
<a href="https://star-history.com/#radishzzz/astro-theme-retypeset&Date">
|
||||||
<picture>
|
<picture>
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,12 @@
|
||||||
"lint:fix": "eslint . --fix"
|
"lint:fix": "eslint . --fix"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/mdx": "^4.2.3",
|
"@astrojs/mdx": "^4.2.4",
|
||||||
"@astrojs/partytown": "^2.1.4",
|
"@astrojs/partytown": "^2.1.4",
|
||||||
"@astrojs/rss": "^4.0.11",
|
"@astrojs/rss": "^4.0.11",
|
||||||
"@astrojs/sitemap": "^3.3.0",
|
"@astrojs/sitemap": "^3.3.0",
|
||||||
"@waline/client": "^3.5.6",
|
"@waline/client": "^3.5.6",
|
||||||
"astro": "^5.6.1",
|
"astro": "^5.6.2",
|
||||||
"astro-compress": "^2.3.8",
|
"astro-compress": "^2.3.8",
|
||||||
"astro-og-canvas": "^0.7.0",
|
"astro-og-canvas": "^0.7.0",
|
||||||
"astro-robots-txt": "^1.0.0",
|
"astro-robots-txt": "^1.0.0",
|
||||||
|
|
|
||||||
58
pnpm-lock.yaml
generated
58
pnpm-lock.yaml
generated
|
|
@ -9,8 +9,8 @@ importers:
|
||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/mdx':
|
'@astrojs/mdx':
|
||||||
specifier: ^4.2.3
|
specifier: ^4.2.4
|
||||||
version: 4.2.3(astro@5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))
|
version: 4.2.4(astro@5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))
|
||||||
'@astrojs/partytown':
|
'@astrojs/partytown':
|
||||||
specifier: ^2.1.4
|
specifier: ^2.1.4
|
||||||
version: 2.1.4
|
version: 2.1.4
|
||||||
|
|
@ -24,14 +24,14 @@ importers:
|
||||||
specifier: ^3.5.6
|
specifier: ^3.5.6
|
||||||
version: 3.5.6(typescript@5.8.3)
|
version: 3.5.6(typescript@5.8.3)
|
||||||
astro:
|
astro:
|
||||||
specifier: ^5.6.1
|
specifier: ^5.6.2
|
||||||
version: 5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
version: 5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
||||||
astro-compress:
|
astro-compress:
|
||||||
specifier: ^2.3.8
|
specifier: ^2.3.8
|
||||||
version: 2.3.8(@types/node@22.14.1)(jiti@2.4.2)(rollup@4.40.0)(typescript@5.8.3)(yaml@2.7.1)
|
version: 2.3.8(@types/node@22.14.1)(jiti@2.4.2)(rollup@4.40.0)(typescript@5.8.3)(yaml@2.7.1)
|
||||||
astro-og-canvas:
|
astro-og-canvas:
|
||||||
specifier: ^0.7.0
|
specifier: ^0.7.0
|
||||||
version: 0.7.0(astro@5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))
|
version: 0.7.0(astro@5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))
|
||||||
astro-robots-txt:
|
astro-robots-txt:
|
||||||
specifier: ^1.0.0
|
specifier: ^1.0.0
|
||||||
version: 1.0.0
|
version: 1.0.0
|
||||||
|
|
@ -209,8 +209,8 @@ packages:
|
||||||
'@astrojs/markdown-remark@6.3.1':
|
'@astrojs/markdown-remark@6.3.1':
|
||||||
resolution: {integrity: sha512-c5F5gGrkczUaTVgmMW9g1YMJGzOtRvjjhw6IfGuxarM6ct09MpwysP10US729dy07gg8y+ofVifezvP3BNsWZg==}
|
resolution: {integrity: sha512-c5F5gGrkczUaTVgmMW9g1YMJGzOtRvjjhw6IfGuxarM6ct09MpwysP10US729dy07gg8y+ofVifezvP3BNsWZg==}
|
||||||
|
|
||||||
'@astrojs/mdx@4.2.3':
|
'@astrojs/mdx@4.2.4':
|
||||||
resolution: {integrity: sha512-oteB88udzzZmix5kWWUMeMJfeB2Dj8g7jy9LVNuTzGlBh3mEkGhQr6FsIR43p0JKCN11fl5J7P/Ev4Q0Nf0KQQ==}
|
resolution: {integrity: sha512-c832AWpiMCcuPY8j+yr5T+hOf8n5RlKLFHlNTt15xxkOk3zjFJP81TIYKrMrbhD5rMzJ09Ixi+xM0m68w2Q0DQ==}
|
||||||
engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
|
engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
astro: ^5.0.0
|
astro: ^5.0.0
|
||||||
|
|
@ -802,8 +802,8 @@ packages:
|
||||||
resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==}
|
resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==}
|
||||||
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
|
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
|
||||||
|
|
||||||
'@pkgr/core@0.2.2':
|
'@pkgr/core@0.2.3':
|
||||||
resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==}
|
resolution: {integrity: sha512-yMV8bb9prWI21N6FsrnPCbhoYb8UUvYCDGoSvPHBloVC095Ef2ker43hzXkJ6TpJPw53S8FeFYkARa7GGIGwxg==}
|
||||||
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
|
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
|
||||||
|
|
||||||
'@playform/pipe@0.1.3':
|
'@playform/pipe@0.1.3':
|
||||||
|
|
@ -1479,8 +1479,8 @@ packages:
|
||||||
astro-robots-txt@1.0.0:
|
astro-robots-txt@1.0.0:
|
||||||
resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==}
|
resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==}
|
||||||
|
|
||||||
astro@5.6.1:
|
astro@5.6.2:
|
||||||
resolution: {integrity: sha512-aQ2TV7wIf+q2Oi6gGWMINHWEAZqoP0eH6/mihodfTJYATPWyd03JIGVfjtYUJlkNdNSKxDXwEe/r/Zx4CZ1FPg==}
|
resolution: {integrity: sha512-Ds4x3Au2s+YfBKLXY2HCHird+73ff4wTds+cuAGqaHmY4GR+Gc+sCAP54Mq6blkpuFqXwqjPUAcmxvAwovJPGQ==}
|
||||||
engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
|
engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
|
||||||
|
|
@ -2934,8 +2934,8 @@ packages:
|
||||||
resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
|
resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
|
||||||
engines: {node: '>=18'}
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
oniguruma-parser@0.11.0:
|
oniguruma-parser@0.11.1:
|
||||||
resolution: {integrity: sha512-9M+tFRnJWtRxsgh4XFlkw+AVFtzEtI8UfTifx6sDbtt47SpEl/K65PunQyp/jvfp0xwLGjtbE5aKQcL8j6AXYw==}
|
resolution: {integrity: sha512-fX6SirDOsTUNqSUOnL3fDtD3R7PCXNWGA3WWPvv9egEfTWkNXzRLO/9CC1WkDusP6HyWRZig06kHeYPcw3mlqQ==}
|
||||||
|
|
||||||
oniguruma-to-es@4.2.0:
|
oniguruma-to-es@4.2.0:
|
||||||
resolution: {integrity: sha512-MDPs6KSOLS0tKQ7joqg44dRIRZUyotfTy0r+7oEEs6VwWWP0+E2PPDYWMFN0aqOjRyWHBYq7RfKw9GQk2S2z5g==}
|
resolution: {integrity: sha512-MDPs6KSOLS0tKQ7joqg44dRIRZUyotfTy0r+7oEEs6VwWWP0+E2PPDYWMFN0aqOjRyWHBYq7RfKw9GQk2S2z5g==}
|
||||||
|
|
@ -3463,8 +3463,8 @@ packages:
|
||||||
resolution: {integrity: sha512-R1urvuyiTaWfeCggqEvpDJwAlDVdsT9NM+IP//Tk2x7qHCkSvBk/fwFgw/TLAHzZlrAnnazMcRw0ZD8HlYFTEQ==}
|
resolution: {integrity: sha512-R1urvuyiTaWfeCggqEvpDJwAlDVdsT9NM+IP//Tk2x7qHCkSvBk/fwFgw/TLAHzZlrAnnazMcRw0ZD8HlYFTEQ==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
|
|
||||||
synckit@0.11.3:
|
synckit@0.11.4:
|
||||||
resolution: {integrity: sha512-szhWDqNNI9etJUvbZ1/cx1StnZx8yMmFxme48SwR4dty4ioSY50KEZlpv0qAfgc1fpRzuh9hBXEzoCpJ779dLg==}
|
resolution: {integrity: sha512-Q/XQKRaJiLiFIBNN+mndW7S/RHxvwzuZS6ZwmRzUBqJBv/5QIKCEwkBC8GBf8EQJKYnaFs0wOZbKTXBPj8L9oQ==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
|
|
||||||
synckit@0.9.2:
|
synckit@0.9.2:
|
||||||
|
|
@ -4164,12 +4164,12 @@ snapshots:
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@astrojs/mdx@4.2.3(astro@5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))':
|
'@astrojs/mdx@4.2.4(astro@5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/markdown-remark': 6.3.1
|
'@astrojs/markdown-remark': 6.3.1
|
||||||
'@mdx-js/mdx': 3.1.0(acorn@8.14.1)
|
'@mdx-js/mdx': 3.1.0(acorn@8.14.1)
|
||||||
acorn: 8.14.1
|
acorn: 8.14.1
|
||||||
astro: 5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
astro: 5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
||||||
es-module-lexer: 1.6.0
|
es-module-lexer: 1.6.0
|
||||||
estree-util-visit: 2.0.0
|
estree-util-visit: 2.0.0
|
||||||
hast-util-to-html: 9.0.5
|
hast-util-to-html: 9.0.5
|
||||||
|
|
@ -4706,7 +4706,7 @@ snapshots:
|
||||||
|
|
||||||
'@pkgr/core@0.1.2': {}
|
'@pkgr/core@0.1.2': {}
|
||||||
|
|
||||||
'@pkgr/core@0.2.2': {}
|
'@pkgr/core@0.2.3': {}
|
||||||
|
|
||||||
'@playform/pipe@0.1.3':
|
'@playform/pipe@0.1.3':
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
@ -5470,7 +5470,7 @@ snapshots:
|
||||||
'@playform/pipe': 0.1.3
|
'@playform/pipe': 0.1.3
|
||||||
'@types/csso': 5.0.4
|
'@types/csso': 5.0.4
|
||||||
'@types/html-minifier-terser': 7.0.2
|
'@types/html-minifier-terser': 7.0.2
|
||||||
astro: 5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
astro: 5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
||||||
commander: 13.1.0
|
commander: 13.1.0
|
||||||
csso: 5.0.5
|
csso: 5.0.5
|
||||||
deepmerge-ts: 7.1.5
|
deepmerge-ts: 7.1.5
|
||||||
|
|
@ -5530,9 +5530,9 @@ snapshots:
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
astro-og-canvas@0.7.0(astro@5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)):
|
astro-og-canvas@0.7.0(astro@5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)):
|
||||||
dependencies:
|
dependencies:
|
||||||
astro: 5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
astro: 5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1)
|
||||||
canvaskit-wasm: 0.39.1
|
canvaskit-wasm: 0.39.1
|
||||||
deterministic-object-hash: 2.0.2
|
deterministic-object-hash: 2.0.2
|
||||||
entities: 4.5.0
|
entities: 4.5.0
|
||||||
|
|
@ -5542,7 +5542,7 @@ snapshots:
|
||||||
valid-filename: 4.0.0
|
valid-filename: 4.0.0
|
||||||
zod: 3.24.2
|
zod: 3.24.2
|
||||||
|
|
||||||
astro@5.6.1(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1):
|
astro@5.6.2(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.1):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 2.11.0
|
'@astrojs/compiler': 2.11.0
|
||||||
'@astrojs/internal-helpers': 0.6.1
|
'@astrojs/internal-helpers': 0.6.1
|
||||||
|
|
@ -5640,7 +5640,7 @@ snapshots:
|
||||||
astrojs-compiler-sync@1.1.1(@astrojs/compiler@2.11.0):
|
astrojs-compiler-sync@1.1.1(@astrojs/compiler@2.11.0):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 2.11.0
|
'@astrojs/compiler': 2.11.0
|
||||||
synckit: 0.11.3
|
synckit: 0.11.4
|
||||||
|
|
||||||
autosize@6.0.1: {}
|
autosize@6.0.1: {}
|
||||||
|
|
||||||
|
|
@ -6099,7 +6099,7 @@ snapshots:
|
||||||
|
|
||||||
eslint-plugin-import-x@4.10.3(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3):
|
eslint-plugin-import-x@4.10.3(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@pkgr/core': 0.2.2
|
'@pkgr/core': 0.2.3
|
||||||
'@types/doctrine': 0.0.9
|
'@types/doctrine': 0.0.9
|
||||||
'@typescript-eslint/utils': 8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
|
'@typescript-eslint/utils': 8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
|
||||||
debug: 4.4.0
|
debug: 4.4.0
|
||||||
|
|
@ -7500,12 +7500,12 @@ snapshots:
|
||||||
dependencies:
|
dependencies:
|
||||||
mimic-function: 5.0.1
|
mimic-function: 5.0.1
|
||||||
|
|
||||||
oniguruma-parser@0.11.0: {}
|
oniguruma-parser@0.11.1: {}
|
||||||
|
|
||||||
oniguruma-to-es@4.2.0:
|
oniguruma-to-es@4.2.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
emoji-regex-xs: 1.0.0
|
emoji-regex-xs: 1.0.0
|
||||||
oniguruma-parser: 0.11.0
|
oniguruma-parser: 0.11.1
|
||||||
regex: 6.0.1
|
regex: 6.0.1
|
||||||
regex-recursion: 6.0.2
|
regex-recursion: 6.0.2
|
||||||
|
|
||||||
|
|
@ -8192,12 +8192,12 @@ snapshots:
|
||||||
|
|
||||||
synckit@0.10.3:
|
synckit@0.10.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@pkgr/core': 0.2.2
|
'@pkgr/core': 0.2.3
|
||||||
tslib: 2.8.1
|
tslib: 2.8.1
|
||||||
|
|
||||||
synckit@0.11.3:
|
synckit@0.11.4:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@pkgr/core': 0.2.2
|
'@pkgr/core': 0.2.3
|
||||||
tslib: 2.8.1
|
tslib: 2.8.1
|
||||||
|
|
||||||
synckit@0.9.2:
|
synckit@0.9.2:
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,11 @@ lang: en
|
||||||
abbrlink: theme-guide
|
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
|
## 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
|
### 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
|
## 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.
|
||||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
||||||
|
|
||||||
#### abbrlink
|
#### abbrlink
|
||||||
|
|
||||||
Customizes the article URL.
|
Customizes the article URL. Can only contain lowercase letters, numbers, and hyphens `-`.
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# src/config.ts
|
# 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/guide/apple.md -> example.com/es/posts/banana/
|
||||||
src/content/posts/2025/03/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
|
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
|
## 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
|
### 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
|
## 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.
|
||||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
||||||
|
|
||||||
#### abbrlink
|
#### abbrlink
|
||||||
|
|
||||||
Personaliza la URL del artículo.
|
Personaliza la URL del artículo. Solo puede contener letras minúsculas, números y guiones `-`.
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# src/config.ts
|
# 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/guide/apple.md -> example.com/es/posts/banana/
|
||||||
src/content/posts/2025/03/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
|
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` メタデータを追加します。
|
`src/content/posts/` ディレクトリに `.md` または `.mdx` 拡張子を持つ新しいファイルを作成し、ファイルの先頭に `Front Matter` メタデータを追加します。
|
||||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
||||||
|
|
||||||
#### abbrlink
|
#### abbrlink
|
||||||
|
|
||||||
記事のURLをカスタマイズします。
|
記事のURLをカスタマイズします。小文字、数字、ハイフン `-` のみ使用できます。
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# src/config.ts
|
# 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/guide/apple.md -> example.com/es/posts/banana/
|
||||||
src/content/posts/2025/03/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
|
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` в верхней части файла.
|
Создайте новый файл с расширением `.md` или `.mdx` в директории `src/content/posts/` и добавьте метаданные `Front Matter` в верхней части файла.
|
||||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
||||||
|
|
||||||
#### abbrlink
|
#### abbrlink
|
||||||
|
|
||||||
Настраивает URL статьи.
|
Настраивает URL статьи. Может содержать только строчные буквы, цифры и дефисы `-`.
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# src/config.ts
|
# 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/guide/apple.md -> example.com/es/posts/banana/
|
||||||
src/content/posts/2025/03/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
|
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` 元數據。
|
在 `src/content/posts/` 目錄中新建以 `.md` 或 `.mdx` 為後綴的文件，並在文件頂部添加 `Front Matter` 元數據。
|
||||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
||||||
|
|
||||||
#### abbrlink
|
#### abbrlink
|
||||||
|
|
||||||
自定義文章 URL。
|
自定義文章 URL。只能包含小寫字母、數字和連字符 `-`。
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# src/config.ts
|
# 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/guide/apple.md -> example.com/es/posts/banana/
|
||||||
src/content/posts/2025/03/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
|
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` 元数据。
|
在 `src/content/posts/` 目录中新建以 `.md` 或 `.mdx` 为后缀的文件，并在文件顶部添加 `Front Matter` 元数据。
|
||||||
|
|
@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/
|
||||||
|
|
||||||
#### abbrlink
|
#### abbrlink
|
||||||
|
|
||||||
自定义文章 URL。
|
自定义文章 URL。只能包含小写字母、数字和连字符 `-`。
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# src/config.ts
|
# 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/guide/apple.md -> example.com/es/posts/banana/
|
||||||
src/content/posts/2025/03/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