Fusuma 및 markdown을 사용한 간단한 프레젠테이션

Fusuma를 사용하는 주요 이점은 다음과 같습니다.

슬라이드를 만들려면 새로운md나mdx 파일을 추가하십시오.

호응성 디자인.

자동으로 내용 부분을 생성한다.

구성할 필요는 없지만 원하는 설정이 있습니다.

할인 및 MDX 지원

몇 가지 주제를 포함한다.

코드 블록, 도표와 흐름도의 코드 문법이 뚜렷하게 나타난다.

프레젠테이션 모드, 슬라이드는 한 화면에 있고 프레젠테이션 제어판은 다른 화면에 있다.

운행 시간 계수기.

다음 슬라이드를 미리 봅니다.

이전 슬라이드의 미리 보기

프레젠테이션

현재/나머지 슬라이드.

오디오와 동작을 녹음한다.

글로벌 CSS 설정의 사용자 정의 CSS.

GitHub 페이지와 Netlify 또는 Vercel 등 다른 호스트에 쉽게 배포할 수 있습니다.

슬라이드를 PDF 형식으로 내보냅니다.

설치하다.

다음 내용을 사용하여 새 빈 항목을 만듭니다.

npm init -y

scripts 섹션에 다음 명령을 추가합니다.

  "scripts": {
    "init": "fusuma init",
    "start": "fusuma start",
    "start-prod": "npm run build && fusuma start-prod",
    "build": "fusuma build",
    "deploy": "npm run build && fusuma deploy",
    "export-pdf": "npm run build && fusuma pdf"
  }

npm install -D fusumafusuma-dev 의존항을 설치합니다.
최종 집행npm run init.다음과 같은 기본 Fusuma 항목이 제공됩니다.

├── .fusumarc.yml
├── .github
│   └── workflows
│       └── fusuma.yml
├── package.json
├── slides
│   └── 0-slide.md
└── style.css

npm run start를 사용하여 테스트를 수행하고 첫 번째 슬라이드0-slide.md를 검토할 수 있습니다.

새 슬라이드 만들기

이것은 slides 폴더에 새 태그 파일을 만드는 것처럼 간단합니다.슬라이드의 순서는 숫자이고 그 다음은 자모가 될 것이다.

첫 번째 슬라이드 수정

0-slide.md에서는 다음을 볼 수 있습니다.

<!-- classes: title -->

# Hello😃

<!-- block-start: grid -->
<!-- account: twitter, your-account-name -->
<!-- block-end -->

---

<!-- section-title: "Bye👋 -->"

## Bye👋

슬라이드에 나오는 몇 가지 구문을 살펴보겠습니다.

클래스를 사용하면 style.css 파일에 선언될 CSS 클래스를 포함할 수 있습니다.

블록 시작/블록 끝을 사용하여 CSS 클래스를 블록에 포함할 수 있습니다.

계정은 이 소셜네트워크서비스에 클래스 이름 (이 예시에서 account-twitter 을 만들고 아이콘과 링크를 생성합니다.

- 슬라이드를 분할할 수 있습니다. 그 다음 내용은 새로운 슬라이드가 될 것입니다.

섹션 타이틀은 파일의 제목을 표시합니다. 사이드바와 디렉터리에 저장됩니다.

다른 탭도 사용할 수 있습니다.

라벨

조각조각

세션을 사용하면 슬라이드의 다른 부분을 하나씩 표시할 수 있습니다.

<!-- fragments-start -->

You're thinking in number...

<!-- fragments-end -->

<!-- fragments-start -->

3️⃣2️⃣

<!-- fragments-end -->

배경.

특정 슬라이드의 배경을 그림과 색으로 설정할 수 있습니다.

<!-- background: '../assets/background.jpeg' -->
<!-- background: #f5f5f5 -->
<!-- background: green -->

강연자 노트

만약 네가 즉흥적으로 창작하는 것을 좋아하지 않는다면, 강연자의 필기로 포위망을 풀 수 있다.잠시 후 강연자의 화면을 자세히 볼 것입니다. 그러나 이 주석들은 당신만 볼 수 있는 부분에 나타날 것입니다.

<!-- note
Remember to not say your PIN card
-->

소셜네트워크서비스 계정

소셜네트워크서비스(SNS)에서 다음 아이콘과 링크를 사용할 수 있습니다.

<!-- account: twitter, your account name -->
<!-- account: github, your account name -->
<!-- account: facebook, your account name -->
<!-- account: linkedin, your account name -->

QR코드

QR을 만들 수 있습니다.

<!-- qr: https://github.com/hiroppy/fusuma -->

컨텐츠 슬라이드 만들기

우리가 필요로 할 수 있는 첫 번째 슬라이드, 내용을 만듭니다.1-contents.md라는 새로운 가격 인하 파일을 만듭니다. 이름은 완전히 당신이 결정합니다.

## Contents

<!-- contents -->

이 파일에는 모든 슬라이드의 제목을 자동으로 검색하여 깔끔한 디렉터리를 만들 수 있는 제목과 특수한 탭이 놓여 있습니다.

프레젠테이션 모드

Fusuma에는 슬라이드를 한 화면에 놓고 다른 화면에서 강연자의 화면을 볼 수 있는 프레젠테이션 모드가 있습니다.스피커 화면에는 다음이 포함됩니다.

강연자는 각 슬라이드에 놓인 내용을 기록한다.

이전 슬라이드와 다음 슬라이드의 미리 보기

타이머.

슬라이드가 몇 장 남았습니까?

만약 당신이 강연을 하고 있다면, 당신이 필요로 하는 모든 도구들
발표자 모드를 활성화하려면 측면 메뉴로 이동하고 화면 아이콘을 클릭합니다.브라우저에서 재생을 허용하면 슬라이드를 재생할 스크린/장치에 대해 묻는 팝업 창이 나타납니다.

프로비저닝

설정은 필요하지 않지만, 수정.fusumarc.yml 파일을 통해 프레젠테이션의 많은 부분을 맞춤형으로 만들 수 있습니다.

meta:
  url:
  title:
  description:
  thumbnail:
  siteName:
  sns:
    - twitter
slide:
  loop: false
  ui:
    sidebar: true
    vertical: false
    pagination:
    effect:
  code:
    languages:
      - javascript
      - html
    plugins: []
    theme: default

meta section은 검색엔진 최적화에 사용되며, 인터넷에서 프레젠테이션 원고를 공유하고 싶다면, 이 필드들은 링크 미리 보기를 맞춤형으로 만드는 데 도움을 줄 것입니다.내용을 지정하지 않고 thumbnail 필드를 입력하면 자동으로 생성됩니다url.

각 슬라이드에 대한 슬라이드 설정

순환이 사실이라면 마지막 슬라이드는 첫 번째 슬라이드를 계속합니다.

사이드바는 옵션과 내용을 통해 사이드 메뉴를 열거나 닫습니다.

페이지 나누기bullets, progressbar 및 fraction 중에서 선택하여 슬라이드 수를 표시할 수 있습니다.

슬라이드를 변경할 때 fade, cube 및 flip 사이에서 애니메이션 효과를 선택할 수 있습니다.

코드 사용Prims.js과 babel-plugin-prismjs 코드 문법을 강조 표시합니다.

여기에서 지정한 언어는 문법이 강조된 언어를 사용하려면 기본적으로 자바스크립트만 사용합니다.

code syntax highlight의 경우 프로젝트를 2.6.0 버전으로 낮추어 정상적으로 작동시켜야 합니다.
이 매개 변수를 변경하려면 프로그램을 다시 시작해야 합니다.

메시지

CSS로 전체 외관을 수정할 수 있지만, 기본적으로Fusuma는 다섯 가지 다른 테마가 있습니다.style.css 파일을 열고 원하는 테마의 css를 가져옵니다.

@import '@fusuma/client/assets/style/themes/babel.css';
@import '@fusuma/client/assets/style/themes/default.css';
@import '@fusuma/client/assets/style/themes/node.css';
@import '@fusuma/client/assets/style/themes/pop.css';
@import '@fusuma/client/assets/style/themes/webpack.css';

다른 테마를 테스트합니다. 미세한 조정이 필요하면 style.css 에 필요한 클래스를 추가하여 테마를 수정하거나 새 테마를 만들 수 있습니다.
새 css 변수를 만들려면 다음 css 변수의 색상을 변경합니다.

:root {
  --color-title: #e53498;
  --color-base: #1c1235;
  --color-background: #e5e5e5;
  --color-link: #6f4dca;
}

반응 성분

React 구성 요소를 .mdx 파일로 가져와 일반 React 항목에서처럼 사용할 수 있습니다.
프로젝트 폴더의 루트 디렉터리에 src 폴더를 만듭니다. 그 중에서 components라는 폴더와 Counter.js라는 파일을 만듭니다.Counter.js에서는 다음 예제 코드를 붙여 넣었습니다.

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div className="react-component">
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me!</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  )
}

export default Counter

.mdx 파일에서 다음을 수행합니다.

import Counter from '../src/components/Counter';

<Counter />

현재 슬라이드에서 직접 작업하는 React 구성 요소가 있는데 코드 블록과 결합하여 사용하면 원본 코드와 구성 요소의 실행 상황을 나타낼 수 있다.

나누어 주다

로컬 호스트에서 프로젝트를 실행하는 것을 제외하고, 어떤 경우 npm run start-prod 스크립트를 사용하면 프로젝트를 효과적으로 실행할 수 있습니다.슬라이드는 두 가지 방법으로 배포할 수 있습니다.

PDF 만들기

호스트 없이 슬라이드를 공유하려면 PDF 형식으로 내보낼 수 있습니다.(반응 모듈을 조심해라. 왜냐하면 작동을 멈추기 때문이다.
PDF로 내보내려면 종속성을 설치합니다.

npm install -D @fusuma/task-pdf

설치 후 npm run export-pdf 스크립트를 실행합니다.
프로젝트의 루트 디렉터리에서 슬라이드를 포함하는 slide.pdf 파일을 얻을 수 있습니다.

배치하다

이 프로젝트를 일반적인 React 프로젝트로 구축할 수 있습니다. 다른 React 프로젝트와 마찬가지로 Vercel 또는 Netlify 등 모든 서비스에 배치할 수 있는 정적 파일을 만들 수 있습니다. git 전송을 실행할 때마다 npm run build 스크립트를 실행할 수 있도록 이 서비스들을 설정하기만 하면 됩니다.
이 옵션은 브라우저에서 슬라이드를 직접 공유하려면 매우 편리합니다.

등대

Fusuma는 성능, 접근성, 모범 사례, SEO에 관심이 있다면, 기본 설정이라도 Google Lighthouse에서 인상적인 결과를 얻을 수 있습니다.
그러나 약간의 차이도 있다.

구성의 SEO 섹션을 작성해야 SEO 섹션에서 100을 달성할 수 있습니다.

일부 테마 (당신의 CSS 수정) 는 접근성 부분의 점수를 낮출 수 있습니다.

리소스

Official GitHub Repo

Official Webpage

가장 중요한 것은 사랑의 창조자hiroppy에게 무섭고 편리한 도구를 보여주는 것이다!