0Pricing
Sveltejs Academy · Ders

Proje Yapısı: src routes static

Bir SvelteKit projesinin dizin düzenini ve her klasörün amacını keşfedin.

Proje Yapısı: src routes static, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.

Üst Düzey Klasörler

Bir SvelteKit projesinde şu temel klasörler bulunur: src/, static/ ve kökteki yapılandırma dosyaları.

src Klasörü

src/ klasörü, uygulamanızın tüm kodunu içerir: rotalar, bileşenler, kitaplık kodu ve uygulamanın giriş noktası.

src/routes Klasörü

src/routes klasörünün her alt klasörü bir URL'ye karşılık gelir. Bir klasördeki +page.svelte adlı dosya, o yolda neyin görüntüleneceğini tanımlar.

Rota Örneği

src/routes/about/+page.svelte yolu, tarayıcıda /about adresinde görüntülenir.

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

src/lib Klasörü

src/lib, paylaşılan modüller ve bileşenler içindir. Bu klasörden $lib takma adını kullanarak içe aktarın.

import Button from "$lib/Button.svelte";

static Klasörü

static/ klasöründeki dosyalar URL kökünde olduğu gibi sunulur. Bu klasörü favicon.png, robots.txt ve işlenmemiş diğer varlıklar için kullanın.

Yapılandırma Dosyaları

Kök dizinde svelte.config.js, vite.config.js, package.json ve isteğe bağlı olarak tsconfig.json bulunur.

svelte.config.js

Ön işlemcileri, bağdaştırıcıyı ve kit düzeyindeki seçenekleri tanımlar. Bağdaştırıcı, uygulamanızın dağıtım için nasıl derleneceğine karar verir.

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

Vite'ı (temel paketleyiciyi) yapılandırır. Eklentileri, takma adları, sunucu vekil kurallarını ve derleme seçeneklerini buraya ekleyin.

app.html Dosyası

src/app.html, her sayfayı saran HTML iskeletidir. %sveltekit.head% gibi yer tutucular derleme zamanında doldurulur.

Kancalar Dosyası

src/hooks.server.js, sunucudaki istekleri araya girerek işlemenizi sağlar. Kancaları ilerideki bir kursta ele alacağız.

Hızlı Kontrol

Bir SvelteKit sayfa rota dosyası nerede bulunur?

Özet

Artık projenin yerleşimini biliyorsunuz: kod için src, sayfalar için routes, paylaşılan kod için lib ve ham varlıklar için static.

Sıkça Sorulan Sorular

“Proje Yapısı: src routes static” dersi ücretsiz mi?

Evet — “Proje Yapısı: src routes static” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.

“Proje Yapısı: src routes static” dersinde ne öğreneceğim?

Bir SvelteKit projesinin dizin düzenini ve her klasörün amacını keşfedin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Proje Yapısı: src routes static” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Svelte Nedir ve Neden Derleme Yapar
  2. npm create svelte ile Proje Oluşturma
  3. Proje Yapısı: src routes static
  4. Geliştirme Sunucusu ve Sıcak Modül Değiştirme
← Sveltejs Academy Sayfasına Dön