저는   동안   의 팬이었습니다. Reveal.js는 기본 HTML만으로 슬라이드를 (대부분) 쉽게 만들 수 있게 해주는 웹 기반 프레젠테이션 프레임워크입니다. 수년 Reveal.js  저는 Powerpoint를 전혀 신경 쓰지 않고 엄청나게 강력하지만 웹 주제에 대해 발표할 때(보통 99%) Powerpoint에서 "Alt-Tab"을 누르는 경험이 마음에 들지 않습니다. 코드 또는 브라우저 탭에 대한 실행 중인 Powerpoint.  Reveal.js는 이를 방지하는 데 도움이 됩니다.  Reveal(dot jay ess를 입력하는 데 지쳤습니다)을 사용하는 것은 비교적 간단합니다. 스크립트 태그를 추가합니다. CSS용 링크 태그 두 개(핵심 CSS용 하나와 테마용 하나)를 추가한 다음 HTML 작성을 시작합니다.   태그는 각 슬라이드에 사용됩니다. 다음은 해당 문서에서 제공하는 작업이 얼마나 쉬운지에 대한 예입니다. section   <html> <head> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="dist/reveal.js"></script> <script> Reveal.initialize(); </script> </body> </html>  위의 스니펫에서 각 슬라이드를 나타내는 두 개의   태그를 볼 수 있습니다. 꽤 많은 내용이 있으며 더 많은 내용을 보려면   확인하세요. 하지만 오늘은 웹 구성 요소를 사용하여 Reveal 프리젠테이션 생성을 단순화할 수 있는지 궁금했습니다. 내가 생각 해낸 것은 다음과 같습니다. section 데모를  버전 1  먼저 제가 사용하고 싶었던 HTML을 공유하겠습니다. 나는 실제로 이것을 먼저 작성한 다음 웹 구성 요소를 구축하기 시작하여 자체적으로 업데이트되는 것을 볼 수 있었습니다.   <reveal-preso theme="beige"> <section>Slide 1b</section> <section>Slide 2</section> <section>Slide 3</section> <section data-background-color="aquamarine"> <h2>🍦</h2> </section> <section data-background-image="https://placekitten.com/800/800"> <h2>Image</h2> </section> </reveal-preso>  내 HTML은 웹 구성 요소인   사용하고   속성을 지원합니다. 구성 요소 내부에는 슬라이드에 대한   태그 세트가 있습니다. (참고로   하위 태그를 만들 수도 있었는데 다음 게시물에서 그렇게   !) 스크립트나 링크 태그가 전혀 없습니다. reveal-preso theme section reveal-slide 하겠습니다  이제 컴포넌트 정의를 살펴보겠습니다.   class RevealPreso extends HTMLElement { constructor() { super(); } connectedCallback() { this.theme = 'black'; if(this.hasAttribute('theme')) { this.theme = this.getAttribute('theme'); } let currentHTML = this.innerHTML; this.innerHTML = ` <div class="reveal"> <div class="slides"> ${currentHTML} </div> </div> `; // load reveal.js const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.js'; document.head.appendChild(script); const link = document.createElement('link'); link.rel = 'stylesheet'; link.type='text/css'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css'; document.head.appendChild(link); const theme = document.createElement('link'); theme.rel = 'stylesheet'; theme.type='text/css'; theme.href = `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/${this.theme}.min.css`; document.head.appendChild(theme); script.addEventListener('load', () => { Reveal.initialize(); }); } } if(!customElements.get('reveal-preso')) customElements.define('reveal-preso', RevealPreso);  보시다시피 이것은 비교적 간단합니다. 내   Reveal이 예상하는   로 래핑되도록 내부 HTML을 다시 작성합니다. 그런 다음 세 가지 리소스, 즉 JavaScript와 CSS 리소스를 모두 동적으로 로드합니다. connectedCallback divs  로드되면 프레젠테이션을 초기화할 수 있도록 스크립트에 이벤트 리스너가 있습니다.  내가 본 바로는(Google 검색 및 Stack Overflow를 통해) CSS 스크립트에 대한   없습니다. 몇 가지 제안된 해결 방법을 보았지만 간단하게 유지하고 JavaScript 리소스만 걱정하기로 결정했습니다. 문제가 될 수 있다는 점을 인정합니다. onload  또 다른 문제 - 내 코드는 테마 인수를 한 번만 확인합니다. 나중에 JavaScript를 통해 변경하면 해당 내용이 적용되지 않습니다.  (여기서 모범 사례를 제안할 만큼 대담하다면 속성 변경을 인식하거나 작동하지 않을 사항을 명확하게 문서화하는 코드를   갖고 있다고 제안할 것입니다.) 다음은 그 모습입니다. 항상   https://codepen.io/cfjedimaster/pen/MWPJgMJ?embedable=true  개인적으로 이거 꽤 괜찮은 것 같아요! 그러나   웹 보기가 필요하다는 점에 유의하세요. 이것이 Reveal의 기본값이고 아마도 대부분의 사람들이 이를 어떻게 사용할지 모르지만 다른 웹 컨텐츠와 함께 Reveal을   것이 가능한지 정말로 알고 싶었습니다. 내가 한 방법은 다음과 같습니다. 전체 포함시키는  버전 2  먼저 문서를 확인했습니다. 저는 Reveal을 전체 웹 보기 프레젠테이션으로만 사용한 적이 있었고 프레임워크 자체가 이를 지원하는지 몰랐습니다. 확실히   모드가 있는 것으로 나타났습니다.   프레젠테이션도 지원됩니다. 임베디드 여러 개의 포함된  이를 위해서는 두 가지가 필요합니다. Reveal 개체를 초기화하는 방법과 프레젠테이션을 보관하는 컨테이너의 특정 크기를 제공하는 방법을 약간 변경하는 것입니다.  나는 HTML을 약간 수정하는 것부터 시작했습니다.   <h2>Preso</h2> <p> Here is my preso. It brings all the boys to the yard. </p> <reveal-preso height="700px" theme="dracula"> <section>Slide 1b</section> <section> <h2>Plan</h2> <ul> <li class="fragment">Phase One - Collect Underpants</li> <li class="fragment">Phase Two - ?</li> <li class="fragment">Phase Three - Profit</li> </ul> </section> <section>Slide 3</section> <section data-background-color="aquamarine"> <h2>🍦</h2> </section> <section data-background-image="https://placekitten.com/800/800"> <h2>Image</h2> </section> </reveal-preso> <footer> End of page. </footer>  상단과 하단에 몇 가지 기본적인 내용이 있고   태그에   추가했습니다. 내 구성 요소는   와   모두 지원하지만 기본값은 둘 다입니다. 이제 업데이트된 구성요소를 살펴보겠습니다. reveal-preso height height width   class RevealPreso extends HTMLElement { constructor() { super(); } connectedCallback() { console.log('connected callback called'); // defaults this.width = '100%'; this.height = '500px'; this.theme = 'black'; if(this.hasAttribute('width')) { this.width = this.getAttribute('width'); } if(this.hasAttribute('height')) { this.height = this.getAttribute('height'); } if(this.hasAttribute('theme')) { this.theme = this.getAttribute('theme'); } let currentHTML = this.innerHTML; this.innerHTML = ` <div class="reveal" style="width: ${this.width}; height: ${this.height}"> <div class="slides"> ${currentHTML} </div> </div> `; // load reveal.js const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.js'; document.head.appendChild(script); const link = document.createElement('link'); link.rel = 'stylesheet'; link.type='text/css'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css'; document.head.appendChild(link); const theme = document.createElement('link'); theme.rel = 'stylesheet'; theme.type='text/css'; theme.href = `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/${this.theme}.min.css`; document.head.appendChild(theme); script.addEventListener('load', () => { Reveal(this.querySelector( '.reveal' ), { embedded: true, keyboardCondition: 'focused' // only react to keys when focused }).initialize(); }); } } if(!customElements.get('reveal-preso')) customElements.define('reveal-preso', RevealPreso);  이제   와   찾고 기본값을 모두 찾도록 코드를 업데이트했습니다. 내부 HTML 콘텐츠를 다시 작성할 때 해당 값을 포함합니다. 마지막으로 프레젠테이션 초기화 방법을 변경했습니다. 여기에서 실제로 이를 확인할 수 있습니다. height width   https://codepen.io/cfjedimaster/pen/GRYrRmK?embedable=true  여기에는 아직 수정하고 싶은 사항이 있습니다. 높이와 너비 변경에 대한 지원을 확실히 추가하겠습니다. Reveal 자체는 크기 변경 인식도 지원합니다.  한 가지 참고 사항 - 페이지에서 2개의 프레젠테이션을 사용하여 빠른 테스트를 수행했고 제대로 작동했지만 Reveal에서는 CSS 테마가 하나만 필요하므로 해결 방법이 없다고 생각하는 테마 하나만 표시했습니다.  가능할 수도 있지만 확실하지 않습니다.  다음 버전?  앞서 말했듯이, 나는 이것에 대해 한 번 더 반복하고 싶습니다. 하위 태그,   (또는 더 짧은 태그)를 만들고 다른 JavaScript 리소스에서 태그를 가져오고 싶습니다. reveal-slide  또한 높이와 너비를 동적으로 변경하는 기능도 지원하고 싶습니다. 내일이나 이번 달 말에 이 작업을 수행하겠습니다. 언제나처럼, 여러분의 생각을 알려주세요!

My Blog

Buy Me a Coffee

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

Reveal.js용 웹 구성 요소를 만드는 방법

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

Crypto Growth: 효과적인 사용자 페르소나 만들기

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

Crypto Growth: 효과적인 사용자 페르소나 만들기

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps