W3.CSS kodni qayta ishlatish
Nega kodni qayta ishlatish kerak?
Ko‘plab veb-sahifalar bir xil navigatsiya paneli, sarlavha qismi (header), pastki qism (footer) yoki yon paneldan foydalanadi.
Bir xil kodni har bir sahifaga nusxalash o‘rniga umumiy qismlarni alohida fayllarda saqlab, ularni qayta ishlatishingiz mumkin.
Qayta ishlatish misoli
Tasavvur qiling, veb-saytda 20 ta sahifa bor va ularning barchasi bir xil navigatsiya panelidan foydalanadi.
Agar navigatsiya kodini har bir sahifaga nusxalasangiz, navigatsiya o‘zgarganda barcha 20 ta sahifani yangilashingizga to‘g‘ri keladi.
Kodni qayta ishlatish orqali navigatsiyani bitta faylda saqlab, uni har bir sahifada ishlatishingiz mumkin.
Odatda qayta ishlatiladigan qismlar:
- Navigatsiya panellari
- Sarlavha qismlari (header)
- Pastki qismlar (footer)
- Yon panellar
- Umumiy kontent
Ko‘p sahifali veb-sayt
Veb-sayt alohida sahifalardan iborat bo‘lishi mumkin:
Misol
index.html
about.html
products.html
contact.html
Har bir sahifa bir xil navigatsiya va pastki qismdan foydalangan holda o‘z kontentiga ega bo‘lishi mumkin.
Umumiy kodni JavaScript yoki PHP kabi server tomonidagi til yordamida qayta ishlatishingiz mumkin.
Qayta ishlatiladigan navigatsiya
Avval navigatsiyani alohida faylda yarating.
JavaScript varianti
Navigatsiyani nav.html nomli faylda saqlang:
nav.html
<nav class="w3-bar w3-black">
<a href="index.html" class="w3-bar-item w3-button">Home</a>
<a href="about.html" class="w3-bar-item w3-button">About</a>
<a href="products.html" class="w3-bar-item w3-button">Products</a>
<a href="contact.html" class="w3-bar-item w3-button">Contact</a>
</nav>
Navigatsiya ko‘rinishi kerak bo‘lgan joyda konteyner yarating:
Misol
<div id="nav"></div>
So‘ng navigatsiyani yuklash uchun fetch() dan foydalaning:
Misol
fetch("nav.html")
.then(response => response.text())
.then(html => {
document.getElementById("nav").innerHTML = html;
});
PHP varianti
Navigatsiyani nav.php nomli faylda saqlang:
nav.php
<nav class="w3-bar w3-black">
<a href="index.php" class="w3-bar-item w3-button">Home</a>
<a href="about.php" class="w3-bar-item w3-button">About</a>
<a href="products.php" class="w3-bar-item w3-button">Products</a>
<a href="contact.php" class="w3-bar-item w3-button">Contact</a>
</nav>
So‘ng navigatsiyani u ko‘rinishi kerak bo‘lgan joyga qo‘shing (include):
Misol
<?php include "nav.php"; ?>
Qayta ishlatiladigan pastki qism (footer)
Xuddi shu g‘oyani pastki qism uchun ham qo‘llash mumkin.
JavaScript varianti
footer.html nomli fayl yarating:
footer.html
<footer class="w3-container w3-dark-grey">
<p>Copyright 2026 My Website</p>
</footer>
Pastki qism uchun konteyner yarating:
Misol
<div id="footer"></div>
So‘ng uni fetch() yordamida yuklang:
Misol
fetch("footer.html")
.then(response => response.text())
.then(html => {
document.getElementById("footer").innerHTML = html;
});
PHP varianti
footer.php nomli fayl yarating:
footer.php
<footer class="w3-container w3-dark-grey">
<p>Copyright 2026 My Website</p>
</footer>
So‘ng uni har bir sahifaga qo‘shing:
Misol
<?php include "footer.php"; ?>
Qayta ishlatiladigan sahifa kontenti
Navigatsiya va pastki qismlardan tashqari boshqa qismlarni ham qayta ishlatishingiz mumkin.
Yon panel, banner, aloqa bloki yoki boshqa har qanday umumiy kontentni alohida faylda saqlash mumkin.
JavaScript varianti
sidebar.html faylida qayta ishlatiladigan yon panel yarating:
sidebar.html
<aside class="w3-bar-block w3-light-grey">
<a href="#" class="w3-bar-item w3-button">News</a>
<a href="#" class="w3-bar-item w3-button">Events</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
</aside>
Yon panelni konteynerga yuklang:
Misol
<div id="sidebar"></div>
<script>
fetch("sidebar.html")
.then(response => response.text())
.then(html => {
document.getElementById("sidebar").innerHTML = html;
});
</script>
PHP varianti
Qayta ishlatiladigan yon panelni sidebar.php faylida yarating, so‘ng uni qo‘shing:
Misol
<?php include "sidebar.php"; ?>
To‘liq JavaScript sahifasi
Bu sahifa navigatsiya va pastki qismni alohida fayllardan yuklaydi:
index.html
<!DOCTYPE html>
<html>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>
<div id="nav"></div>
<main class="w3-container">
<h1>Home</h1>
<p>Welcome to my website.</p>
</main>
<div id="footer"></div>
<script>
fetch("nav.html")
.then(response => response.text())
.then(html => {
document.getElementById("nav").innerHTML = html;
});
fetch("footer.html")
.then(response => response.text())
.then(html => {
document.getElementById("footer").innerHTML = html;
});
</script>
</body>
</html>
about.html, products.html va contact.html fayllari ham xuddi shu qayta ishlatiladigan navigatsiya va pastki qismdan foydalanishi mumkin.
To‘liq PHP sahifasi
PHP’da umumiy fayllar sahifa brauzerga yuborilishidan oldin qo‘shiladi:
index.php
<!DOCTYPE html>
<html>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>
<?php include "nav.php"; ?>
<main class="w3-container">
<h1>Home</h1>
<p>Welcome to my website.</p>
</main>
<?php include "footer.php"; ?>
</body>
</html>
about.php fayli ham xuddi shu navigatsiya va pastki qismdan foydalanishi mumkin:
about.php
<?php include "nav.php"; ?>
<main class="w3-container">
<h1>About</h1>
<p>This is the About page.</p>
</main>
<?php include "footer.php"; ?>
Endi nav.php faylini bir marta o‘zgartirsangiz, bu o‘zgarish uni qo‘shgan har bir sahifada ko‘rinadi.
JavaScript yoki PHP?
Ikkala usul ham umumiy sahifa kontentini qayta ishlatishga imkon beradi, lekin ular turlicha ishlaydi:
| Usul | Bu qanday ishlaydi |
|---|---|
| JavaScript | Qayta ishlatiladigan HTML’ni brauzerda fetch() yordamida yuklaydi |
| PHP | Qayta ishlatiladigan fayllarni tayyor sahifa brauzerga yuborilishidan oldin serverda qo‘shadi |
Qayta ishlatiladigan kontentni brauzer yuklashini istasangiz, JavaScript’dan foydalaning.
Veb-saytingiz PHP serverida ishlasa va qayta ishlatiladigan kontent serverda birlashtirilishini istasangiz, PHP’dan foydalaning.
Eslatma: JavaScript fetch() odatda fayllarning veb-serverdan uzatilishini talab qiladi. Fayllarni kompyuteringizdan to‘g‘ridan-to‘g‘ri file:// orqali ochsangiz, u ishlamasligi mumkin.
Sahifa maketi uchun iframe’dan foydalanmang
<iframe> elementi joriy sahifa ichiga boshqa veb-sahifani joylashtiradi.
U xaritalar, videolar va tashqi hujjatlar kabi joylashtiriladigan kontent uchun foydali.
Qayta ishlatiladigan navigatsiya panellari, sarlavha qismlari, pastki qismlar va sahifa kontenti uchun odatda JavaScript yoki server tomonida qo‘shish (server-side include) yaxshiroq tanlovdir.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!