আমি   বছর ধরে   এর ভক্ত। Reveal.js হল একটি ওয়েব-ভিত্তিক প্রেজেন্টেশন ফ্রেমওয়ার্ক যা শুধুমাত্র মৌলিক HTML দিয়ে স্লাইড তৈরি করাকে (বেশিরভাগ) সহজ করে তোলে। অনেক Reveal.js  পাওয়ারপয়েন্ট নিয়ে আমি মোটেও আপত্তি করি না, এবং এটি অবিশ্বাস্যভাবে শক্তিশালী, কিন্তু যখন আমি ওয়েব বিষয়গুলিতে উপস্থাপনা করি (যা সাধারণত, 99% সময় হয়), আমি এখান থেকে "alt-ট্যাবিং" এর অভিজ্ঞতা পছন্দ করি না কোড বা ব্রাউজার ট্যাবে একটি চলমান পাওয়ারপয়েন্ট।  Reveal.js আমাকে যে এড়াতে সাহায্য করে.  রিভিল ব্যবহার করা (আমি ডট জে এসএস টাইপ করতে ক্লান্ত হয়ে পড়েছি) তুলনামূলকভাবে সহজ। আপনি একটি স্ক্রিপ্ট ট্যাগ যোগ করুন. আপনি 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>  উপরের স্নিপেটে, আপনি প্রতিটি স্লাইডের প্রতিনিধিত্বকারী দুটি   ট্যাগ দেখতে পারেন। এটিতে বেশ কিছুটা আছে, এবং আপনি যদি আরও দেখতে চান, তাদের   দেখুন, কিন্তু আজকের জন্য, আমি ওয়েব উপাদানগুলির সাথে প্রকাশ উপস্থাপনা তৈরিকে সহজ করতে পারি কিনা তা জানতে আগ্রহী ছিলাম৷ এখানে আমি কি সঙ্গে এসেছি. section ডেমো  সংস্করণ এক  প্রথমে, আমি যে 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 ওয়েব কম্পোনেন্ট ব্যবহার করে,   , এবং একটি   অ্যাট্রিবিউট সমর্থন করে। কম্পোনেন্টের ভিতরে স্লাইডগুলির জন্য   ট্যাগের একটি সেট রয়েছে। (একটি FYI হিসাবে, আমি একটি   চাইল্ড ট্যাগও তৈরি করতে পারতাম, এবং আমি আমার পরবর্তী পোস্টে এটি   !) আমার কাছে কোনও স্ক্রিপ্ট বা লিঙ্ক ট্যাগ নেই৷ 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);  আপনি দেখতে পাচ্ছেন, এটি তুলনামূলকভাবে সহজ। আমার   অভ্যন্তরীণ এইচটিএমএলকে এমনভাবে পুনর্লিখন করে যাতে এটি   সাথে মোড়ানো থাকে যা রিভিল আশা করে। আমি তখন গতিশীলভাবে তিনটি সংস্থানই লোড করি - আমার জাভাস্ক্রিপ্ট এবং উভয় সিএসএস সংস্থান। connectedCallback divs  আমি স্ক্রিপ্টে একটি ইভেন্ট শ্রোতা পেয়েছি যাতে এটি লোড হয়ে গেলে, আমি উপস্থাপনা শুরু করতে পারি।  আমি যা দেখতে পাচ্ছি তা থেকে (গুগলিং এবং স্ট্যাক ওভারফ্লো এর মাধ্যমে), CSS স্ক্রিপ্টগুলির জন্য কোনও   নেই। আমি কয়েকটি প্রস্তাবিত সমাধান দেখেছি, কিন্তু আমি এটি সহজ রাখার সিদ্ধান্ত নিয়েছি এবং জাভাস্ক্রিপ্ট সংস্থান সম্পর্কে চিন্তা করেছি। আমি স্বীকার করি যে সমস্যাযুক্ত হতে পারে। onload  আরও একটি সমস্যা - আমার কোড শুধুমাত্র একবার থিম যুক্তির জন্য পরীক্ষা করে। আপনি যদি পরবর্তীতে জাভাস্ক্রিপ্টের মাধ্যমে এটি পরিবর্তন করতে চান তবে এটি তা গ্রহণ করবে না।  (যদি আমি এখানে একটি সর্বোত্তম অনুশীলনের পরামর্শ দেওয়ার মতো সাহসী হতে পারি, তবে আমি সম্ভবত পরামর্শ দেব যে আপনার কাছে   বৈশিষ্ট্যের পরিবর্তনগুলি সনাক্ত করার জন্য কোড থাকতে হবে বা যা কাজ করছে না তা স্পষ্টভাবে নথিভুক্ত করুন।) এটি দেখতে কেমন: সর্বদা   https://codepen.io/cfjedimaster/pen/MWPJgMJ?embedable=true  ব্যক্তিগতভাবে, আমি মনে করি এটি বেশ সুন্দর! কিন্তু লক্ষ্য করুন যে এটি   ওয়েব ভিউ আশা করে। এটি প্রকাশের জন্য ডিফল্ট এবং সম্ভবত বেশিরভাগ লোকেরা কীভাবে এটি ব্যবহার করবে, তবে আমি সত্যিই দেখতে চেয়েছিলাম যে অন্যান্য ওয়েব সামগ্রীর সাথে প্রকাশ   সম্ভব কিনা। এখানে আমি যে কিভাবে. সম্পূর্ণ এম্বেড করা  সংস্করণ দুই  প্রথম, আমি ডক্স চেক. আমি শুধুমাত্র একটি সম্পূর্ণ ওয়েব ভিউ উপস্থাপনা হিসাবে প্রকাশ ব্যবহার করেছি, এবং ফ্রেমওয়ার্ক নিজেই এটি সমর্থন করে কিনা তা আমি জানতাম না। সক্রিয় আউট, এটি একেবারে একটি   মোড আছে.   উপস্থাপনাগুলির জন্যও সমর্থন রয়েছে৷ এমবেডেড একাধিক এমবেডেড  এটির জন্য দুটি জিনিসের প্রয়োজন - আপনি কীভাবে রিভিল অবজেক্টটি শুরু করবেন এবং আপনার উপস্থাপনা ধারণকারী ধারকটির নির্দিষ্ট মাত্রা সরবরাহ করবেন তার সামান্য পরিবর্তন।  আমি আমার 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  আমি এখানে খামচি চাই জিনিস এখনও আছে. আমি অবশ্যই উচ্চতা এবং প্রস্থ পরিবর্তনের জন্য সমর্থন যোগ করব। রিভিল নিজেই এর আকারের পরিবর্তনগুলিকে স্বীকৃতি দিতে সমর্থন করে।  একটি নোট - আমি পৃষ্ঠায় 2টি উপস্থাপনা সহ একটি দ্রুত পরীক্ষা করেছি, এবং এটি কাজ করেছে, কিন্তু এটি শুধুমাত্র একটি থিম দেখায় যা আমি বিশ্বাস করি যে কোনও সমাধান নেই কারণ প্রকাশ শুধুমাত্র একটি থিম CSS আশা করে৷  এটা সম্ভব হতে পারে, কিন্তু আমি নিশ্চিত নই।  পরবর্তী সংস্করণ?  আমি আগেই বলেছি, আমি এই বিষয়ে আরও একবার পুনরাবৃত্তি করতে চাই। আমি একটি চাইল্ড ট্যাগ তৈরি করতে চাই,   (বা সম্ভবত ছোট কিছু) এবং অন্য জাভাস্ক্রিপ্ট রিসোর্স থেকে ট্যাগ আমদানি করতে চাই। reveal-slide  আমি গতিশীলভাবে উচ্চতা এবং প্রস্থ পরিবর্তন সমর্থন করতে চাই। আমি আগামীকাল বা এই মাসের শেষের দিকে এটি নিয়ে কাজ করব। সর্বদা হিসাবে, আপনি কি আমাকে কী মনে করেন!

My Blog

Buy Me a Coffee

Read My Stories

গল্পের মূল ভাষায় এই অডিও তৈরি!

Reveal.js এর জন্য কিভাবে একটি ওয়েব কম্পোনেন্ট তৈরি করবেন

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

ক্লাউড সনেট 3.5 সিস্টেম প্রম্পট লিক: একটি ফরেনসিক বিশ্লেষণ

টেলিগ্রাম: ক্রিপ্টো দ্বীপের মূল ভূখণ্ডের সেতু

এআই/এমএল ডাটালেকের জন্য রেফারেন্স আর্কিটেকচার তৈরির জন্য একজন স্থপতির গাইড

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

ক্লাউড সনেট 3.5 সিস্টেম প্রম্পট লিক: একটি ফরেনসিক বিশ্লেষণ

টেলিগ্রাম: ক্রিপ্টো দ্বীপের মূল ভূখণ্ডের সেতু

এআই/এমএল ডাটালেকের জন্য রেফারেন্স আর্কিটেকচার তৈরির জন্য একজন স্থপতির গাইড

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps