কম্পোনেন্ট আর লেআউট দিয়ে সাইট সাজানো

যেকোনো সাইটে কিছু অংশ সব পেইজে থাকে, আর কিছু অংশ বারবার ব্যবহার হয়। আলোতে প্রথমটির জন্য আছে লেআউট, দ্বিতীয়টির জন্য কম্পোনেন্ট।

লেআউট

pages/layout.alo তার ফোল্ডারের সব পেইজকে মোড়ায়। পেইজের কনটেন্ট বসে <slot />-এর জায়গায়:

<template>
    <Header />
    <main>
        <slot />
    </main>
    <Footer />
</template>

pages/blog/layout.alo রাখলে সেটি প্রযোজ্য হবে শুধু /blog/ আর তার নিচের পেইজগুলোতে, বাইরের লেআউটের ভেতরে।

কম্পোনেন্ট

components/Card.alo ফাইল বানালেই যেকোনো জায়গায় লেখা যায় <Card />। অ্যাট্রিবিউটগুলোই প্রপস, আর কম্পোনেন্টের ভেতরে সেগুলো পড়া হয় props থেকে:

<!-- components/Card.alo -->
<template>
    <article class="card">
        <h3>{{ props.title }}</h3>
        <slot />
    </article>
</template>

ব্যবহারের সময় ট্যাগের ভেতরের লেখা বসে <slot />-এর জায়গায়:

<Card title="দ্রুত">
    <p>বিল্ড হয় এক সেকেন্ডেরও কম সময়ে।</p>
</Card>

কোথায় রাখবেন	যেভাবে লিখবেন
components/Card.alo	<Card />
components/blog/PostCard.alo	<Blog.PostCard />
components/post-list/Item.alo	<PostList.Item />

স্টাইল নিয়ে চিন্তা নেই

কম্পোনেন্টের <style>-এর CSS শুধু সেই কম্পোনেন্টেই প্রযোজ্য হয়। তাই .card নামের ক্লাস দুই জায়গায় দুইভাবে লিখলেও একটি আরেকটিকে প্রভাবিত করে না।