آموزش ویدیویی ناکست جی اس
این مقاله با یک ویدیوی آموزشی نیز همراه است که علاقه مندان میتوانند برای درک بهتر مطالب به مشاهده آن بپردازند. این ویدیوی آموزش ناکست جی اس در خصوص نمایش صفحات وب سایت در ادامه آورده میشود.
روش اول نمایش صفحات وب سایت (app.vue)
در روش نخست به توضیح همان راهکار پیشفرض میپردازیم. همانطور که در مقاله «پوشه فایل ها در ناکست جی اس» نیز مشاهده کردید، فایل app.vue که در پوشه اصلی نرمافزار شما قرار دارد، به صورت پیشفرض به نمایش اطلاعات صفحه اصلی سایت شما میپردازد. هر آنچه شما در این فایل کدنویسی کنید، اعم از تگ های HTML و …، مستقیماً در صفحه اصلی سایت شما نمایش داده میشوند.
<template>
<div>
<!-- this is the code used in app.vue file to show main page -->
<h1>this is the home page. our website has only one page</h1>
</div>
</template>
تصویر صفحه اصلی سایت را در این حالت، در ادامه مشاهده میکنید:
همانطور که در این تصویر مشخص است، هر آدرس دیگری هم در ادامه URL تایپ شود، در هر صورت فقط محتویات همین صفحه نمایش داده میشود. این حالت نمایش صفحات وب سایت برای سایتهای تکصفحهای مناسب است.
روش دوم: استفاده از پوشه pages
همانطور که میدانید ساختار فریم ورک ناکست جی اس به نام گذاری برخی فایلها و پوشهها حساس است. لذا دقت کنید که برای بهکارگیری این روش نمایش صفحات وب سایت، ابتدا پوشهای به نام pages در داخل پوشه اصلی نرم افزار خود ایجاد کنید.
سپس میتوانید صفحات سایت را در قالب فایلهایی با پسوند vue در داخل این پوشه ایجاد کنید. مثلاً اگر میخواهید مسئولیت نمایش صفحه اصلی سایت را به فایلی بدهید، باید آن را index.vue نامگذاری کنید. به همین ترتیب هر فایل دیگری (با نامهای دلخواه) میتوانید در این پوشه بسازید که هر کدام مسئول نمایش یکی از صفحات سایت شما خواهند بود. ما دو فایل دیگر به نامهای contact.vue و about.vue نیز ایجاد کردهایم. کد مربوط به هر کدام از این سه فایل تقریباً مشابه است. در زیر کد قرار داده شده در فایل index.vue را مشاهده میکنید:
<template>
<div>
<!-- This is home page -->
<h1>Home page</h1>
</div>
</template>
کامپوننت در ناکست جی اس
ما در این مقاله قصد نداریم به صورت دقیق و جزئی به مبحث components در ناکست جی اس بپردازیم. اما آن قدری که برای درک مفاهیم این مقاله ضروری است، این است که کامپوننتها در واقع کدهایی هستند که شما میتوانید آنها را بارها در قسمتها و صفحات مختلف وبسایت خود استفاده کنید. یعنی شما یک بار کد آنها را مینویسید و سپس هر چندبار که نیاز داشته باشید از آنها سود میبرید. مثلاً با ایجاد یک کامپوننت که کدنویسی دکمههای1buttons سایت در آن انجام شده، شما میتوانید در صفحات مختلف سایت همان کامپوننت را وارد کنید و دکمه مربوطه برای شما به نمایش در میآید.
خود فریمورک nuxt.js نیز کامپوننتهایی را به صورت پیشفرض در ساختار خود دارد. یکی از این کامپوننتها NuxtPage نام دارد. این کامپوننت در روشهای دوم و سوم نمایش صفحات وب سایت به کار شما میآید. با قرار دادن آن در فایل app.vue به شکل زیر، شما به ناکستجیاس میفهمانید که محتویات فایلهای صفحات سایت را که در پوشه pages کدنویسی شدهاند، لحاظ کرده و نمایش دهد:
<template>
<div>
<app-header></app-header>
<NuxtPage /> <!-- this component is used to render our pages -->
</div>
</template>
در کد فوق از کامپوننت دیگری به نام app-header نیز استفاده شده است. کد مربوط به این کامپوننت که در پوشه components در ساختار نرم افزار قرار گرفته (خودتان باید آن را ایجاد کنید)، به شکل زیر است. این کامپوننت دیگر از کامپوننتهای خود فریم ورک نیست بلکه توسط خود ما کدنویسی شده است:
<template>
<header id="myHeader">
<nav>
<ul>
<li><NuxtLink to="/">home</NuxtLink></li>
<li><NuxtLink to="/about">about</NuxtLink></li>
<li><NuxtLink to="/contact">contact</NuxtLink></li>
</ul>
</nav>
</header>
</template>
<style>
#myHeader {
background-color: #2c3e50;
color: white;
min-height: 200px;
}
#myHeader nav ul {
padding-top: 70px;
display: flex;
justify-content: space-around;
align-items: center;
}
#myHeader nav li {
list-style: none;
}
#myHeader nav li a {
color: white;
transition: all 0.3s;
font-size: 33px;
}
#myHeader nav li a:hover {
color: #F1F299;
}
</style>
نمایش صفحات وب سایت
به این ترتیب با توجه به کدهایی که در پوشههای components و pages در ساختار وبسایت یا نرمافزار خود ایجاد کردهایم و با توجه به تغییراتی که در فایل app.vue دادهایم، نمایش صفحات سایت ما به شکل زیر خواهد بود:
همانطور که ملاحظه میکنید، دیگر نیازی به وارد کردن کدهای بیشتر در فایل app.vue ندارید. بلکه اگر میخواهید محتویات هر یک از صفحات را کاملتر کنید، کافی است به فایل مربوط به آن صفحه در پوشه pages مراجعه کنید.
روش سوم نمایش صفحات: layouts
گاهی اوقات در ساخت وبسایتها نیاز پیدا میکنید که لی اوت و صفحهبندی سایت خود را در برخی قسمت ها و صفحات به کلی تغییر دهید. ما در مورد مفهوم لی اوت در طراحی وب قبلاً صحبت کردهایم. ناکست جی اس نیز برای این موضوع راه حلی دارد. شما با ایجاد یک پوشه به نام layouts در داخل پوشه اصلی نرمافزار خود میتوانید لیاوتهای خود را به nuxt.js معرفی کنید. فایل اولی که در این پوشه ایجاد میکنید باید default.vue نام گذاری شود. این لیاوت پیش فرض سایت شما خواهد بود که در تمامی صفحات به کار میرود.
<template>
<div>
<AppHeader />
<slot />
</div>
</template>
اما نامگذاری برای سایر لیاوتها دلخواه است و به هر تعداد لیاوت که نیاز داشته باشید، میتوانید در این پوشه ایجاد کنید. ما در یک فایل به نام SideBar.vue لیاوت دیگری هم ایجاد کردهایم.
<template>
<div id="sideLay">
<AppHeader />
<slot />
</div>
</template>
<style scoped>
#sideLay {
background-color: #334;
min-height: 100vh;
}
#sideLay >>> h1 {
color: white;
}
</style>
البته در این مثال تغییرات زیادی بر روی لیاوت اصلی ندادهایم. صرفاً رنگ پسزمینه و تگ h1 استفاده شده را تغییر دادیم تا در عمل متوجه تغییر لیاوت هنگام نمایش صفحات وب سایت بشوید.
برای معرفی لیاوت جدید به هر کدام از صفحاتی که نیاز به تغییر لیاوت دارند، کافی است در بخش script مربوط به آن صفحه از ویژگی definePageMeta استفاده کنید. در جلوی قسمت layout در داخل این ویژگی، نام لیاوت موردنظر (نام فایل ایجاد شده) را قرار میدهید.
<template>
<div>
<!-- This is contact page -->
<h1>Contact page</h1>
</div>
</template>
<script setup>
definePageMeta({
layout: 'side-bar'
})
</script>
همچنین تغییر دیگری که برای نمایش صفحات وب سایت در این حالت ضروری است تغییر در فایل app.vue است. بار دیگر به این فایل مراجعه کرده و تغییرات را به شکل زیر اعمال کنید.
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
مشاهده می کنید که از یک کامپوننت جدید به نام NuxtLayout استفاده کردهایم. این کامپوننت که سایر کامپوننتها و محتویات موجود در فایل را در بر میگیرد، از کامپوننتهای پیشفرض خود فریمورک ناکست جی اس است. به کمک این تغییرات، ناکست جی اس متوجه میشود که ما در ساختار نرمافزار خود از لیاوتهای مختلفی استفاده میکنیم. این مسئله را هنگام تغییر صفحات سایت به صورت خودکار برای شما لحاظ میکند. در تصویر زیر نیز مشاهده میکنید که هنگام مراجعه به صفحه contact رنگ پسزمینه و تگ h1 استفاده شده، تغییر میکنند.
جمعبندی
در این مقاله به صورت نوشتاری و ویدیویی به آموزش nuxt.js در خصوص نمایش صفحات وب سایت پرداختیم. به سه روش مختلف که میتوانید برای نمایش المانها و ساختار وبسایت خود به کار گیرید، اشاره کردیم. انتخاب هر یک از این روشها بستگی به نیاز سایت شما و میزان پیچیدگی آن دارد. اگر قرار است یک سایت جامع و پیچیده طراحی کنید و در آینده نیز احتمالاً به گسترش آن بپردازید، شاید به کار گیری روش سوم نمایش صفحات، مناسبترین گزینه باشد.
پاورقی:
- 1buttons