From 043b811ce4f7a09c996ee4ed7245dc3ff4615cbf Mon Sep 17 00:00:00 2001 From: radishzzz Date: Mon, 14 Apr 2025 17:31:27 +0100 Subject: [PATCH] docs: update readme and theme guides --- README.md | 42 ++--- README.zh.md | 46 ++--- package.json | 4 +- pnpm-lock.yaml | 58 +++--- src/content/posts/guides/Theme Guide-en.md | 170 +++++++++--------- src/content/posts/guides/Theme Guide-es.md | 170 +++++++++--------- src/content/posts/guides/Theme Guide-ja.md | 170 +++++++++--------- src/content/posts/guides/Theme Guide-ru.md | 170 +++++++++--------- src/content/posts/guides/Theme Guide-zh-tw.md | 170 +++++++++--------- src/content/posts/guides/Theme Guide-zh.md | 170 +++++++++--------- 10 files changed, 572 insertions(+), 598 deletions(-) diff --git a/README.md b/README.md index 4c4d4e3..a405207 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram ## Features - 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 - Light / Dark mode - Elegant view transitions @@ -49,55 +49,43 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram

-## 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 - # Clone the remote repository to your local machine + # Clone the repository git clone repository-url - # Navigate to the repository directory + # Navigate to the project directory cd repository-name # Install pnpm globally (if not already installed) npm install -g pnpm - # Install project dependencies + # Install dependencies pnpm install - # Start the local development server + # Start the development server 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. - -## 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. +5. Refer to the [Astro Deployment Guides](https://docs.astro.build/en/guides/deploy/) to deploy your blog to Netlify, Vercel, or other platforms.  [![Deploy to Netlify](assets/deploy-netlify.svg)](https://app.netlify.com/start) [![Deploy to Vercel](assets/deploy-vercel.svg)](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 -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 @@ -105,7 +93,7 @@ All commands are run from the root of the project, from a terminal: | Command | Action | | :--------------------- | :----------------------------------------------- | -| `pnpm install` | Install project dependencies | +| `pnpm install` | Install dependencies | | `pnpm dev` | Starts local dev server at `localhost:4321` | | `pnpm build` | Build your production site to `./dist/` | | `pnpm preview` | Preview your build locally, before deploying | diff --git a/README.zh.md b/README.zh.md index 62a74e2..43c68f8 100644 --- a/README.zh.md +++ b/README.zh.md @@ -30,7 +30,7 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主 ## 特征 - 基于 Astro 与 UnoCSS 开发 -- 支持 SEO、Sitemap、OpenGraph、TOC、RSS、MDX 和 KaTeX +- 支持 SEO、Sitemap、OpenGraph、TOC、RSS、MDX 和 LaTeX - i18n 多语言 - 亮色/暗色模式 - 优雅的过渡动画 @@ -49,55 +49,43 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主

-## 用法 +## 开始 -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 - # 克隆远程仓库至本地 + # 克隆仓库 git clone 仓库地址 - # 进入本地仓库根目录 + # 进入项目目录 cd 仓库名称 - # 全局安装 pnpm（若未安装） + # 全局安装 pnpm（如果未安装） npm install -g pnpm - # 安装项目依赖 + # 安装依赖 pnpm install - # 启动本地开发服务器 + # 启动开发服务器 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. 提交并推送你的修改至远程仓库。 - -## 文档 - -- [主题上手指南](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`。 +5. 参考 [Astro 部署指南](https://docs.astro.build/zh-cn/guides/deploy/)，将博客部署至 Netlify、Vercel 等平台。  [![Deploy to Netlify](assets/deploy-netlify.svg)](https://app.netlify.com/start) [![Deploy to Vercel](assets/deploy-vercel.svg)](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 build` | 构建网站至 `./dist/` | | `pnpm preview` | 本地预览已构建的网站 | @@ -123,8 +111,6 @@ Retypeset 主题会不定期发布新功能和问题修复。你可以参考 [Gi ## Star History -感谢每一位 star 的朋友，你们的支持是我持续维护项目的动力！ -

diff --git a/package.json b/package.json index 1b0dbf0..dd4bd52 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,12 @@ "lint:fix": "eslint . --fix" }, "dependencies": { - "@astrojs/mdx": "^4.2.3", + "@astrojs/mdx": "^4.2.4", "@astrojs/partytown": "^2.1.4", "@astrojs/rss": "^4.0.11", "@astrojs/sitemap": "^3.3.0", "@waline/client": "^3.5.6", - "astro": "^5.6.1", + "astro": "^5.6.2", "astro-compress": "^2.3.8", "astro-og-canvas": "^0.7.0", "astro-robots-txt": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3f8204f..016a870 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@astrojs/mdx': - specifier: ^4.2.3 - 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)) + specifier: ^4.2.4 + 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': specifier: ^2.1.4 version: 2.1.4 @@ -24,14 +24,14 @@ importers: specifier: ^3.5.6 version: 3.5.6(typescript@5.8.3) astro: - specifier: ^5.6.1 - 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) + specifier: ^5.6.2 + 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: 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) astro-og-canvas: 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: specifier: ^1.0.0 version: 1.0.0 @@ -209,8 +209,8 @@ packages: '@astrojs/markdown-remark@6.3.1': resolution: {integrity: sha512-c5F5gGrkczUaTVgmMW9g1YMJGzOtRvjjhw6IfGuxarM6ct09MpwysP10US729dy07gg8y+ofVifezvP3BNsWZg==} - '@astrojs/mdx@4.2.3': - resolution: {integrity: sha512-oteB88udzzZmix5kWWUMeMJfeB2Dj8g7jy9LVNuTzGlBh3mEkGhQr6FsIR43p0JKCN11fl5J7P/Ev4Q0Nf0KQQ==} + '@astrojs/mdx@4.2.4': + resolution: {integrity: sha512-c832AWpiMCcuPY8j+yr5T+hOf8n5RlKLFHlNTt15xxkOk3zjFJP81TIYKrMrbhD5rMzJ09Ixi+xM0m68w2Q0DQ==} engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0} peerDependencies: astro: ^5.0.0 @@ -802,8 +802,8 @@ packages: resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} - '@pkgr/core@0.2.2': - resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==} + '@pkgr/core@0.2.3': + resolution: {integrity: sha512-yMV8bb9prWI21N6FsrnPCbhoYb8UUvYCDGoSvPHBloVC095Ef2ker43hzXkJ6TpJPw53S8FeFYkARa7GGIGwxg==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} '@playform/pipe@0.1.3': @@ -1479,8 +1479,8 @@ packages: astro-robots-txt@1.0.0: resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==} - astro@5.6.1: - resolution: {integrity: sha512-aQ2TV7wIf+q2Oi6gGWMINHWEAZqoP0eH6/mihodfTJYATPWyd03JIGVfjtYUJlkNdNSKxDXwEe/r/Zx4CZ1FPg==} + astro@5.6.2: + 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'} hasBin: true @@ -2934,8 +2934,8 @@ packages: resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==} engines: {node: '>=18'} - oniguruma-parser@0.11.0: - resolution: {integrity: sha512-9M+tFRnJWtRxsgh4XFlkw+AVFtzEtI8UfTifx6sDbtt47SpEl/K65PunQyp/jvfp0xwLGjtbE5aKQcL8j6AXYw==} + oniguruma-parser@0.11.1: + resolution: {integrity: sha512-fX6SirDOsTUNqSUOnL3fDtD3R7PCXNWGA3WWPvv9egEfTWkNXzRLO/9CC1WkDusP6HyWRZig06kHeYPcw3mlqQ==} oniguruma-to-es@4.2.0: resolution: {integrity: sha512-MDPs6KSOLS0tKQ7joqg44dRIRZUyotfTy0r+7oEEs6VwWWP0+E2PPDYWMFN0aqOjRyWHBYq7RfKw9GQk2S2z5g==} @@ -3463,8 +3463,8 @@ packages: resolution: {integrity: sha512-R1urvuyiTaWfeCggqEvpDJwAlDVdsT9NM+IP//Tk2x7qHCkSvBk/fwFgw/TLAHzZlrAnnazMcRw0ZD8HlYFTEQ==} engines: {node: ^14.18.0 || >=16.0.0} - synckit@0.11.3: - resolution: {integrity: sha512-szhWDqNNI9etJUvbZ1/cx1StnZx8yMmFxme48SwR4dty4ioSY50KEZlpv0qAfgc1fpRzuh9hBXEzoCpJ779dLg==} + synckit@0.11.4: + resolution: {integrity: sha512-Q/XQKRaJiLiFIBNN+mndW7S/RHxvwzuZS6ZwmRzUBqJBv/5QIKCEwkBC8GBf8EQJKYnaFs0wOZbKTXBPj8L9oQ==} engines: {node: ^14.18.0 || >=16.0.0} synckit@0.9.2: @@ -4164,12 +4164,12 @@ snapshots: transitivePeerDependencies: - 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: '@astrojs/markdown-remark': 6.3.1 '@mdx-js/mdx': 3.1.0(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 estree-util-visit: 2.0.0 hast-util-to-html: 9.0.5 @@ -4706,7 +4706,7 @@ snapshots: '@pkgr/core@0.1.2': {} - '@pkgr/core@0.2.2': {} + '@pkgr/core@0.2.3': {} '@playform/pipe@0.1.3': dependencies: @@ -5470,7 +5470,7 @@ snapshots: '@playform/pipe': 0.1.3 '@types/csso': 5.0.4 '@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 csso: 5.0.5 deepmerge-ts: 7.1.5 @@ -5530,9 +5530,9 @@ snapshots: transitivePeerDependencies: - 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: - 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 deterministic-object-hash: 2.0.2 entities: 4.5.0 @@ -5542,7 +5542,7 @@ snapshots: valid-filename: 4.0.0 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: '@astrojs/compiler': 2.11.0 '@astrojs/internal-helpers': 0.6.1 @@ -5640,7 +5640,7 @@ snapshots: astrojs-compiler-sync@1.1.1(@astrojs/compiler@2.11.0): dependencies: '@astrojs/compiler': 2.11.0 - synckit: 0.11.3 + synckit: 0.11.4 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): dependencies: - '@pkgr/core': 0.2.2 + '@pkgr/core': 0.2.3 '@types/doctrine': 0.0.9 '@typescript-eslint/utils': 8.29.1(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3) debug: 4.4.0 @@ -7500,12 +7500,12 @@ snapshots: dependencies: mimic-function: 5.0.1 - oniguruma-parser@0.11.0: {} + oniguruma-parser@0.11.1: {} oniguruma-to-es@4.2.0: dependencies: emoji-regex-xs: 1.0.0 - oniguruma-parser: 0.11.0 + oniguruma-parser: 0.11.1 regex: 6.0.1 regex-recursion: 6.0.2 @@ -8192,12 +8192,12 @@ snapshots: synckit@0.10.3: dependencies: - '@pkgr/core': 0.2.2 + '@pkgr/core': 0.2.3 tslib: 2.8.1 - synckit@0.11.3: + synckit@0.11.4: dependencies: - '@pkgr/core': 0.2.2 + '@pkgr/core': 0.2.3 tslib: 2.8.1 synckit@0.9.2: diff --git a/src/content/posts/guides/Theme Guide-en.md b/src/content/posts/guides/Theme Guide-en.md index c79077e..1d7bb76 100644 --- a/src/content/posts/guides/Theme Guide-en.md +++ b/src/content/posts/guides/Theme Guide-en.md @@ -10,11 +10,11 @@ lang: en abbrlink: theme-guide --- -Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework. This guide covers the theme configuration, how to create new posts, and additional configuration options. +Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework. This guide introduces theme configuration and how to create new articles, helping you quickly set up your personal blog. ## Theme Configuration -Modify the theme configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) to customize your blog. +Customize your blog through the configuration file [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts). ### Site Information @@ -195,6 +195,88 @@ preload: { } ``` +## Additional Configuration + +Besides the configuration file `src/config.ts`, some configuration options are located in other files. + +### Syntax Highlighting + +Code block syntax highlighting themes. + +```ts +// astro.config.ts + +shikiConfig: { + // available themes: https://shiki.style/themes + // background color follows the blog theme by default, not the syntax highlighting theme + themes: { + light: 'github-light' // light theme + dark: 'github-dark' // dark theme + } +} +``` + +### Article Excerpt + +Character count for automatic article excerpts. + +```ts +// src/utils/description.ts + +const EXCERPT_LENGTHS: Record = { + 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 + + + +``` + ## Creating a New Post Create a new file with `.md` or `.mdx` extension in the `src/content/posts/` directory, and add `Front Matter` metadata at the top of the file. @@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/ #### abbrlink -Customizes the article URL. +Customizes the article URL. Can only contain lowercase letters, numbers, and hyphens `-`. ```md # src/config.ts @@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/ src/content/posts/guide/apple.md -> example.com/es/posts/banana/ src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/ ``` - -## Additional Configuration - -Beyond the configuration file `src/config.ts`, there are some configuration options scattered in other files. - -### Syntax Highlighting - -Code block syntax highlighting themes. - -```ts -// astro.config.ts - -shikiConfig: { - // available themes: https://shiki.style/themes - // background color follows the blog theme by default, not the syntax highlighting theme - themes: { - light: 'github-light' // light theme - dark: 'github-dark' // dark theme - } -} -``` - -### Article Excerpt - -Character count limit for automatic article excerpts. - -```ts -// src/utils/description.ts - -const EXCERPT_LENGTHS: Record = { - 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 - - - -``` diff --git a/src/content/posts/guides/Theme Guide-es.md b/src/content/posts/guides/Theme Guide-es.md index 58ed32f..7c868ee 100644 --- a/src/content/posts/guides/Theme Guide-es.md +++ b/src/content/posts/guides/Theme Guide-es.md @@ -10,11 +10,11 @@ lang: es abbrlink: theme-guide --- -Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/). Esta guía cubre la configuración del tema, cómo crear nuevas publicaciones y opciones de configuración adicionales. +Retypeset es un tema de blog estático basado en el framework [Astro](https://astro.build/). Esta guía presenta la configuración del tema y cómo crear nuevos artículos, ayudándote a configurar rápidamente tu blog personal. ## Configuración del Tema -Modifica el archivo de configuración del tema [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) para personalizar tu blog. +Personaliza tu blog a través del archivo de configuración [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts). ### Información del Sitio @@ -195,6 +195,88 @@ preload: { } ``` +## Configuración Adicional + +Además del archivo de configuración `src/config.ts`, algunas opciones de configuración se encuentran en otros archivos. + +### Resaltado de Sintaxis + +Temas de resaltado de sintaxis para bloques de código. + +```ts +// astro.config.ts + +shikiConfig: { + // temas disponibles: https://shiki.style/themes + // el color de fondo sigue el tema del blog por defecto, no el tema de resaltado de sintaxis + themes: { + light: 'github-light' // tema claro + dark: 'github-dark' // tema oscuro + } +} +``` + +### Extracto de Artículo + +Cantidad de caracteres para extractos automáticos de artículos. + +```ts +// src/utils/description.ts + +const EXCERPT_LENGTHS: Record = { + 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 + + + +``` + ## Creación de un Nuevo Artículo Crea un nuevo archivo con extensión `.md` o `.mdx` en el directorio `src/content/posts/`, y añade los metadatos `Front Matter` en la parte superior del archivo. @@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/ #### abbrlink -Personaliza la URL del artículo. +Personaliza la URL del artículo. Solo puede contener letras minúsculas, números y guiones `-`. ```md # src/config.ts @@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/ src/content/posts/guide/apple.md -> example.com/es/posts/banana/ src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/ ``` - -## Configuración Adicional - -Más allá del archivo de configuración `src/config.ts`, hay algunas opciones de configuración dispersas en otros archivos. - -### Resaltado de Sintaxis - -Temas de resaltado de sintaxis para bloques de código. - -```ts -// astro.config.ts - -shikiConfig: { - // temas disponibles: https://shiki.style/themes - // el color de fondo sigue el tema del blog por defecto, no el tema de resaltado de sintaxis - themes: { - light: 'github-light' // tema claro - dark: 'github-dark' // tema oscuro - } -} -``` - -### Extracto de Artículo - -Límite de cantidad de caracteres para extractos automáticos de artículos. - -```ts -// src/utils/description.ts - -const EXCERPT_LENGTHS: Record = { - 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 - - - -``` diff --git a/src/content/posts/guides/Theme Guide-ja.md b/src/content/posts/guides/Theme Guide-ja.md index 82d6bcf..0a280fa 100644 --- a/src/content/posts/guides/Theme Guide-ja.md +++ b/src/content/posts/guides/Theme Guide-ja.md @@ -10,11 +10,11 @@ lang: ja abbrlink: theme-guide --- -Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。このガイドではRetypesetテーマの設定方法、新しい記事の作成方法、その他の設定オプションについて説明します。 +Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。本ガイドではテーマの設定方法と新しい記事の作成方法を紹介し、個人ブログを素早く構築できるようサポートします。 ## テーマ設定 -設定ファイル [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) を修正してブログをカスタマイズできます。 +設定ファイル [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) からあなたのブログをカスタマイズできます。 ### サイト情報 @@ -195,6 +195,88 @@ preload: { } ``` +## その他の設定 + +設定ファイル `src/config.ts` 以外にも、一部の設定は他のファイルにあります。 + +### シンタックスハイライト + +コードブロックのシンタックスハイライトテーマ。 + +```ts +// astro.config.ts + +shikiConfig: { + // 利用可能なテーマ: https://shiki.style/themes + // 背景色はデフォルトでシンタックスハイライトテーマではなく、ブログテーマに従います + themes: { + light: 'github-light' // ライトテーマ + dark: 'github-dark' // ダークテーマ + } +} +``` + +### 記事の抜粋 + +記事の自動抜粋の文字数。 + +```ts +// src/utils/description.ts + +const EXCERPT_LENGTHS: Record = { + 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 + + + +``` + ## 新しい記事の作成 `src/content/posts/` ディレクトリに `.md` または `.mdx` 拡張子を持つ新しいファイルを作成し、ファイルの先頭に `Front Matter` メタデータを追加します。 @@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/ #### abbrlink -記事のURLをカスタマイズします。 +記事のURLをカスタマイズします。小文字、数字、ハイフン `-` のみ使用できます。 ```md # src/config.ts @@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/ src/content/posts/guide/apple.md -> example.com/es/posts/banana/ src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/ ``` - -## その他の設定 - -設定ファイル `src/config.ts` 以外にも、他のファイルに散らばっている設定オプションがあります。 - -### シンタックスハイライト - -コードブロックのシンタックスハイライトテーマ。 - -```ts -// astro.config.ts - -shikiConfig: { - // 利用可能なテーマ: https://shiki.style/themes - // 背景色はデフォルトでシンタックスハイライトテーマではなく、ブログテーマに従います - themes: { - light: 'github-light' // ライトテーマ - dark: 'github-dark' // ダークテーマ - } -} -``` - -### 記事の抜粋 - -記事の自動抜粋の文字数量制限。 - -```ts -// src/utils/description.ts - -const EXCERPT_LENGTHS: Record = { - 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 - - - -``` diff --git a/src/content/posts/guides/Theme Guide-ru.md b/src/content/posts/guides/Theme Guide-ru.md index ba213ba..80a160e 100644 --- a/src/content/posts/guides/Theme Guide-ru.md +++ b/src/content/posts/guides/Theme Guide-ru.md @@ -10,11 +10,11 @@ lang: ru abbrlink: theme-guide --- -Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/). Это руководство охватывает настройку темы, создание новых статей и дополнительные параметры конфигурации. +Retypeset — это статическая тема блога, основанная на фреймворке [Astro](https://astro.build/). Данное руководство знакомит с настройками темы и созданием новых статей, помогая вам быстро настроить личный блог. ## Конфигурация темы -Настройте свой блог, изменяя конфигурационный файл темы [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts). +Настройте свой блог через конфигурационный файл [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts). ### Информация о сайте @@ -195,6 +195,88 @@ preload: { } ``` +## Дополнительная конфигурация + +Кроме файла конфигурации `src/config.ts`, некоторые параметры находятся в других файлах. + +### Подсветка синтаксиса + +Темы подсветки синтаксиса для блоков кода. + +```ts +// astro.config.ts + +shikiConfig: { + // доступные темы: https://shiki.style/themes + // цвет фона по умолчанию следует теме блога, а не теме подсветки синтаксиса + themes: { + light: 'github-light' // светлая тема + dark: 'github-dark' // темная тема + } +} +``` + +### Отрывок статьи + +Количество символов для автоматических отрывков статей. + +```ts +// src/utils/description.ts + +const EXCERPT_LENGTHS: Record = { + 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 + + + +``` + ## Создание Новой Статьи Создайте новый файл с расширением `.md` или `.mdx` в директории `src/content/posts/` и добавьте метаданные `Front Matter` в верхней части файла. @@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/ #### abbrlink -Настраивает URL статьи. +Настраивает URL статьи. Может содержать только строчные буквы, цифры и дефисы `-`. ```md # src/config.ts @@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/ src/content/posts/guide/apple.md -> example.com/es/posts/banana/ src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/ ``` - -## Дополнительная конфигурация - -Помимо файла конфигурации `src/config.ts`, существуют некоторые параметры конфигурации, разбросанные в других файлах. - -### Подсветка синтаксиса - -Темы подсветки синтаксиса для блоков кода. - -```ts -// astro.config.ts - -shikiConfig: { - // доступные темы: https://shiki.style/themes - // цвет фона по умолчанию следует теме блога, а не теме подсветки синтаксиса - themes: { - light: 'github-light' // светлая тема - dark: 'github-dark' // темная тема - } -} -``` - -### Отрывок статьи - -Лимит количества символов для автоматических отрывков статей. - -```ts -// src/utils/description.ts - -const EXCERPT_LENGTHS: Record = { - 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 - - - -``` diff --git a/src/content/posts/guides/Theme Guide-zh-tw.md b/src/content/posts/guides/Theme Guide-zh-tw.md index aef63a9..c5ed8bb 100644 --- a/src/content/posts/guides/Theme Guide-zh-tw.md +++ b/src/content/posts/guides/Theme Guide-zh-tw.md @@ -10,11 +10,11 @@ lang: zh-tw abbrlink: theme-guide --- -Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本文是 Retypeset 主題的上手指南，包括主題配置介紹，如何創建新文章和更多配置說明。 +Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本文為 Retypeset 主題上手指南，主要介紹主題配置與如何創建新文章，幫助你快速搭建個人部落格。 ## 主題配置 -修改主題配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 來自定義你的部落格。 +通過配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 自定義你的部落格。 ### 站點信息 @@ -195,6 +195,88 @@ preload: { } ``` +## 更多配置 + +除了配置文件 `src/config.ts` 外，還有部分配置項位於其它文件中。 + +### 語法高亮 + +代碼塊的語法高亮主題。 + +```ts +// astro.config.ts + +shikiConfig: { + // 可選主題：https://shiki.style/themes + // 背景色默認跟隨部落格主題，而非語法高亮主題 + themes: { + light: 'github-light' // 亮色主題 + dark: 'github-dark' // 暗色主題 + } +} +``` + +### 文章摘要 + +文章自動摘要的字元數量。 + +```ts +// src/utils/description.ts + +const EXCERPT_LENGTHS: Record = { + 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 + + + +``` + ## 創建新文章 在 `src/content/posts/` 目錄中新建以 `.md` 或 `.mdx` 為後綴的文件，並在文件頂部添加 `Front Matter` 元數據。 @@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/ #### abbrlink -自定義文章 URL。 +自定義文章 URL。只能包含小寫字母、數字和連字符 `-`。 ```md # src/config.ts @@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/ src/content/posts/guide/apple.md -> example.com/es/posts/banana/ src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/ ``` - -## 更多配置 - -除了配置文件 `src/config.ts` 外，還有一些配置項分散在其它文件中。 - -### 語法高亮 - -代碼塊的語法高亮主題。 - -```ts -// astro.config.ts - -shikiConfig: { - // 可選主題：https://shiki.style/themes - // 背景色默認跟隨部落格主題，而非語法高亮主題 - themes: { - light: 'github-light' // 亮色主題 - dark: 'github-dark' // 暗色主題 - } -} -``` - -### 文章摘要 - -文章自動摘要的字符數量限制。 - -```ts -// src/utils/description.ts - -const EXCERPT_LENGTHS: Record = { - 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 - - - -``` diff --git a/src/content/posts/guides/Theme Guide-zh.md b/src/content/posts/guides/Theme Guide-zh.md index 56b9e03..acd2323 100644 --- a/src/content/posts/guides/Theme Guide-zh.md +++ b/src/content/posts/guides/Theme Guide-zh.md @@ -10,11 +10,11 @@ lang: zh abbrlink: theme-guide --- -Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本文是 Retypeset 主题的上手指南，包括主题配置介绍，如何创建新文章和更多配置说明。 +Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本文为 Retypeset 主题上手指南，主要介绍主题配置与如何创建新文章，帮助你快速搭建个人博客。 ## 主题配置 -修改主题配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 来自定义你的博客。 +通过配置文件 [src/config.ts](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts) 自定义你的博客。 ### 站点信息 @@ -195,6 +195,88 @@ preload: { } ``` +## 更多配置 + +除了配置文件 `src/config.ts` 外，还有部分配置项位于其它文件中。 + +### 语法高亮 + +代码块的语法高亮主题。 + +```ts +// astro.config.ts + +shikiConfig: { + // 可选主题：https://shiki.style/themes + // 背景色固定跟随博客主题，而非语法高亮主题 + themes: { + light: 'github-light' // 亮色主题 + dark: 'github-dark' // 暗色主题 + } +} +``` + +### 文章摘要 + +文章自动摘要的字符数量。 + +```ts +// src/utils/description.ts + +const EXCERPT_LENGTHS: Record = { + 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 + + + +``` + ## 创建新文章 在 `src/content/posts/` 目录中新建以 `.md` 或 `.mdx` 为后缀的文件，并在文件顶部添加 `Front Matter` 元数据。 @@ -260,7 +342,7 @@ src/content/posts/apple.md -> example.com/ru/posts/apple/ #### abbrlink -自定义文章 URL。 +自定义文章 URL。只能包含小写字母、数字和连字符 `-`。 ```md # src/config.ts @@ -278,85 +360,3 @@ src/content/posts/apple.md -> example.com/es/posts/banana/ src/content/posts/guide/apple.md -> example.com/es/posts/banana/ src/content/posts/2025/03/apple.md -> example.com/es/posts/banana/ ``` - -## 更多配置 - -除了配置文件 `src/config.ts` 外，还有一些配置项分散在其它文件中。 - -### 语法高亮 - -代码块的语法高亮主题。 - -```ts -// astro.config.ts - -shikiConfig: { - // 可选主题：https://shiki.style/themes - // 背景色固定跟随博客主题，而非语法高亮主题 - themes: { - light: 'github-light' // 亮色主题 - dark: 'github-dark' // 暗色主题 - } -} -``` - -### 文章摘要 - -文章自动摘要的字符数量限制。 - -```ts -// src/utils/description.ts - -const EXCERPT_LENGTHS: Record = { - 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 - - - -```