Skip to content

Commit

Permalink
[ci] format
Browse files Browse the repository at this point in the history
  • Loading branch information
@delucis @astrobot-houston
delucis authored and astrobot-houston committed Aug 22, 2023
1 parent 0acaf9e commit 2afac30
Showing 1 changed file with 85 additions and 83 deletions.
168 changes: 85 additions & 83 deletions docs/src/content/docs/zh/guides/css-and-tailwind.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ description: 了解如何使用自定义 CSS 设置你的 Starlight 网站的样

1. 在 `src/` 目录下添加一个 CSS 文件。
例如，你可以设置一个更宽的默认列宽和更大的页面标题文本大小：

```css
/* src/styles/custom.css */
:root {
Expand All @@ -32,7 +32,7 @@ description: 了解如何使用自定义 CSS 设置你的 Starlight 网站的样
starlight({
title: 'Docs With Custom CSS',
customCss: [
// 你的自定义 CSS 文件的相对路径
// 你的自定义 CSS 文件的相对路径
'./src/styles/custom.css',
],
}),
Expand Down Expand Up @@ -89,110 +89,110 @@ yarn create astro --template starlight/tailwind

1. 将 Astro 的 Tailwind 集成添加到项目中：

<Tabs>
<Tabs>

<TabItem label="npm">
<TabItem label="npm">

```sh
npx astro add tailwind
```
```sh
npx astro add tailwind
```

</TabItem>
</TabItem>

<TabItem label="pnpm">
<TabItem label="pnpm">

```sh
pnpm astro add tailwind
```
```sh
pnpm astro add tailwind
```

</TabItem>
</TabItem>

<TabItem label="Yarn">
<TabItem label="Yarn">

```sh
yarn astro add tailwind
```
```sh
yarn astro add tailwind
```

</TabItem>
</TabItem>

</Tabs>
</Tabs>

2. 安装 Starlight Tailwind 插件：
2. 安装 Starlight Tailwind 插件：

<Tabs>
<Tabs>

<TabItem label="npm">
<TabItem label="npm">

```sh
npm install @astrojs/starlight-tailwind
```
```sh
npm install @astrojs/starlight-tailwind
```

</TabItem>
</TabItem>

<TabItem label="pnpm">
<TabItem label="pnpm">

```sh
pnpm install @astrojs/starlight-tailwind
```
```sh
pnpm install @astrojs/starlight-tailwind
```

</TabItem>
</TabItem>

<TabItem label="Yarn">
<TabItem label="Yarn">

```sh
yarn add @astrojs/starlight-tailwind
```
```sh
yarn add @astrojs/starlight-tailwind
```

</TabItem>
</TabItem>

</Tabs>
</Tabs>

3. 创建一个 CSS 文件，用于 Tailwind 的基础样式，例如在 `src/tailwind.css` 中：
3. 创建一个 CSS 文件，用于 Tailwind 的基础样式，例如在 `src/tailwind.css` 中：

```css
/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
```css
/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

4. 更新你的 Astro 配置文件，使用你的 Tailwind 基础样式并禁用默认的基础样式：
4. 更新你的 Astro 配置文件，使用你的 Tailwind 基础样式并禁用默认的基础样式：

```js {11-12,16-17}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';
```js {11-12,16-17}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
integrations: [
starlight({
title: 'Docs with Tailwind',
customCss: [
// 你的 Tailwind 基础样式的相对路径
'./src/tailwind.css',
],
}),
tailwind({
// 禁用默认的基础样式
applyBaseStyles: false,
}),
],
});
```
export default defineConfig({
integrations: [
starlight({
title: 'Docs with Tailwind',
customCss: [
// 你的 Tailwind 基础样式的相对路径
'./src/tailwind.css',
],
}),
tailwind({
// 禁用默认的基础样式
applyBaseStyles: false,
}),
],
});
```

5. 将 Starlight Tailwind 插件添加到 `tailwind.config.cjs`：

```js ins={2,7}
// tailwind.config.cjs
const starlightPlugin = require('@astrojs/starlight-tailwind');
```js ins={2,7}
// tailwind.config.cjs
const starlightPlugin = require('@astrojs/starlight-tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [starlightPlugin()],
};
```
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [starlightPlugin()],
};
```

### 使用 Tailwind 设置 Starlight 的样式

Expand All @@ -216,15 +216,15 @@ module.exports = {
theme: {
extend: {
colors: {
// 你喜欢的强调色。Indigo 是最接近 Starlight 默认的。
// 你喜欢的强调色。Indigo 是最接近 Starlight 默认的。
accent: colors.indigo,
// 你喜欢的灰色。Zinc 是最接近 Starlight 默认的。
// 你喜欢的灰色。Zinc 是最接近 Starlight 默认的。
gray: colors.zinc,
},
fontFamily: {
// 你喜欢的文本字体。Starlight 默认使用系统字体堆栈。
// 你喜欢的文本字体。Starlight 默认使用系统字体堆栈。
sans: ['"Atkinson Hyperlegible"'],
// 你喜欢的代码字体。Starlight 默认使用系统等宽字体。
// 你喜欢的代码字体。Starlight 默认使用系统等宽字体。
mono: ['"IBM Plex Mono"'],
},
},
Expand Down Expand Up @@ -267,18 +267,20 @@ import ThemeDesigner from '../../../../components/theme-designer.astro';
preview: {
darkMode: '深色模式',
lightMode: '浅色模式',
bodyText:
'正文以灰色阴影显示，与背景形成高对比度。',
bodyText: '正文以灰色阴影显示，与背景形成高对比度。',
linkText: '链接是彩色的。',
dimText: '有些文本（如目录）具有较低的对比度。',
inlineCode: '内联代码具有独特的背景颜色。',
},
}}
>
<Fragment slot="css-docs">
将以下 CSS 添加到你的项目的[自定义 CSS 文件](#自定义-css-样式)中，以将此主题应用到你的网站。
将以下 CSS 添加到你的项目的[自定义 CSS
文件](#自定义-css-样式)中，以将此主题应用到你的网站。
</Fragment>
<Fragment slot="tailwind-docs">
下面的示例 [Tailwind 配置文件](#使用-tailwind-设置-starlight-的样式) 包含生成的 `accent` 和 `gray` 调色板，以在 `theme.extend.colors` 配置对象中使用。
下面的示例 [Tailwind 配置文件](#使用-tailwind-设置-starlight-的样式)
包含生成的 `accent` 和 `gray` 调色板，以在 `theme.extend.colors`
配置对象中使用。
</Fragment>
</ThemeDesigner>

0 comments on commit 2afac30

Please sign in to comment.