title: 自定义

自定义 {#customizations}

从样式到工具，Slidev 都是完全可以自定义的。你可以对以下这些工具进行自定义配置（ Vite ， Windi CSS ， Monaco ，等等。）

扉页配置 {#frontmatter-configures}

你可以在 Slidev 的第一张幻灯片扉页处（文件顶部）进行各项配置，以下是各项的默认参数。

  1. ---
  2. # 主题id 或 主题包名称
  3. # 了解更多：https://sli.dev/themes/use.html
  4. theme: 'default'
  5. # 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
  6. title: 'Slidev'
  7. # titleTemplate for the webpage, `%s` will be replaced by the page's title
  8. titleTemplate: '%s - Slidev'
  9. # information for your slides, can be a markdown string
  10. info: false
  12. # 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
  13. download: false
  14. # 要导出文件的文件名称
  15. exportFilename: 'slidev-exported.pdf'
  16. # 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
  17. highlighter: 'prism'
  18. # 在代码块中显示行号
  19. lineNumbers: false
  20. # 启用 monaco 编辑器，可以是 boolean，'dev' 或者 'build'
  21. monaco: 'dev'
  22. # 使用 vite-plugin-remote-assets 在本地下载远程资源，可以是 boolean，'dev' 或者 'build'
  23. remoteAssets: false
  24. # 控制幻灯片中的文本是否可以选择
  25. selectable: true
  26. # 启用幻灯片录制，可以是 boolean，'dev' 或者 'build'
  27. record: 'dev'
  29. # 幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark'
  30. colorSchema: 'auto'
  31. # vue-router 模式，可以使用 'history' 或 'hash' 模式
  32. routerMode: 'history'
  33. # 幻灯片的长宽比
  34. aspectRatio: '16/9'
  35. # canvas 的真实宽度，单位为 px
  36. canvasWidth: 980
  37. # 用于主题定制，会将属性 `x` 注入根样式 `--slidev-theme-x`
  38. themeConfig:
  39.   primary: '#5d8392'
  41. # favicon 可以是本地文件路径，也可以是一个 URL
  42. favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
  43. # 用于渲染图表的 PlantUML 服务器的 URL
  44. plantUmlServer: 'https://www.plantuml.com/plantuml'
  45. # 字体将从 Google 字体自动导入
  46. # 了解更多：https://sli.dev/custom/fonts
  47. fonts:
  48.   sans: 'Roboto'
  49.   serif: 'Roboto Slab'
  50.   mono: 'Fira Code'
  52. # 为所有幻灯片添加默认的 frontmatter
  53. defaults:
  54.   layout: 'default'
  55.   # ...
  57. # 绘制选项
  58. # 了解更多：https://sli.dev/guide/drawing.html
  59. drawings:
  60.   enabled: true
  61.   persist: false
  62.   presenterOnly: false
  63.   syncAll: true
  64. ---

你可以从 类型定义 获取到更多的配置信息。

目录结构 {#directory-structure}

Slidev 使用特定的目录结构来减少配置的复杂度，并使功能扩展更加的灵活和直观。

具体请参考 目录结构 章节。

Config Tools {#config-tools}