Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@code-sugar/slidev-theme-portrait) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

slidev-theme-portrait

一个用于录制纵向视频的 Slidev 主题。

[!WARNING] 此主题仍在开发中。

在线预览

在线示例

视频指南

TODO:

安装

在 slides.md 中添加主题配置，启动 Slidev 后，它会自动提示你安装主题。

---
theme: @code-sugar/slidev-theme-portrait
---

更多关于如何使用主题的信息，请参阅如何使用主题。

配置

此主题重写了以下配置：

{
  slidev: {
    // 主题支持亮色和暗色两种模式
    colorSchema: "both",
    defaults: {
      // 默认比例（纵向）
      aspectRatio: "9/16",
      // 默认宽度
      canvasWidth: 720,
      // 禁用代码复制
      codeCopy: false,
      fonts: {
        sans: "Nunito Sans",
        // 代码字体使用 Fira Code
        mono: "Fira Code",
      },
    },
  },
}

辅助线

[!WARNING] 演讲者模式下不可用。

增加了 Guidelines (辅助线) 功能，便于在 OBS 中标识录制窗口的裁剪区块，避免成片出现黑边。

在正式开始录制时，你应该关闭辅助线。

快捷键

按 l 键显示或隐藏辅助线。

右键菜单

Toggle Guidelines - 显示或隐藏辅助线。

Shiki

此主题重写了以下 shiki 配置：

import type { ShikiSetupReturn } from "@slidev/types";
import { defineShikiSetup } from "@slidev/types";

export default defineShikiSetup((): ShikiSetupReturn => {
  return {
    themes: {
      // 亮色主题下使用 "github-light"
      light: "github-light",
      // 暗色主题下使用 "dracula"
      dark: "dracula",
    },
  };
});

变量

此主题重写了以下根变量：

:root {
  /* 增大代码块的字体大小 */
  --slidev-code-font-size: 16px;
  /* 增大代码块的字体行高 */
  --slidev-code-line-height: 22px;
  /** 明亮模式下代码块的边框颜色 */
  --slidev-code-border: rgba(51, 51, 51, 0.15);
  /** 为代码块增加圆角 */
  --slidev-code-radius: 6px;
  /** 增大代码块的内边距 */
  --slidev-code-padding: 10px;
  /** shiki 明亮和暗黑模式下的字体颜色和背景色 */
  --shiki-light: #24292e;
  --shiki-dark: #e1e4e8;
  --shiki-light-bg: #fff;
  --shiki-dark-bg: #24292e;
}

html.dark {
  /** 暗黑模式下代码块的边框颜色 */
  --slidev-code-border: rgba(204, 204, 204, 0.15);
}

/** 为代码块增加边框 */
.slidev-code {
  border: 1px solid var(--slidev-code-border);
}

/** 为代码块增加 Mac 风格的 Window Control 按钮 */
.slidev-code::before {
  content: "";
  display: block;
  background-size: 40px;
  margin-bottom: calc(2 * var(--slidev-code-padding));
  border-radius: 50%;
  background: #ff0800 no-repeat 10px 10px;
  width: 12px;
  height: 12px;
  -webkit-box-shadow:
    20px 0 #fdbc40,
    40px 0 #35cd4b;
  box-shadow:
    20px 0 #fdbc40,
    40px 0 #35cd4b;
}

布局

此主题提供了以下布局：

---
theme: @code-sugar/slidev-theme-portrait
defaults:
  layout: portrait
---

推荐使用暗黑模式进行录制，因为竖屏在手机上播放，为了兼容非全屏时的“黑边”，此主题将背景设置为纯黑色。

/** 暗黑模式下背景为纯黑色 */
html.dark .slidev-layout.portrait {
  background-color: #000;
}

组件

此主题提供了以下组件：

TODO: