diff --git a/.vitepress/config.js b/.vitepress/config.js index 7a10e15..7dfdaa5 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -46,10 +46,14 @@ const Guide = [ link: '/guide/presenter-mode', }, { +<<<<<<< HEAD <<<<<<< HEAD text: 'Интеграции редакторов', ======= text: 'Drawing & Annonations', +======= + text: 'Drawing & Annotations', +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c link: '/guide/drawing', }, { @@ -114,6 +118,10 @@ const Translations = [ text: 'Ελληνικά', link: 'https://el.sli.dev{{pathname}}', }, + { + text: '日本語', + link: 'https://ja.sli.dev{{pathname}}', + }, ] const Customizations = [ diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts index dd7136b..7c4c6fa 100644 --- a/.vitepress/showcases.ts +++ b/.vitepress/showcases.ts @@ -108,6 +108,30 @@ export const showcases: ShowCaseInfo[] = [ at: 'Thoughtworks Internal Lunch & Learn', datetime: '2021-11-12', }, + { + title: 'Git\'s Most Wanted', + cover: 'https://cdn.jsdelivr.net/gh/alexanderdavide/git-most-wanted@assets/slides-export/01.png', + author: { + name: 'Alexander Eble', + link: 'https://github.com/alexanderdavide', + }, + slidesLink: 'https://git-most-wanted.alex-eble.de', + sourceLink: 'https://github.com/alexanderdavide/git-most-wanted', + at: 'Internal Tech Talk', + datetime: '2022-03-11', + }, + { + title: 'OpenFunction 202', + cover: 'https://s2.loli.net/2022/05/22/4zsCnkQRFoAU1E5.png', + author: { + name: 'Haili Zhang', + link: 'https://github.com/webup', + }, + slidesLink: 'https://openfunction-talks.netlify.app/2022/202-node-async/', + sourceLink: 'https://github.com/webup/openfunction-talks/tree/main/202-node-async', + at: 'OpenFunction Tutorial Sharing', + datetime: '2022-05-08', + }, // Add yours here! { title: 'Yours?', diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts index 9c285e0..df153c6 100644 --- a/.vitepress/themes.ts +++ b/.vitepress/themes.ts @@ -315,6 +315,29 @@ export const community: ThemeInfo[] = [ 'light', ], }, + { + id: 'slidev-theme-academic', + name: 'Academic', + description: 'Academic presentations with Slidev made simple', + author: { + name: 'Alexander Eble', + link: 'https://github.com/alexanderdavide', + }, + repo: 'https://github.com/alexanderdavide/slidev-theme-academic', + previews: [ + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/01.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/02.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/08.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/04.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/05.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/06.png', + 'https://cdn.jsdelivr.net/gh/alexanderdavide/slidev-theme-academic@assets/example-export/07.png', + ], + tags: [ + 'dark', + 'light', + ], + }, // Add yours here! { id: '', diff --git a/README.md b/README.md index d3f0f88..cc88fa2 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ Documentation for [Slidev](https://github.com/slidevjs/slidev) | Deutsch | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock) | | Português (BR) | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12) | | Ελληνικά | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr) | +| 日本語 | [docs-ja](https://github.com/slidevjs/docs-el) | [ja.sli.dev](https://ja.sli.dev) | [@IkumaTadokoro](https://github.com/IkumaTadokoro) | ## Start Server Locally diff --git a/builtin/components.md b/builtin/components.md index a7f9768..5f8db55 100644 --- a/builtin/components.md +++ b/builtin/components.md @@ -4,7 +4,87 @@ > Документация в процессе разработки. А пока, вы можете взглянуть напрямую [в исходный код](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin). +<<<<<<< HEAD ## Кастомные компоненты +======= +### `Toc` + +Insert a Table Of Content. + +If you want a slide to not appear in the `` component, you can use in the front matter block of the slide: +```yml +--- +hideInToc: true +--- +``` + +Titles are displayed using the [`` component](#titles) + +#### Usage + +~~~md + +~~~ + +Parameters: + +* `columns` (`string | number`, default: `1`): The number of columns of the display +* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list +* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display +* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display +* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`): + * `'all'`: Display all items + * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item) + * `'onlySiblings'`: Display only items that are in current tree and their direct siblings + +### `Link` + +Insert a link you can use to navigate to a given slide. + +#### Usage + +~~~md +Go to slide 42 + +~~~ + +Parameters: + +* `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`) +* `title` (`string`): The title to display + +### `Titles` + +Insert the main title from a slide parsed as HTML. + +Titles and title levels get automatically retrieved from the first title element of each slides. + +You can override this automatic behaviour for a slide by using the front matter syntax: +```yml +--- +title: Amazing slide title +level: 2 +--- +``` + +#### Usage + +The `` component is a virtual component you can import with: +```js +import Titles from '/@slidev/titles.md' +``` + +Then you can use it with: +~~~md + +~~~ + +Parameters: + +* `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`) + +## Custom Components +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c Создайте папку `components/` в корне вашего проекта, и просто вставьте в неё ваши кастомные Vue-компоненты, после этого вы сможете использовать их по тому же имени в ваших markdown-файлах! diff --git a/builtin/layouts.md b/builtin/layouts.md index 7cb00c0..e6f28a9 100644 --- a/builtin/layouts.md +++ b/builtin/layouts.md @@ -7,7 +7,11 @@ ### `center` +<<<<<<< HEAD Отображает содержимое в центре экрана. +======= +Displays the content in the middle of the screen. +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c ### `cover` @@ -15,7 +19,11 @@ ### `default` +<<<<<<< HEAD Самый простой макет для отображения любого вида контента. +======= +The most basic layout, to display any kind of content. +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c ### `end` diff --git a/custom/fonts.md b/custom/fonts.md index c48badf..fd2ec75 100644 --- a/custom/fonts.md +++ b/custom/fonts.md @@ -100,7 +100,7 @@ fonts: ```yaml --- fonts: - provide: 'none' + provider: 'none' --- ``` diff --git a/custom/global-layers.md b/custom/global-layers.md index 5f8777f..3b1d607 100644 --- a/custom/global-layers.md +++ b/custom/global-layers.md @@ -4,13 +4,25 @@ Глобальные слои позволяют иметь кастомные компоненты, **постоянно** доступные в слайдах. Это может быть полезно для футера, анимации смены слайдов, глобальных эффектов и т.д. +<<<<<<< HEAD Slidev предоставляет два слоя для этого: создайте `global-top.vue` или `global-bottom.vue` в корне вашего проекта, и он будет загружен автоматически. +======= +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. +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c Связь слоёв: +<<<<<<< HEAD - Глобальный Top (`global-top.vue`) - Слайды - Глобальный Bottom (`global-bottom.vue`) +======= +- Global Top (`global-top.vue`) +- Slides +- Global Bottom (`global-bottom.vue`) +- NavControls + - Customized Navigation Controls (`custom-nav-controls.vue`) +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c ## Примеры @@ -23,7 +35,22 @@ Slidev предоставляет два слоя для этого: созда Текст `Ваше имя` будет отображаться на всех ваших слайдах. +<<<<<<< HEAD Чтобы использовать при определённых условиях, вы можете применить его с помощью [глобального контекста Vue](/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). +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c ```html @@ -60,3 +87,13 @@ Slidev предоставляет два слоя для этого: созда ``` + +```html + + + +``` diff --git a/custom/highlighters.md b/custom/highlighters.md index 0b94e76..507f7c8 100644 --- a/custom/highlighters.md +++ b/custom/highlighters.md @@ -60,8 +60,8 @@ import { defineShikiSetup } from '@slidev/types' export default defineShikiSetup(async({ loadTheme }) => { return { theme: { - dark: await loadTheme('path/to/theme.json')), - light: await loadTheme('path/to/theme.json')), + dark: await loadTheme('path/to/theme.json'), + light: await loadTheme('path/to/theme.json'), }, } }) diff --git a/custom/index.md b/custom/index.md index a0ef53c..db6759f 100644 --- a/custom/index.md +++ b/custom/index.md @@ -8,33 +8,80 @@ Slidev полностью кастомизируем, начиная от сти ```yaml --- +<<<<<<< HEAD # id темы или название пакета theme: 'default' # заголовок слайда, если не указан, то будет автоматически подставлен из первого найденного заголовка title: '' # шаблон заголовка для веб-страницы, `%s` будет заменен заголовком страницы +======= +# theme id or package name +# 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: 'Slidev' +# titleTemplate for the webpage, `%s` will be replaced by the page's title +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c titleTemplate: '%s - Slidev' +# information for your slides, can be a markdown string +info: false +<<<<<<< HEAD # загрузка pdf в SPA сборке, также может содержать кастомный URL download: true # подсветка синтаксиса, может быть 'prism' или 'shiki' +======= +# enabled pdf downloading in SPA build, can also be a custom url +download: false +# filename of the export file +exportFilename: 'slidev-exported.pdf' +# syntax highlighter, can be 'prism' or 'shiki' +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c highlighter: 'prism' # отображение номеров строк в блоках кода lineNumbers: false +<<<<<<< HEAD # включение Monaco редактора, по умолчанию только в дев режиме +======= +# enable monaco editor, can be boolean, 'dev' or 'build' +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c 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' +<<<<<<< HEAD # цветовая схема для слайдов, может быть 'auto', 'light', или 'dark' colorSchema: 'auto' # режим роутера для vue-router, может быть 'history' или 'hash' +======= +# force color schema for the slides, can be 'auto', 'light', or 'dark' +colorSchema: 'auto' +# router mode for vue-router, can be "history" or "hash" +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c routerMode: 'history' # соотношение сторон слайдов aspectRatio: '16/9' # реальная ширина canvas, единица измерения в пикселях canvasWidth: 980 +# used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x` +themeConfig: + primary: '#5d8392' +<<<<<<< HEAD # шрифты будут автоматически импортированы из Google fonts # Подробнее: https://sli.dev/custom/fonts +======= +# 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 +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c fonts: sans: 'Roboto' serif: 'Roboto Slab' @@ -45,10 +92,20 @@ defaults: layout: 'default' # ... +<<<<<<< HEAD # информация для слайдов, может быть markdown-строкой info: | ## Slidev My first [Slidev](http://sli.dev/) presentations! +======= +# drawing options +# Learn more: https://sli.dev/guide/drawing.html +drawings: + enabled: true + persist: false + presenterOnly: false + syncAll: true +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c --- ``` diff --git a/guide/exporting.md b/guide/exporting.md index 1ad405a..a247cdc 100644 --- a/guide/exporting.md +++ b/guide/exporting.md @@ -17,7 +17,17 @@ $ npm i -D playwright-chromium $ slidev export ``` +<<<<<<< HEAD Через несколько секунд ваши слайды будут находиться в `./slides-exports.pdf`. +======= +After a few seconds, your slides will be ready at `./slides-export.pdf`. + +In case you want to export your slides using the dark version of the theme, use the `--dark` option: + +```bash +$ slidev export --dark +``` +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c ### Экспорт с кликами diff --git a/guide/install.md b/guide/install.md index db2cbb4..e2c4fb7 100644 --- a/guide/install.md +++ b/guide/install.md @@ -39,7 +39,7 @@ $ npx slidev > Обратите внимание, если вы используете [pnpm](https://pnpm.io), вам нужно включить [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) опцию для корректной работы Slidev: > > ```bash -> echo 'shamefully-flatten=true' >> .npmrc +> echo 'shamefully-hoist=true' >> .npmrc > ``` ## Глобальная установка @@ -62,6 +62,169 @@ $ slidev ## Установка на Docker +<<<<<<< HEAD Если вам нужен быстрый способ запуска презентации в контейнерах, вы можете использовать предварительно созданный [docker](https://hub.docker.com/r/stig124/slidev) образ, поддерживаемый [stig124](https://github.com/Stig124), либо создать свой собственный. Более подробно в [slidevjs/container repo](https://github.com/slidevjs/container). +======= +If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker](https://hub.docker.com/r/tangramor/slidev) image maintained by [tangramor](https://github.com/tangramor), or build your own. + +Just run following command in your work folder: + +```bash +docker run --name slidev --rm -it \ + --user node \ + -v ${PWD}:/slidev \ + -p 3030:3030 \ + tangramor/slidev:latest +``` + +If your work folder is empty, it will generate a template `slides.md` and other related files under your work folder, and launch the server on port `3030`. + +You can access your slides from http://localhost:3030/ + + +### Build deployable image + +Or you can create your own slidev project to a docker image with Dockerfile: + +```Dockerfile +FROM tangramor/slidev:latest + +ADD . /slidev + +``` + +Create the docker image: `docker build -t myppt .` + +And run the container: `docker run --name myslides --rm --user node -p 3030:3030 myppt` + +You can visit your slides from http://localhost:3030/ + + +### Build hostable SPA (Single Page Application) + +Run command `docker exec -i slidev npx slidev build` on the running container `slidev`. It will generate static HTML files under `dist` folder. + + +#### Host on Github Pages + +You can host `dist` in a static web site such as [Github Pages](https://tangramor.github.io/slidev_docker/) or Gitlab Pages. + +Because in Github pages the url may contain subfolder, so you need to modify the generated `index.html` to change `href="/assets/xxx` to `href="./assets/xxx`. Or you may use `--base=//` option during the build process, such as: `docker exec -i slidev npx slidev build --base=/slidev_docker/`. + +And to avoid Jekyll build process, you need to add an empty file `.nojekyll`. + + +#### Host by docker + +You can also host it by yourself with docker: + +```bash +docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine +``` + +Or create a static image with following Dockerfile: + +```Dockerfile +FROM nginx:alpine + +COPY dist /usr/share/nginx/html + +``` + +Create the docker image: `docker build -t mystaticppt .` + +And run the container: `docker run --name myslides --rm -p 80:80 mystaticppt` + +You can visit your slides from http://localhost/ + + +Refer to the [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details. + +### Command Line Interface (CLI) + +`@slidev/cli` Expose a few commands you can use with `npx slidev ...` or by adding scripts in your `package.json`: +```json +{ + "script": { + "dev": "slidev" + } +} +``` + +In that case you will be able to run `npm run dev`. + +You can pass options to any commands: + +* boolean option are `true` if they are present, false otherwise (example: `slidev --open`) +* some options can have values you can add just after the option or by using the `=` character (example: `slidev --port 8080` or `slidev --port=8080`) + +If you use npm scripts, don't forget to add `--` after the npm command: +```bash +npm run slidev -- --open +``` + +#### `slidev [entry]` + +Start a local server for Slidev. + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +Options: + +* `--port`, `-p` (`number`, default: `3030`): port number. +* `--open`, `-o` (`boolean`, default: `false`): open in browser. +* `--remote [password]` (`string`): listen to public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query `password` parameter. +* `--log` (`'error', 'warn', 'info', 'silent'`, default: `'warn'`): Log level. +* `--force`, `-f` (`boolean`, default `false`): force the optimizer to ignore the cache and re-bundle. +* `--theme`, `-t` (`string`): override theme. + +#### `slidev build [entry]` + +Build hostable SPA. + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +Options: + +* `--watch`, `-w` (`boolean`, default: `false`): build watch. +* `--out`, `-o` (`string`, default: `dist`): output dir. +* `--base` (`string`, default: `/`): base URL (see https://cli.vuejs.org/config/#publicpath) +* `--download` (`boolean`, default: `false`): allow to download the slides as PDF inside the SPA. +* `--theme`, `-t` (`string`): override theme. + +#### `slidev export [entry]` + +Export slides to PDF (or other format). + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +Options: + +* `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output. +* `--base` (`'pdf', 'png', 'md'`, default: `'pdf'`): output format. +* `--timeout` (`number`, default: `30000`): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto). +* `--range` (`string`): page ranges to export (example: `'1,4-5,6'`). +* `--dark` (`boolean`, default: `false`): export as dark theme. +* `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every clicks (see https://sli.dev/guide/animations.html#click-animations). +* `--theme`, `-t` (`string`): override theme. + +#### `slidev format [entry]` + +Format the markdown file. + +* `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + +#### `slidev theme [subcommand]` + +Theme related operations. + +Subcommands: + +* `eject [entry]`: Eject current theme into local file system + * `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry. + * Options: + * `--dir` (`string`, default: `theme`): output dir. + * `--theme`, `-t` (`string`): override theme. +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c diff --git a/guide/syntax.md b/guide/syntax.md index d706ae6..b749132 100644 --- a/guide/syntax.md +++ b/guide/syntax.md @@ -72,7 +72,11 @@ console.log('Привет, мир!') //``` ~~~ +<<<<<<< HEAD ### Подсветка строк +======= +We support [Prism](http://prismjs.com) and [Shiki](https://github.com/shikijs/shiki) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details. +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c Мы поддерживаем [Prism](http://prismjs.com) и [Shiki](https://github.com/shiki/shiki) в качестве подсветки синтаксиса. Обратитесь к [разделу подсветки](/custom/highlighters) для получения более подробной информации. diff --git a/resources/learning.md b/resources/learning.md index dc4fec2..281fe83 100644 --- a/resources/learning.md +++ b/resources/learning.md @@ -16,7 +16,7 @@ - [神器！这款开源项目可以让你使用 Markdown 来做 PPT！](https://zhuanlan.zhihu.com/p/377567327) by [Github掘金计划](https://www.zhihu.com/people/github-stars) - [【用 markdown 写 Slide!】神器 Slidev 的安装及 bug 解决](https://blog.csdn.net/weixin_43828250/article/details/116664775) by HaloHoohoo -## 日本语 +## 日本語 - [開発者のためのスライド作成ツール Slidev がすごい](https://zenn.dev/ryo_kawamata/articles/introduce-slidev) by [ryo_kawamata](https://zenn.dev/ryo_kawamata) - [Markdownでオシャレなスライドを作るSli.dev](https://qiita.com/e99h2121/items/a115f8865a0dc21bb462) by [Nobuko YAMADA](https://qiita.com/e99h2121) diff --git a/themes/write-a-theme.md b/themes/write-a-theme.md index 06966af..ba198e0 100644 --- a/themes/write-a-theme.md +++ b/themes/write-a-theme.md @@ -120,7 +120,11 @@ Slidev переключает класс `dark` в элементе `html` ст В теме также предусмотрены цвета для подсветки синтаксиса. Мы поддерживаем как [Prism](https://prismjs.com/), так и [Shiki](https://github.com/shikijs/shiki). Подробнее в [документации по подсветке синтаксиса](/custom/highlighters). +<<<<<<< HEAD Вы можете использовать как один из них, так и оба. Примеры конфигураций дефолтной темы смотрите в [`./styles/prism.css`](https://github.com/slidevjs/slidev/blob/main/packages/theme-default/styles/prism.css) / [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/theme-default/setup/shiki.ts). +======= +You can support either one of them, or both. Refer to the default theme for configurations examples [`./styles/code.css`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/styles/code.css) / [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/setup/shiki.ts). +>>>>>>> afa4515b72ea8814d0a633bdb4ec4c41734b502c Также не забудьте указать поддерживаемую подсветку в вашем `package.json`