+
### Name
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index 3875e81..52368c9 100644
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -13,7 +13,7 @@ your-slidev/
├── styles/ # custom style
├── index.html # injections to index.html
├── slides.md # the main slides entry
- └── vite.config.ts # extending vite config
+ └── vite.config.ts # extending vite config
```
Tất cả chúng đều là tùy chọn.
@@ -48,7 +48,11 @@ your-slidev/
```
+<<<<<<< HEAD
Tính năng này được cung cấp bởi [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components), hãy tìm hiểu thêm tại đây.
+=======
+This feature is powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components), learn more there.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Slidev cũng cung cấp một số [component tích hợp](/builtin/components) để bạn sử dụng.
@@ -115,18 +119,24 @@ import './code.css'
import './layouts.css'
```
+<<<<<<< HEAD
Style sẽ được thực thi bởi [Windi CSS](http://windicss.org/) và [PostCSS](https://postcss.org/), vì vậy bạn có thể sử dụng lồng ghép css và [at-directives](https://windicss.org/features/directives.html). Ví dụ:
+=======
+Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://unocss.dev/transformers/directives#apply) out-of-box. For example:
+
+
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```less
.slidev-layout {
- @apply px-14 py-10 text-[1.1rem];
+ --uno: px-14 py-10 text-[1.1rem];
h1, h2, h3, h4, p, div {
- @apply select-none;
+ --uno: select-none;
}
pre, code {
- @apply select-text;
+ --uno: select-text;
}
a {
@@ -135,7 +145,11 @@ Style sẽ được thực thi bởi [Windi CSS](http://windicss.org/) và [Post
}
```
+<<<<<<< HEAD
[Tìm hiểu thêm về cú pháp](https://windicss.org/features/directives.html).
+=======
+[Learn more about the syntax](https://unocss.dev/transformers/directives#apply).
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## `index.html`
@@ -181,6 +195,12 @@ Ví dụ: đối với `index.html` tùy chỉnh sau:
## Global Layers
+<<<<<<< HEAD
Quy ước: `global-top.vue` | `global-bottom.vue`
Tìm hiểu thêm về: [Global Layers](/custom/global-layers)
+=======
+Conventions: `global-top.vue` | `global-bottom.vue`
+
+Learn more: [Global Layers](/custom/global-layers)
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
diff --git a/custom/fonts.md b/custom/fonts.md
index 15cdbc2..8e5a5f2 100644
--- a/custom/fonts.md
+++ b/custom/fonts.md
@@ -14,11 +14,11 @@ In your frontmatter, configure as following
---
fonts:
# basically the text
- sans: 'Robot'
- # use with `font-serif` css class from windicss
- serif: 'Robot Slab'
+ sans: Robot
+ # use with `font-serif` css class from UnoCSS
+ serif: Robot Slab
# for code blocks, inline code, etc.
- mono: 'Fira Code'
+ mono: Fira Code
---
```
@@ -28,7 +28,11 @@ Phông chữ sẽ được **nhập tự động từ [Google Fonts](https://fon
## Local Fonts
+<<<<<<< HEAD
Theo mặc định, Slidev giả định tất cả các phông chữ được chỉ định thông qua cấu hình `fonts` đến từ Google Fonts. Nếu bạn muốn sử dụng font cục bộ, hãy chỉ định `fonts.local` để chọn không tự động nhập.
+=======
+By default, Slidev assumes all the fonts specified via `fonts` configurations come from Google Fonts. If you want to use local fonts, specify the `fonts.local` to opt-out the auto-importing.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```yaml
---
@@ -36,7 +40,7 @@ fonts:
# like font-family in css, you can use `,` to separate multiple fonts for fallback
sans: 'Helvetica Neue,Robot'
# mark 'Helvetica Neue' as local font
- local: 'Helvetica Neue'
+ local: Helvetica Neue
---
```
@@ -47,7 +51,7 @@ Theo mặc định, Slidev nhập ba trọng số `200`, `400`, `600` cho mỗi
```yaml
---
fonts:
- sans: 'Robot'
+ sans: Robot
# default
weights: '200,400,600'
# import italic fonts, default `false`
@@ -64,13 +68,19 @@ Cấu hình này áp dụng cho tất cả các font web. Để có thể chi ti
```yaml
---
fonts:
- sans: 'Robot'
- serif: 'Robot Slab'
- mono: 'Fira Code'
+ sans: Robot
+ serif: Robot Slab
+ mono: Fira Code
---
```
+<<<<<<< HEAD
sẽ cho kết quả
+=======
+will result in
+
+
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```css
.font-sans {
@@ -90,7 +100,7 @@ Nếu bạn muốn tắt font dự phòng, hãy định cấu hình như sau
---
fonts:
mono: 'Fira Code, monospace'
- fallback: false
+ fallbacks: false
---
```
@@ -104,6 +114,6 @@ Hiện tại, chỉ Google Fonts được hỗ trợ, chúng tôi dự kiến s
```yaml
---
fonts:
- provide: 'none'
+ provider: none
---
```
diff --git a/custom/global-layers.md b/custom/global-layers.md
index caa4735..c8ca1b4 100644
--- a/custom/global-layers.md
+++ b/custom/global-layers.md
@@ -4,18 +4,24 @@
Các Global layers cho phép bạn có các component tùy chỉnh **liên tục** trên các trang trình bày. Điều này có thể hữu ích để có chân trang, animation trang trình bày chéo, hiệu ứng toàn bộ, v.v...
+<<<<<<< HEAD
Slidev cung cấp hai layer cho cách sử dụng này, tạo `global-top.vue` hoặc `global-bottom.vue` trong dự án gốc của bạn và nó sẽ tự động nhận.
+=======
+Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue` or `custom-nav-controls.vue` under your project root and it will pick up automatically.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Mối quan hệ layer:
- Global Top (`global-top.vue`)
- Slides
- Global Bottom (`global-bottom.vue`)
+- NavControls
+ - Customized Navigation Controls (`custom-nav-controls.vue`)
## Ví dụ
```html
-
+
@@ -23,7 +29,22 @@ Mối quan hệ layer:
Dòng chữ `Your Name` sẽ xuất hiện trên tất cả các slide của bạn.
+<<<<<<< HEAD
Để bật nó có điều kiện, bạn có thể áp dụng nó với [Vue Global Context](/custom/vue-context).
+=======
+```html
+
+
+
+
+
+
+```
+
+The button `Next` will appear in NavControls.
+
+To enable it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context).
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```html
@@ -60,3 +81,13 @@ Dòng chữ `Your Name` sẽ xuất hiện trên tất cả các slide của b
```
+
+```html
+
+
+
+
+
+
+
+```
diff --git a/custom/highlighters.md b/custom/highlighters.md
index 46f77a6..59e28c2 100644
--- a/custom/highlighters.md
+++ b/custom/highlighters.md
@@ -1,34 +1,53 @@
# Đánh dấu
+<<<<<<< HEAD
Slidev đi kèm với hai công cụ đánh dấu cú pháp để bạn lựa chọn:
+=======
+Slidev comes with two syntax highlighters for you to choose from:
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
- [Prism](https://prismjs.com/)
- [Shiki](https://github.com/shikijs/shiki)
**Prism** là một trong những công cụ đánh dấu cú pháp phổ biến nhất. Việc đánh dấu được thực hiện bằng cách thêm các lớp token vào code và nó được đánh dấu bằng cách sử dụng CSS. Bạn có thể duyệt qua [chủ đề chính thức](https://github.com/PrismJS/prism-themes), hoặc tự tạo/tùy chỉnh một chủ đề rất dễ dàng bằng cách sử dụng [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars).
+<<<<<<< HEAD
Mặt khác, **Shiki**, à một công cụ đánh dấu cú pháp hỗ trợ ngữ pháp TextMate. Nó tạo ra các token có màu, vì vậy không cần thêm CSS. Vì nó có hỗ trợ ngữ pháp tuyệt vời, màu sắc được tạo ra rất chính xác, giống như những gì bạn sẽ thấy trong VS Code. Shiki cũng đi kèm với [một loạt các chủ đề cài sẵn](https://github.com/shikijs/shiki/blob/master/docs/themes.md). Nhược điểm của Shiki là nó cũng yêu cầu các chủ đề TextMate (tương thích với chủ đề VS Code) để làm nổi bật, có thể khó tùy chỉnh hơn một chút.
+=======
+**Shiki** is a TextMate grammar-powered syntax highlighter. It generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with [a bunch of built-in themes](https://shiki.style/themes). In Slidev, [TwoSlash](https://sli.dev/guide/syntax#twoslash-integration) support is also built-in.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Chủ đề slidev thường hỗ trợ cả Prism và Shiki, nhưng tùy thuộc vào chủ đề bạn đang sử dụng, nó có thể chỉ hỗ trợ một trong số chúng.
Khi bạn có sự lựa chọn, sự cân bằng về cơ bản là:
+<<<<<<< HEAD
- **Prism** để tùy chỉnh dễ dàng hơn
- **Shiki** để đánh dấu chính xác hơn
Theo mặc định, Slidev sử dụng Prism. Bạn có thể thay đổi nó bằng cách sửa đổi frontmatter của mình:
+=======
+- **Prism** for easier customization
+- **Shiki** for accurate highlighting
+
+Slidev uses Shiki by default since v0.47. You can switch to it by adding the following to your `slides.md`:
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```yaml
---
-highlighter: shiki
+highlighter: Prism
---
```
+<<<<<<< HEAD
## Cấu hình Prism
Để định cấu hình Prism, bạn chỉ có thể nhập css chủ đề hoặc sử dụng [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) để định cấu hình chủ đề cho cả chế độ sáng và tối. Tham khảo tài liệu của nó để biết thêm chi tiết.
## Cấu hình Shiki
+=======
+## Configure Shiki
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
@@ -40,29 +59,25 @@ import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup(() => {
return {
- theme: {
+ themes: {
dark: 'min-dark',
light: 'min-light',
},
+ transformers: [
+ // ...
+ ]
}
})
```
+<<<<<<< HEAD
Tham khảo [tài liệu của Shiki](https://github.com/shikijs/shiki/blob/master/docs/themes.md#all-themes) để biết các tên chủ đề có sẵn.
Hoặc nếu bạn muốn sử dụng chủ đề của riêng mình:
+=======
+Refer to [Shiki's docs](https://shiki.style) for available theme names.
-```ts
-/* ./setup/shiki.ts */
-
-import { defineShikiSetup } from '@slidev/types'
+## Configure Prism
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
-export default defineShikiSetup(async({ loadTheme }) => {
- return {
- theme: {
- dark: await loadTheme('path/to/theme.json')),
- light: await loadTheme('path/to/theme.json')),
- },
- }
-})
-```
+To configure your Prism, you can just import the theme CSS or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
diff --git a/custom/index.md b/custom/index.md
index def2884..b3abec1 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -1,6 +1,10 @@
# Các tùy chỉnh
+<<<<<<< HEAD
Slidev hoàn toàn có thể tùy chỉnh, từ kiểu dáng đến cấu hình công cụ. Nó cho phép bạn định cấu hình các công cụ bên dưới ([Vite](/custom/config-vite), [Windi CSS](/custom/config-windicss), [Monaco](/custom/config-monaco), v.v...)
+=======
+Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [UnoCSS](/custom/config-unocss), [Monaco](/custom/config-monaco), etc.)
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## Cấu hình Frontmatter
@@ -9,46 +13,94 @@ Bạn có thể định cấu hình Slidev trong frontmatter của trang trình
```yaml
---
# theme id or package name
-theme: 'default'
+# Learn more: https://sli.dev/themes/use.html
+theme: default
# title of your slide, will auto infer from the first header if not specified
-title: ''
+title: Slidev
# titleTemplate for the webpage, `%s` will be replaced by the page's title
titleTemplate: '%s - Slidev'
+# information for your slides, can be a markdown string.
+info: false
+# author field for exported PDF
+author: Your Name Here
+# keywords field for exported PDF, comma-delimited.
+keywords: keyword1,keyword2
+# enable presenter mode, can be boolean, 'dev' or 'build'
+presenter: true
# enabled pdf downloading in SPA build, can also be a custom url
-download: true
-# syntax highlighter, can be 'prism' or 'shiki'
-highlighter: 'prism'
+download: false
+# filename of the export file
+exportFilename: slidev-exported
+# export options
+# use export CLI options in camelCase format
+# Learn more: https://sli.dev/guide/exporting.html
+export:
+ format: pdf
+ timeout: 30000
+ dark: false
+ withClicks: false
+ withToc: false
+# syntax highlighter, can be 'prism', 'shiki'
+highlighter: shiki
# show line numbers in code blocks
lineNumbers: false
-# enable monaco editor, default to dev only
-monaco: 'dev'
+# enable monaco editor, can be boolean, 'dev' or 'build'
+monaco: dev
+# download remote assets in local using vite-plugin-remote-assets, can be boolean, 'dev' or 'build'
+remoteAssets: false
+# controls whether texts in slides are selectable
+selectable: true
+# enable slide recording, can be boolean, 'dev' or 'build'
+record: dev
-# force color schema for the slides, could be 'auto', 'light', or 'dark'
-colorSchema: 'auto'
-# router mode for vue-router, could be "history" or "hash"
-routerMode: 'history'
+# force color schema for the slides, can be 'auto', 'light', or 'dark'
+colorSchema: auto
+# router mode for vue-router, can be "history" or "hash"
+routerMode: history
# aspect ratio for the slides
-aspectRatio: '16/9'
+aspectRatio: 16/9
# real width of the canvas, unit in px
canvasWidth: 980
+# used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x`
+themeConfig:
+ primary: '#5d8392'
+# favicon, can be a local file path or URL
+favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
+# URL of PlantUML server used to render diagrams
+plantUmlServer: 'https://www.plantuml.com/plantuml'
# fonts will be auto imported from Google fonts
# Learn more: https://sli.dev/custom/fonts
fonts:
- sans: 'Roboto'
- serif: 'Roboto Slab'
- mono: 'Fira Code'
+ sans: Roboto
+ serif: Roboto Slab
+ mono: Fira Code
# default frontmatter applies to all slides
defaults:
- layout: 'default'
+ layout: default
# ...
+<<<<<<< HEAD
# information for your slides, can be a markdown string
info: |
## Slidev
Trang trình bày [Slidev](http://sli.dev/) đầu tiên của tôi!
+=======
+# drawing options
+# Learn more: https://sli.dev/guide/drawing.html
+drawings:
+ enabled: true
+ persist: false
+ presenterOnly: false
+ syncAll: true
+
+# HTML tag attributes
+htmlAttrs:
+ dir: ltr
+ lang: en
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
---
```
@@ -58,7 +110,28 @@ Xem [định nghĩa loại](https://github.com/slidevjs/slidev/blob/main/package
Check out the [type definitions](https://github.com/slidevjs/slidev/blob/main/packages/types/src/config.ts) for more options.
>>>>>>> ee7ae42035591cb6565a72f5217129c670a59b0c
+<<<<<<< HEAD
## Cấu trúc thư mục
+=======
+## Per slide configuration
+
+In addition, every slide accepts the following configuration in the Frontmatter block:
+
+- `clicks` (`number`): Custom clicks count (learn more [here](/guide/animations.html#custom-total-clicks-count)).
+- `disabled` (`boolean`): Completely disable and hide the slide.
+- `hide` (`boolean`): The same as `disabled`.
+- `hideInToc` (`boolean`): Hide the slide for the `
` components (learn more [here](/builtin/components.html#toc)).
+- `layout` (`string`): Defines the layout component applied to the slide (learn more [here](/guide/syntax.html#front-matter-layouts) and [here](/builtin/layouts.html)).
+- `level` (`number`): Override the title level for the `` and `` components (only if `title` has also been declared, learn more [here](/builtin/components.html#titles)).
+- `preload` (`boolean`, default `true`): Preload the next slide (learn more [here](/guide/animations.html#motion)).
+- `routeAlias` (`string`): Create a route alias that can be used in the URL or with the ` ` component (learn more [here](/builtin/components.html#link)).
+- `src` (`string`): Includes a markdown file (learn more [here](/guide/syntax.html#multiple-entries)).
+- `title` (`string`): Override the title for the `` and `` components (learn more [here](/builtin/components.html#titles)).
+- `transition` (`string | TransitionProps`): Defines the transition between the slide and the next one (learn more [here](/guide/animations.html#slide-transitions)).
+- `zoom` (`number`): Custom zoom scale. Useful for slides with a lot of content.
+
+## Directory Structure
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Slidev sử dụng các quy ước cấu trúc thư mục để thu nhỏ bề mặt cấu hình và làm cho các phần mở rộng trong chức năng trở nên linh hoạt và trực quan.
@@ -69,7 +142,7 @@ Tham khảo phần [Cấu trúc thư mục](/custom/directory-structure).
- [Highlighters](/custom/highlighters)
- [Configure Vue](/custom/config-vue)
- [Configure Vite](/custom/config-vite)
-- [Configure Windi CSS](/custom/config-windicss)
+- [Configure UnoCSS](/custom/config-unocss)
- [Configure Monaco](/custom/config-monaco)
- [Configure KaTeX](/custom/config-katex)
- [Configure Mermaid](/custom/config-mermaid)
diff --git a/custom/vue-context.md b/custom/vue-context.md
index b3443c6..db56914 100644
--- a/custom/vue-context.md
+++ b/custom/vue-context.md
@@ -25,6 +25,34 @@ Trang hiện tại là: {{ $slidev.nav.currentPage }}
## Thuộc tính
+### `$clicks`
+
+`$clicks` hold a number of clicks on the current slide. Can be used conditionally to show different content on clicks.
+
+```html
+Content
+```
+
+### `$page`
+
+`$page` holds the number of the current page, 1-indexed.
+
+```md
+Page: {{ $page }}
+
+Is current page active: {{ $page === $slidev.nav.currentPage }}
+```
+
+### `$renderContext`
+
+`$renderContext` holds the current render context, can be `slide`, `overview`, `presenter` or `previewNext`
+
+```md
+
+ This content will only be rendered in slides view
+
+```
+
### `$slidev.nav`
Một đối tượng phản ứng giữ các thuộc tính và điều khiển của điều hướng trang trình bày. Ví dụ như:
@@ -41,12 +69,12 @@ $slidev.nav.go(10) // go slide #10
$slidev.nav.currentPage // current slide number
$slidev.nav.currentLayout // current layout id
-
-$slidev.nav.clicks // current clicks count
```
Để biết thêm các thuộc tính khả dụng, hãy tham khảo [nav.ts](https://github.com/slidevjs/slidev/blob/main/packages/client/logic/nav.ts).
+> Note: `$slidev.nav.clicks` is a global state while `$clicks` is local to each slide. It's recommended to **use `$clicks` over `$slidev.nav.clicks`** to avoid clicks changed been triggered on page transitions.
+
### `$slidev.configs`
Một đối tượng phản ứng giữ [các cấu hình đã được phân tích cú pháp](/custom/#frontmatter-configures) trong frontmatter đầu tiên của `slides.md`. Ví dụ
@@ -69,10 +97,16 @@ Một đối tượng phản ứng giữ các cấu hình chủ đề đã đư
---
title: My First Slidev!
themeConfig:
- primary: #213435
+ primary: # 213435
---
```
```
{{ $slidev.themeConfigs.primary }} // '#213435'
```
+
+### `$nav`
+
+> Available since v0.43.0
+
+A shorthand of `$slidev.nav`.
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..c62e6a4
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.vitepress/@slidev
+.vitepress/cache
diff --git a/docs/.npmrc b/docs/.npmrc
new file mode 100644
index 0000000..cf04042
--- /dev/null
+++ b/docs/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..f03c99f
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,5 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+
+})
diff --git a/guide/animations.md b/guide/animations.md
index 5c8af59..96aae8a 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -1,14 +1,27 @@
+<<<<<<< HEAD
# Animation
+=======
+---
+outline: deep
+---
+
+# Animations
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## Click Animation
+> [!NOTE]
+> Since v0.48.0, we are rewritten the click animations system with much more consistent behaviors. It might change the behaviors of your existing slides in edge cases. While this page is showing the new click system, you can find more details about the refactor in [#1279](https://github.com/slidevjs/slidev/pull/1279).
+
### `v-click`
Để áp dụng "click animation" cho các element, bạn có thể sử dụng `v-click` hoặc các component ``
```md
-# Hello
+
+<<<<<<< HEAD
@@ -22,30 +35,62 @@ Hello World
Hey!
+=======
+
Hello **World**
+
+
+
Hey!
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```
### `v-after`
+<<<<<<< HEAD
Việc sử dụng `v-after` tương tự như `v-click` nhưng nó sẽ hiển thị element khi kích hoạt `v-click` trước đó.
+=======
+`v-after` is only provided as a directive. It will turn the element visible when the previous `v-click` is triggered.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```md
-
Hello
-
World
+
Hello
+
World
```
+<<<<<<< HEAD
Khi bạn nhấp vào nút "next", cả hai `Hello` và `World` sẽ cùng hiển thị.
+=======
+When you press "next", both `Hello` and `World` will show up together.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
-### `v-click-hide`
+### Hide after clicking
+<<<<<<< HEAD
Tương tự như `v-click` nhưng thay vì làm cho phần tử xuất hiện, nó làm cho element ẩn sau khi nhấn.
+=======
+Add a `.hide` modifier to `v-click` or `v-after` to make the element invisible after clicking, instead of showing up.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
+
+```md
+
Visible after 1 click
+
Hidden after 2 click
+
Hidden after 2 click
+```
+
+For `v-click` component, you can use the `hide` prop to achieve the same effect:
```md
-
Hello
+
Visible after 1 click
+
Hidden after 2 click
```
### `v-clicks`
+<<<<<<< HEAD
`v-clicks` chỉ được cung cấp như một component. Đó là một cách viết tắt để áp dụng `v-click` cho tất cả các element con của nó. Nó đặc biệt hữu ích khi làm việc với list.
+=======
+`v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. It is especially useful when working with lists and tables.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```md
@@ -53,14 +98,146 @@ Tương tự như `v-click` nhưng thay vì làm cho phần tử xuất hiện,
- Item 1
- Item 2
- Item 3
-- Item 4
```
+<<<<<<< HEAD
Một mục sẽ hiển thị mỗi khi bạn nhấn vào "next".
### Custom Số lần Click
+=======
+An item will become visible each time you click "next".
+It accepts a `depth` prop for nested list:
+
+```md
+
+
+- Item 1
+ - Item 1.1
+ - Item 1.2
+- Item 2
+ - Item 2.1
+ - Item 2.2
+
+
+```
+
+Also, you can use the `every` prop to specify the number of items to show after each click:
+
+```md
+
+
+- Item 1 (part 1)
+- Item 1 (part 2)
+- Item 2 (part 1)
+- Item 2 (part 2)
+
+
+```
+
+### Positioning
+
+By default, the clicking animations take place one by one. You can customize the animation position of elements by using the `at` prop or the `v-click` directive with value.
+
+Like the CSS layout system, click-animated elements can be "relative" or "absolute":
+
+#### Relative Position
+
+This actual position of relative elements are calculated based on the previous relative elements:
+
+````md
+
visible after 1 click
+
visible after 3 clicks
+
hidden after 2 clicks
+
+```js {none|1|2}{at:'+5'}
+1 // highlighted after 7 clicks
+2 // highlighted after 8 clicks
+```
+````
+
+> [!NOTE]
+> The default value of `v-click` is `'+1'` when you don't specify it.
+
+In fact, `v-after` are just shortcuts for `v-click` with `at` prop:
+
+```md
+
+
+
+
+
+
+
+
+```
+
+:::info
+Only string values start with `'+'` or `'-'` like `'+1'` are treated as relative positions:
+
+| Value | Kind |
+| -------------- | -------- |
+| `'-1'`, `'+1'` | Relative |
+| `+1` === `1` | Absolute |
+| `'1'` | Absolute |
+
+So don't forget the single quotes for the relative values.
+:::
+
+#### Absolute Position
+
+The given value is the exact click count to show the element:
+
+````md
+
visible after 3 clicks
+
visible after 2 clicks
+
hidden after 1 click
+
+```js {none|1|2}{at:3}
+1 // highlighted after 3 clicks
+2 // highlighted after 4 clicks
+```
+````
+
+#### Mixed Case
+
+You can mix the absolute and relative positions:
+
+```md
+
visible after 1 click
+
visible after 3 clicks
+
visible after 2 click
+
visible after 1 click
+
visible after 4 clicks
+```
+
+The following example synchronizes the highlighting of the two code blocks:
+
+````md
+```js {1|2}{at:1}
+1 + 1
+'a' + 'b'
+```
+
+```js {1|2}{at:1}
+2
+'ab'
+```
+````
+
+### Enter & Leave
+
+> Available since v0.43.0
+
+You can also specify the enter and leave index for the `v-click` directive by passing an array. The end index is exclusive.
+
+```md
+
This will be shown on the 2nd and 3rd clicks, and hide again after the 4th.
+```
+
+### Custom Total Clicks Count
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Theo mặc định, Slidev đếm số bước cần thiết trước khi chuyển sang trang chiếu tiếp theo. Bạn có thể ghi đè cài đặt này bằng cách chuyển tùy chọn frontmatter `clicks`:
@@ -71,6 +248,7 @@ clicks: 10
---
```
+<<<<<<< HEAD
### Ordering
Chuyển chỉ số nhấp chuột vào directive của bạn, bạn có thể tùy chỉnh thứ tự của việc revealing
@@ -100,6 +278,9 @@ clicks: 3
```
### Chuyển đổi Element
+=======
+### Element Transitions
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Khi bạn áp dụng `v-click` cho các element của mình, nó sẽ đính kèm tên class `slidev-vclick-target` vào đó. Khi các element bị ẩn, tên class `slidev-vclick-hidden` cũng sẽ được đính kèm. Ví dụ:
@@ -128,12 +309,18 @@ Theo mặc định, một quá trình chuyển đổi opacity được áp dụn
}
```
+<<<<<<< HEAD
Bạn có thể ghi đè chúng để tùy chỉnh các hiệu ứng chuyển tiếp trong các stylesheet tùy chỉnh của mình.
Ví dụ: bạn có thể đạt được các chuyển đổi scale bằng cách:
+=======
+You can override them to customize the transition effects in your custom stylesheets.
+
+For example, you can achieve the scaling up transitions by:
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```css
-// styles.css
+/* styles.css */
.slidev-vclick-target {
transition: all 500ms ease;
@@ -161,6 +348,42 @@ Ví dụ: bạn có thể đạt được các chuyển đổi scale bằng các
Tìm hiểu thêm về [customizing styles](/custom/directory-structure#style).
+## Rough Markers
+
+> Available since v0.48.0
+
+Slidev integrates [Rough Notation](https://github.com/linkstrifer/react-rough-notation) to allow marking or highlighting elements in your slides.
+
+### `v-mark`
+
+Rough Notation integrates comes with the `v-mark` directive.
+
+#### Type
+
+`v-mark.underline` for Underline mark, `v-mark.circle` for Circle mark, etc. Default to `underline`
+
+#### Color
+
+`v-mark.red` make the notation `red`. Supported builtin color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`
+
+#### Clicks
+
+`v-mark` works like `v-click` and will trigger after a click. Same as `v-click`, it allows you to pass a custom click value, like `v-mark="5"` or `v-mark="'+1'"`.
+
+#### Options
+
+Optionally you can pass an object to `v-mark` to specify the options, for example:
+
+```vue
+
+Important text
+
+```
+
+#### Preview
+
+
+
## Motion
Slidev được tích hợp sẵn [@vueuse/motion](https://motion.vueuse.org/). Bạn có thể sử dụng `v-motion` cho bất kỳ element nào để thực hiện motion áp dụng cho chúng. Ví dụ
@@ -196,8 +419,116 @@ Văn bản `Slidev` sẽ di chuyển từ `-80px` về vị trí ban đầu khi
>
> ```
+<<<<<<< HEAD
Tìm hiểu chế độ [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/directive-usage.html) | [Presets](https://motion.vueuse.org/presets.html)
## Chuyển trang
-> Hỗ trợ tích hợp cho các slide KHÔNG ĐƯỢC cung cấp trong phiên bản hiện tại. Chúng tôi đang có kế hoạch bổ sung hỗ trợ cho họ trong phiên bản chính tiếp theo. Trước đó, bạn vẫn có thể sử dụng các style và librarie tùy chỉnh của mình để làm điều đó.
\ No newline at end of file
+> Hỗ trợ tích hợp cho các slide KHÔNG ĐƯỢC cung cấp trong phiên bản hiện tại. Chúng tôi đang có kế hoạch bổ sung hỗ trợ cho họ trong phiên bản chính tiếp theo. Trước đó, bạn vẫn có thể sử dụng các style và librarie tùy chỉnh của mình để làm điều đó.
+=======
+Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/features/directive-usage) | [Presets](https://motion.vueuse.org/features/presets)
+
+## Slide Transitions
+
+