   hayranıyım. Reveal.js, yalnızca temel HTML ile slaytlar oluşturmayı (çoğunlukla) kolaylaştıran web tabanlı bir sunum çerçevesidir. Yıllardır Reveal.js'nin  Powerpoint'i hiç umursamıyorum ve inanılmaz derecede güçlü, ancak web konularında sunum yaparken (ki bu genellikle zamanın %99'udur), "alt sekme" deneyiminden hoşlanmıyorum. Kodlamak veya tarayıcı sekmelerini çalıştırmak için çalışan bir Powerpoint.  Reveal.js bundan kaçınmama yardımcı oluyor.  Reveal'ı kullanmak (nokta jay ess yazmaktan yoruldum) nispeten basittir. Bir komut dosyası etiketi eklersiniz. CSS için iki bağlantı etiketi eklersiniz (biri temel CSS için, diğeri tema için) ve ardından HTML yazmaya başlarsınız.   etiketi her slayt için kullanılır. İşte dokümanlarından bunun ne kadar kolay olduğuna dair bir örnek: 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>  Yukarıdaki kod parçasında her slaydı temsil eden iki   etiketini görebilirsiniz. Oldukça fazla şey var ve daha fazlasını görmek istiyorsanız   göz atın, ancak bugün için Reveal sunumlarının oluşturulmasını web bileşenleriyle basitleştirip basitleştiremeyeceğimi merak ediyordum. İşte aklıma gelen şey bu. section demolarına  Birinci Versiyon  Öncelikle kullanmak istediğim HTML'yi paylaşacağım. Aslında önce bunu yazdım ve ardından web bileşenini oluşturmaya başladım, böylece kendisinin güncellendiğini görebildim.   <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'im, web bileşenini (   kullanıyor ve bir   özelliğini destekliyor. Bileşenin içinde slaytlar için bir dizi   etiketi bulunur. (Bilginize göre,   bir alt etiket de oluşturabilirdim ve bunu bir sonraki yazımda   !) Hiç bir komut dosyası veya bağlantı etiketim yok. reveal-preso theme section reveal-slide yapacağım  Şimdi bileşen tanımına bakalım.   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);  Gördüğünüz gibi bu nispeten basit.   , iç HTML'yi, Reveal'ın beklediği   sarılacak şekilde yeniden yazar. Daha sonra üç kaynağın tamamını (JavaScript'im ve her iki CSS kaynağım) dinamik olarak yüklüyorum. connectedCallback divs  Senaryoda, yüklendiğinde sunumu başlatabileceğim bir olay dinleyicisi var.  Görebildiğim kadarıyla (Google'da Arama ve Yığın Taşması aracılığıyla), CSS komut dosyaları için   yok. Önerilen birkaç geçici çözüm gördüm, ancak konuyu basit tutmaya ve yalnızca JavaScript kaynağı konusunda endişelenmeye karar verdim. Bunun sorunlu olabileceğini kabul ediyorum. onload  Bir sorun daha - kodum tema argümanını yalnızca bir kez kontrol ediyor. Daha sonra JavaScript aracılığıyla değiştirecek olsaydınız, bunu algılamazdı.  (Burada en iyi uygulamayı önerecek kadar cesur olabilirsem, muhtemelen   niteliklerde yapılan değişiklikleri tanıyacak veya neyin işe yaramayacağını açıkça belgeleyecek bir koda sahip olmanızı öneririm.) Şöyle görünüyor: her zaman   https://codepen.io/cfjedimaster/pen/MWPJgMJ?embedable=true  Kişisel olarak bunun oldukça hoş olduğunu düşünüyorum! Ancak web görünümünün   beklediğini unutmayın. Reveal'in varsayılan ayarı budur ve muhtemelen çoğu kişi bunu kullanır, ancak Reveal'i diğer web içerikleriyle birlikte   mümkün olup olmadığını gerçekten görmek istedim. İşte bunu nasıl yaptım. tamamını yerleştirmenin  Versiyon İki  İlk önce dokümanları kontrol ettim. Reveal'i yalnızca tam web görünümü sunumu olarak kullanmıştım ve çerçevenin kendisinin bunu destekleyip desteklemediğini bilmiyordum. Görünüşe göre kesinlikle   bir modu var. Ayrıca   sunum desteği de mevcuttur. gömülü birden fazla gömülü  Bunun için iki şey gerekir: Reveal nesnesini başlatma şeklinizde küçük bir değişiklik ve sunumunuzu barındıran kabın belirli boyutlarının sağlanması.  HTML'mi biraz değiştirerek başladım:   <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>  Üstte ve altta bazı temel saçmalıklar var ve   etiketine bir   ekledim. Bileşenim hem   hem de   destekleyecek, ancak her ikisini de varsayılan olarak ayarlayacak. Şimdi güncellenen bileşene bakalım: 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);  Kodu şimdi   ve   arayacak ve her ikisini de varsayılan olarak ayarlayacak şekilde güncelledim. İç HTML içeriğini yeniden yazdığımda bu değerleri dahil ediyorum. Son olarak sunumu nasıl başlatacağımı değiştirdim. Bunu burada çalışırken görebilirsiniz: height width   https://codepen.io/cfjedimaster/pen/GRYrRmK?embedable=true  Burada hâlâ düzeltmem gereken şeyler var. Yüksekliği ve genişliği değiştirmek için kesinlikle destek eklerdim. Reveal'in kendisi de boyutundaki değişiklikleri tanımayı destekler.  Bir not - Sayfada 2 sunumla hızlı bir test yaptım ve işe yaradı, ancak Reveal yalnızca bir tema CSS'si beklediğinden geçici bir çözüm olmadığına inandığım yalnızca bir tema gösteriyor.  Mümkün olabilir ama emin değilim.  Sonraki Sürüm?  Daha önce de söylediğim gibi bu konuyu bir kez daha tekrarlamak istiyorum. Bir alt etiket oluşturmak,   (veya belki daha kısa bir şey) oluşturmak ve etiketi başka bir JavaScript kaynağından içe aktarmayı denemek istiyorum. reveal-slide  Ayrıca yüksekliği ve genişliği dinamik olarak değiştirmeyi desteklemek istiyorum. Yarın veya bu ayın sonlarında bunun üzerinde çalışacağım. Her zaman olduğu gibi ne düşündüğünüzü bana bildirin!

My Blog

Buy Me a Coffee

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

Reveal.js için Web Bileşeni Nasıl Oluşturulur

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps