Single page website design
سایت‌های تک صفحه‌ای (Single Page Applications یا SPA) به وب‌سایت‌هایی گفته می‌شود که تمام محتوای خود را در یک صفحه واحد نمایش می‌دهند. این نوع طراحی با استفاده از تکنولوژی‌های مدرن مانند JavaScript، محتوای صفحه را بدون نیاز به بارگذاری مجدد به روزرسانی می‌کند.
مزیت اصلی این روش، تجربه کاربری روان و سریع است که شبیه به اپلیکیشن‌های موبایل عمل می‌کند. کاربران می‌توانند بدون انتظار برای بارگذاری صفحات جدید، به راحتی بین بخش‌های مختلف سایت حرکت کنند.
در ادامه سه مثال ساده از پیاده‌سازی SPA را مشاهده می‌کنید:
melika melika
<!DOCTYPE html>
<html>
<head>
<title>سایت تک صفحه‌ای من</title>
</head>
<body>
<nav>
<button onclick="showSection('home')">خانه</button>
<button onclick="showSection('about')">درباره ما</button>
</nav>
<div id="content"></div>
<script src="app.js"></script>
</body>
</html>// app.js
function showSection(sectionId) {
const contentDiv = document.getElementById('content');
switch(sectionId) {
case 'home':
contentDiv.innerHTML = '<h1>به سایت ما خوش آمدید</h1>';
break;
case 'about':
contentDiv.innerHTML = '<h1>درباره ما</h1><p>توضیحات شرکت...</p>';
break;
default:
contentDiv.innerHTML = '<p>صفحه مورد نظر یافت نشد</p>';
}
}// مدیریت تغییر URL بدون بارگذاری صفحه
window.onpopstate = function(event) {
showSection(event.state || 'home');
};
// افزودن به تاریخچه مرورگر
function navigateTo(sectionId) {
history.pushState(sectionId, '', `#${sectionId}`);
showSection(sectionId);
}طراحی سایت‌های تک صفحه‌ای نیازمند درک عمیق از JavaScript و معماری front-end است. با رعایت اصول طراحی مدرن و توجه به تجربه کاربری، می‌توانید محصولی حرفه‌ای و کاربرپسند ایجاد کنید.
نظر خود را بیان کنید...