Hackable 슬라이드 제작 도구 Slidev
이번에는 그 슬라이드의 보도판이다.
슬라이드에도 쓰이지 않는 경우가 있기 때문에 이쪽 기사가 더 이해하기 쉽다고 생각합니다.
아카이빙
발표된 슬라이드의 호스팅
GitHub
슬라이드가 뭐예요?
Procentation Slides for Developers에서 말한 것처럼 개발자를 위한 슬라이드 제작 도구입니다.
공식 사이트의 도메인 이름 사용 방법은 표범 무늬다.
다음 기능으로 구성되어 있습니다.
Slidev is still under heavy development. API and usages are not set in stone yet.
추천 요점
이번에 그 해커블 부분도 맞춤 제작이 잘 됐어요.
설명한 바와 같이 이 도구는 Vue를 처리할 수 있으며, 이 글에는 Vue 구성 요소의 코드도 있습니다.
하지만 저의 Vue 경력이 2주도 안 됐는데 스팸코드일 수도 있으니 따뜻한 눈으로 봐주셨으면 좋겠습니다.
시작 방법
With NPM:
$ npm init slidev
With Yarn:
$ yarn create slidev
이 명령을 입력하면 프로젝트 폴더 이름과 npm 패키지의 설치 방법을 물어보면 다음 프로젝트 폴더를 만들 것입니다.
components/ => このフォルダ内のVueファイルがコンポーネントとして扱える
.gitignore
.npmrc
.netlify.toml => Netlifyホスティング用
package.json
README.md
slides.md => このファイルが単一のエントリーポイントとなり、プロジェクト内で一つのスライドを生成する
vercel.json => Vercelホスティング用
yarn.lock
표기 방법
세 개의 하이픈으로 구분된 부분을 슬라이드로 처리하다.
# Slidev
Hello, World!
---
# Page 2
Directly use code blocks for highlighting
このコードブロックを閉じてしまうので書けませんでしたが、
バッククオート3つで囲えばハイライトされたコードブロックを作ることができます。
---
# Page 3
You can directly use Windi CSS and Vue components to style and enrich your slides.
VueコンポーネントとWindi CSSを直接扱い、スライドをスタイル・エンリッチすることが出来ます。
<div class="p-3">
<Tweet id="20" />
</div>
디렉토리 구조
기본 프로젝트의 파일 이외에 생성을 통해 사용자 정의할 수 있는 파일도 있습니다.
your-slidev/
├── components/ # カスタムコンポーネント
├── layouts/ # カスタムレイアウト
├── public/ # 静的アセット
├── setup/ # カスタム setup / hooks
├── styles/ # カスタム style
├── index.html # index.htmlへ注入する
├── slides.md # エントリーポイント
└── vite.config.ts # vite config
Vue의 구성 요소를 설정하여 slides를 구현합니다.MD에서 사용할 수 있습니다.
layouts
slides.md 파일에서layout:image-right 등 레이아웃을 변경할 수 있습니다.이 설정을 덮어쓰거나 새로 만들 수 있습니다.
public
정적 자산을 두는 곳입니다.그림과 단독 js 파일 등.
styles
글로벌 CSS 파일을 배치할 수 있습니다.
// styles/index.ts
import './base.css'
import './code.css'
import './layouts.css'
index.""로 병합할 수 있는 기술입니다.
<!-- ./index.html -->
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
<script src="./your-scripts"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png">
<!-- injected head -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="module" src="__ENTRY__"></script>
<!-- injected body -->
<script src="./your-scripts"></script>
</body>
</html>
global-top.vue | global-bottom.vue 파일을 만든 후 슬라이드에서 공통적으로 사용할 수 있는 구성 요소로 사용할 수 있습니다.글꼴 처리
일본어로 슬라이드를 만들려면 먼저 일본어 글씨체를 쓰려고 하죠.
fonts를 슬라이드로 설정합니다.md에 있는 설정 블록에 쓰면 적용됩니다.
fonts:
# basically the text
sans: 'Robot'
# use with `font-serif` css class from windicss
serif: 'Robot Slab'
# for code blocks, inline code, etc.
mono: 'Fira Code
sans: 'Noto Sans JP'하기만 하면 됩니다!Fonts will be imported automatically from Google Fonts. That means you can use any fonts available on Google Fonts directly.
현재 웹 글꼴 자동 가져오기는 Google 글꼴만 지원합니다.
처리 변수
$slidev.nav.currentPage(현재 페이지 번호) 등 준비된 변수가 몇 개인데 GiitHub의 소스 코드를 보면 아래에 소개한 것보다 더 많아요.
이 근처에 여러 가지가 있어요.
다만, 독자적인 변수를 사용하는 방법으로 문서에서'variable'로 검색한 적이 없는 것 같은데?
(재사용된 문자를 변수 등에 넣기...)
CSS에서 변수를 사용하려는 경우style.css 또는styles/xx.css(전역 CSS 파일)를 만들면 CSS 사용자 정의 속성이 괜찮은 것 같습니다.
// style.css
:root {
--main-color: #FB98B7;
--main-color-sheer: #FFC0D1;
--main-color-vivit: #FF48A5;
--main-color-red: #FF005F;
--main-color-blue: #4DCCD2;
--main-color-black: #333;
}
애니메이션 작업
슬라이드에는 @vueuse/motionhttps://motion.vueuse.org/이 내장되어 있습니다.
슬라이드가 도착하는 순간 애니메이션을 사용할 수 있습니다.
↓ 공통화를 원하기 때문에 구성화의 예입니다.구성 요소를 나누지 않고 바로 슬라이드입니다.MD를 사용할 수 있을 것 같습니다.
<template>
<div
v-if="isShow" // $slidev.nav.currentPage === スライドのindex
v-motion
:initial="{
y: 50,
}"
:enter="{
y: 0,
}">
<slot />
</div>
</template>
// slides.md
<Fadein :currentPage="$slidev.nav.currentPage" :index="10"> // ここに適した変数を探したのですがタイムアップしました…
マークダウンなどを書く
</Fadein>
이번 스페셜 맞춤 제작.
카메라 CSS 조정
카메라의 비디오 라벨의 CSS를 구하려고 했지만 카메라 근처의 DOM이 이렇게 됐어요.
<!--v-if-->
<div id="slidev-goto-dialog" class="fixed right-5 bg-main transform transition-all -top-20" shadow="~" p="x-4 y-2" border="~ transparent rounded dark:gray-400 dark:opacity-25" data-v-7df26b02="">
<input type="number" disabled="" class="outline-none bg-transparent" placeholder="Goto..." data-v-7df26b02="">
</div>
<div class="fixed z-10" style="left: 838.861px; top: 432.301px;">
<div class="rounded-full shadow bg-gray-400 bg-opacity-10 overflow-hidden object-cover" style="width: 177px; height: 177px;">
<video autoplay="" class="object-cover min-w-full min-h-full rounded-full" style="transform: rotateY(180deg);"></video>
</div>
<div class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700" style="width: 14px; height: 14px; top: 144.087px; left: 144.087px; cursor: nwse-resize;">
</div>
</div>
<!--v-if-->
하지만 이전에 슬라이드v-goto-dialog가 있었기 때문에 옆에 있는 선택기도 가능합니다.
// style.css等
#slidev-goto-dialog + div > div {
なにかする
}
이 장식은 ICS의 보도를 참고했다.
(사실 제 카메라를 보여드리고 싶은데 술자리라면 카메라를 못 쓸 것 같은데요?)
카메라의 영상은 정사각형일 수도 있고 사각형일 수도 있다.
그러나 이런 도구는 슬라이드 출력과 무관한 DOM을 바꾸기 때문에 버전을 업그레이드할 때 무효일 수도 있고 추천하는 맞춤형 제작이 아니라고 생각합니다.
자체 진행률 막대 만들기
슬라이드 아래 페이지의 현재 위치를 나타내는 바입니다.😁
global-bottom.vue 노선에서 만들면 슬라이드 일반 구성 요소를 배치할 수 있습니다.변수를 저쪽에 건네주고 컴퓨터로 계산해라.// global-bottom.vue
<template>
<Progress
v-if="$slidev.nav.currentPage !== 1 && $slidev.nav.currentLayout!== 'end'"
:current="$slidev.nav.currentPage"
:total="$slidev.nav.total" />
</template>
// components/Progress.vue
<template>
<div class="absolute z-50 bottom-5 left-0 right-0 flex justify-center">
<div class="w-50 relative h-1 bg-green-500/50 rounded-full overflow-hidden">
<span class="absolute h-full bg-gray-500 transition-all duration-300" :style="style"></span>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "Progress",
// propsを受け取る
computed: {
style() {
return {
width: `${100 / (this.total - 1)}%`,
left: `${100 / (this.total - 1) * (this.current - 2)}%`,
}
}
}
};
end 변경
마지막 슬라이드는 슬라이드입니다.MD로 관리할 수 없습니다...🤔저절로 따라가다.
기본 end는 무미건조합니다!
사실 레이아웃에 end가 있어요.
layouts 폴더에서 같은 이름의 구성 요소를 만들면 덮어쓸 수 있기 때문입니다. layouts/end.vue로 덮어쓸 수 있습니다.
<template>
<div class="slidev-layout default">
// なにかする
</div>
</template>
If the layout you provide has the same name as a built-in layout or a theme layout, your custom layout will take precedence over the built-in/theme layout. The priority order is local > theme > built-in.
바로 낙찰된 부산물이기 때문이다!
이 기사를 쓰고 보니 슬라이드 슬라이드가 하표됐기 때문에 젠 등 기사 투고에 대한 복제 작업도 순조롭게 진행되고 있다!!!👌
솔직히 이게 최강의 추천점일 수도 있어요.
총결산
"Hackable"이라는 이름에 부끄럽지 않은 개발자에게 슬라이드는 가려운 곳으로 손을 뻗을 수 있다
아주 좋은 슬라이드 제작 도구!
베타 버전이라 앞으로도 기대돼요!
Reference
이 문제에 관하여(Hackable 슬라이드 제작 도구 Slidev), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/hiroko_ino/articles/hackable-slidev-play-lt텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
