Skip to content

docs(en): merge docs/main into docs-cn/main @ 953ee569 #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ const Guide = [
text: '编辑器整合',
link: '/guide/editors',
},
{
text: 'FAQ',
link: '/guide/faq',
},
]

const Theme = [
Expand Down
2 changes: 1 addition & 1 deletion custom/directory-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ your-slidev/

## 组件 {#components}

约定:`./components/*.{vue,js,ts,jsx,tsx}`
约定:`./components/*.{vue,js,ts,jsx,tsx,md}`

此目录中的组件可以在幻灯片的 Markdown 中直接使用,其组件名与文件名相同。

Expand Down
118 changes: 118 additions & 0 deletions guide/faq.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
# FAQ

## Grids

Since Slidev is based on the Web, you can apply any grid layouts as you want. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), or even [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), you get the full controls.

Since we have [Windi CSS](https://windicss.org/) built-in, here is one simple way for you to reference:

```html
<div class="grid grid-cols-2 gap-4">
<div>

The first column

</div>
<div>

The second column

</div>
</div>
```

Go further, you can customize the size of each columns like:

```html
<div class="grid grid-cols-[200px,1fr,10%] gap-4">
<div>

The first column (200px)

</div>
<div>

The second column (auto fit)

</div>
<div>

The third column (10% width to parent container)

</div>
</div>
```

Learn more about [Windi CSS Grids](https://windicss.org/utilities/grid.html).

## Positioning

Slides are defined in fixed sizes (default `980x552px`) and scale to fit with the user screen. You can safely use absolute position in your slides as they will scale along with the screen.

For example:

```html
<div class="absolute left-30px bottom-30px">
This is a left-bottom aligned footer
</div>
```

To change the canvas' actual size, you can pass the `canvasWidth` options in your first frontmatter:

```yaml
---
canvasWidth: 800
---
```

## Font Size

If you feel the font size in your slides are too small, you can adjust it in a few ways:

### Override Local Style

You can override styles for each slide with the inlined `<style>` tag.

```md
# Page 1

<style>
h1 {
font-size: 10em;
}
</style>

---

# Page 2

This will not be affected.
```

Learn more: [Embedded Styles](/guide/syntax.html#embedded-styles)

### Override Global Style

You can provide custom global styles by creating `./style.css`, for example

```css
/* style.css */

h1 {
font-size: 10em !important;
}
```

Learn more: [Global Style](/custom/directory-structure.html#style)

### Scale the Canvas

Changing the canvas' actual size will scale all your contents(text, images, components, etc.) and slides

```yaml
---
# default: 980
# since the canvas gets smaller, the visual size will become larger
canvasWidth: 800
---
```
2 changes: 1 addition & 1 deletion guide/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $ npm init slidev@latest
使用 Yarn:

```bash
$ yarn create slidev@latest
$ yarn create slidev
```

跟随命令行的提示,它将自动为你打开幻灯片,网址是 http://localhost:3030/。
Expand Down
4 changes: 3 additions & 1 deletion guide/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,6 @@ $ npm init slidev

或者你也可以通过下方的视频进行快速预览:

<iframe width="560" height="315" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="aspect-9/16 relative">
<iframe class="rounded w-full shadow-md border-none" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
"postinstall": "node .vitepress/scripts/prepare.js"
},
"devDependencies": {
"@iconify/json": "^1.1.346",
"@slidev/client": "^0.13.0",
"@slidev/parser": "^0.13.0",
"@iconify/json": "^1.1.347",
"@slidev/client": "^0.13.4",
"@slidev/parser": "^0.13.4",
"@slidev/theme-default": "^0.7.4",
"@slidev/types": "^0.13.0",
"@slidev/types": "^0.13.4",
"@types/fs-extra": "^9.0.11",
"@types/node": "^15.6.0",
"fs-extra": "^10.0.0",
Expand Down
50 changes: 25 additions & 25 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion windi.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import aspectRatio from 'windicss/plugin/aspect-ratio'
export default defineConfig({
extract: {
include: [
// '**/*.{md}',
'**/*.md',
'.vitepress/theme/**/*.{md,vue}',
'.vitepress/@slidev/client/internals/SlideContainer.vue',
'.vitepress/@slidev/client/layouts/*.vue',
Expand Down