Tasarım desenlerine giriş
vibe.d kütüphanesi kullanarak tasarım desenlerine giriş
Tasarım desenlerine giriş
Bu bölümde günlüğün sayfa tasarımına bir başlangıç yapacağız.
Tasarım deseni olarak Pure CSS kütüphanesini kullanacağız.
Sizin için tasarım desenini oluşturdum.
Bu tasarım desenini, kiraz.rar sıkıştırılmış dosyasını bilgisayarınıza indirerek kullanabilirsiniz.
Sıkıştırılmış kütüğü açtıktan sonra public ve views klasörlerini kiraz dizinine yapıştırmak gerekiyor.
İçeriği biraz uzun olsa da tasarım deseninin son halini paylaşıyorum.
Bu kütük views klasörü içinde bulunan index.dt isimli kütüktür.
doctype html
html(lang='tr')
head
meta(charset='utf-8')
|
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
meta(name='description', content='D nin vibed kütüphanesi ile geliştirilmiş günlük.')
|
title D dili ile maceralar
|
link(rel='stylesheet', href='/css/pure/pure-min.css')
|
link(rel='stylesheet', href='/css/pure/grids-responsive-min.css')
|
link(rel='stylesheet', href='/css/stil.css')
body
#yerlesim.pure-g
.yancubuk.pure-u-1.pure-u-md-1-4
.baslik
h1.gunluk-baslik Kiraz günlüğü
|
h2.gunluk-aciklama D dili ile yazılmış bir günlük
|
nav.nav
ul.gezinme
li.gezinme-elemani
a.pure-button(href='https://elektronik.vercel.app') Elektronik
|
li.gezinme-elemani
a.pure-button(href='http://ddili.org') D dili
|
.icerik.pure-u-1.pure-u-md-3-4
div
// Tüm günlük kayıtları
.posts
h1.icerik-altbaslik Sabitlenmiş gönderi
|
// Tek bir günlük gönderisi
section.gonderi
header.gonderi-ust-bolum
img.gonderi-resim(width='48', height='48', alt="Dagıl dıgıl", src='/resim/avni.jpg')
|
h2.gonderi-baslik D ile vibe.d örneği
|
p.gonderi-yazan
| Yazan
|
a.gonderi-yazan(href='#') Avni
| konu
|
a.etiket.etiket-tasarim(href='#') Dafıl
|
a.etiket.etiket-kirmizi(href='#') Dıfıl
|
.gonderi-aciklama
p
| Bu bölümde D'nin vibe.d kütüphanesini kullanarak bir günlük yazmaya
| çalışacağız.
| Henüz sadece tasarım halindedir. Sadece Pure CSS isminde bir tasarım
| deseni kullandık.
|
.posts
h1.icerik-altbaslik Son gönderiler
|
section.gonderi
header.gonderi-ust-bolum
img.gonderi-resim(width='48', height='48',
alt="Erdem'in resmi", src='/resim/erdem.svg')
|
h2.gonderi-baslik Ekmek yapımının incelikleri
|
p.gonderi-yazan
| Yazan
|
a.gonderi-yazan(href='#') Erdem
| konu
|
a.etiket.etiket-yesil(href='#') Ekmek yapımı
|
.gonderi-aciklama
p
| Bu bölümde ekmek yapımının inceliklerini öğreneceğiz.
| Ekmek yaparken nelere dikkat etmeliyiz.
|
section.gonderi
header.gonderi-ust-bolum
img.gonderi-resim(width='48', height='48',
alt="Veli'nin resmi", src='/resim/veli.png')
|
h2.gonderi-baslik Yeni fotoğraflar
|
p.gonderi-yazan
| Yazan
|
a.gonderi-yazan(href='#') Veli
| konu
|
a.etiket(href='#') Resimler
|
.gonderi-aciklama
.gonderi-resimleri.pure-g
.pure-u-1.pure-u-md-1-2
a(href='#')
img.resim(alt='Doğada uğur böceği',
src='/resim/doga1.jpg')
|
.gonderi-resim-aciklama
h3 Uğur böceği
|
.pure-u-1.pure-u-md-1-2
a(href='#')
img.resim(alt='Doğada beyaz çiçekler',
src='/resim/doga2.jpg')
|
.gonderi-resim-aciklama
h3 Doğada beyaz çiçekler
|
|
p
| Doğadan bazı manzara resimlerini bulabilirsiniz
|
.altlik
.pure-menu.pure-menu-horizontal
ul
li.pure-menu-item
a.pure-menu-link(href='https://elektronik.vercel.app') Hakkımızda
|
li.pure-menu-item
a.pure-menu-link(href='http://ddili.org') D dili
Kaynak kütüğünü kiraz dizininde iken açıyoruz.
emacs kaynak/ana.d
Kaynak kütükte ufak bir düzenleme yapıp resim ve tasarım desenlerini koyduğumuz public dizinini tanıtmak gerekiyor.
import vibe.vibe;
void main()
{
auto yolAtayıcı = new URLRouter;
yolAtayıcı.get("/", staticTemplate!"index.dt");
yolAtayıcı.get("*", serveStaticFiles("public"));
auto ayarlar = new HTTPServerSettings;
ayarlar.port = 8080;
ayarlar.bindAddresses = ["::1", "127.0.0.1"];
listenHTTP(ayarlar, yolAtayıcı);
logInfo("Lütfen tarayıcınızla http://127.0.0.1:8080/ adresini açınız.");
runApplication();
}
Uygulamayı derleyip çalıştırıyoruz.
dub
Tarayıcınızla http://localhost:8080 adresini açtığınızda yeni tasarım deseninin nasıl görüntülendiğini görebilirsiniz.
Seçtiğimiz tasarım deseninin güzel tarafı telefon, diz üstü gibi farklı ekran genişliğine sahip cihazlarda görüntülenirken bile esnek bir tasarıma sahip olmasıdır.
Tarayıcınızın ekran genişliğini değiştirdiğinizde bağlantı bölümünün üst kısma taşındığını görebilirsiniz.
Tasarımı bölümlere ayırma
Şimdi tasarım desenlerinin en güçlü özelliğine geliyoruz.
Sayfaya göz attığımızda sol tarafta gezinme bölümü var. Sağda gönderiler bölümü var. Altta ise sayfa hakkında bilgi verebileceğimiz bir bağlantı bölümü var.
Bu noktada her sayfada olacak bölümleri belirleyip temel bir desen hazırlıyoruz.
Örneğin sayfamızın temel desenini oluşturalım.
İsim olarak ana.dt ismini verelim.
doctype html
html(lang='tr')
head
meta(charset='utf-8')
|
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
meta(name='description', content='D nin vibed kütüphanesi ile geliştirilmiş günlük.')
|
title D dili ile maceralar
|
link(rel='stylesheet', href='/css/pure/pure-min.css')
|
link(rel='stylesheet', href='/css/pure/grids-responsive-min.css')
|
link(rel='stylesheet', href='/css/stil.css')
body
#yerlesim.pure-g
.yancubuk.pure-u-1.pure-u-md-1-4
.baslik
h1.gunluk-baslik Kiraz günlüğü
|
h2.gunluk-aciklama D dili ile yazılmış bir günlük
|
block gezinme
|
.icerik.pure-u-1.pure-u-md-3-4
div
block gonderiler
|
block altbolum
include alt
Görülebileceği üzere gezinme, gönderi ve alt bağlantı bölümlerini parçalar haline getirdik.
Burada block ifadesi ile bir sayfa desenini parçalara bölebiliyoruz.
Örnek olarak gönderileri gonderiler.dt isimli başka bir sayfa desenine taşıdık.
include ifadesi ise bir sayfa desenini sayfaya eklememize olanak sağlıyor.
Eğer altbolum kısmına bakarsak buranın hemen altında include ile alt.dt isimli sayfa desenini sayfaya eklemiş oluyoruz.
Gönderilerin gösterileceği sayfa olan index.dt şu hale geldi.
extends ana
block gonderiler
include gonderiler
block gezinme
nav.nav
ul.gezinme
li.gezinme-elemani
a.pure-button(href='https://python.org') Python
|
Burada extends anahtar kelimesi var olan desenin üzerine ekleme yapmaya olanak sağlıyor.
Gönderiler kısmını include anahtar kelimesi ile ekleyebiliyoruz.
Gezinme kısmını örnek olması açısından burada tekrar tanımladık.
Şimdilik ana gezinme bölümünde sadece bir bağlantı görülecek.
Bu bölümde kullandığımız sayfa desenlerini buradan indirebilirsiniz.
Uygulamayı derleyip çalıştırdığınızda ana gezinme kısmında sadece tek bir bağlantı olduğunu görebilirsiniz.
Sayfa tasarımında geliştirmeler
Bir binayı düşünelim.
Binanın temeli atıldıktan sonra pek ön plana çıkmaz.
Benzer şekilde sayfanın temelini oluşturan desenleri desenler isimli bir klasörde toplayabiliriz.
Günlüğü oluşturan bölümü de gunluk isimli klasörde toplayabiliriz.
Böylelikle views klasöründe gunluk ve desenler isimli iki yeni klasör oluşturduk.
Bu sefer gunluk dizinindeki index.dt kütüğüne bakalım.
extends desenler/ana
block icerik
include gunluk/gonderiler
Tasarımın nasıl basit hale geldiğini görebilirsiniz.
Yaptığımız son düzenlemelerden sonra tasarımın son halini aşağıdan indirebilirsiniz.
Bu yeni dizinleri oluşturduktan sonra uygulamanın kaynak kütüğünde sadece ufak bir düzenleme yapmak yeterlidir.
emacs kaynak/ana.d
Kütüğü açtıktan sonra ana.d kütüğünü aşağıdaki gibi değiştiriniz.
import vibe.vibe;
void main()
{
auto yolAtayıcı = new URLRouter;
yolAtayıcı.get("/", staticTemplate!"gunluk/index.dt");
yolAtayıcı.get("*", serveStaticFiles("public"));
auto ayarlar = new HTTPServerSettings;
ayarlar.port = 8080;
ayarlar.bindAddresses = ["::1", "127.0.0.1"];
listenHTTP(ayarlar, yolAtayıcı);
logInfo("Lütfen tarayıcınızla http://127.0.0.1:8080/ adresini açınız.");
runApplication();
}
Kiraz dizinine gelip dub komutu ile uygulamayı tekrar derleyip çalıştırıyoruz.
Görebileceğiniz üzere görsel tasarımda bir değişiklik yapmadık.
Sadece sayfa tasarımında uygulamayı geliştirirken kolaylık sağlayabilecek bazı iyileştirmeler yaptık.
Yorumlar