{"id":34553,"date":"2025-11-18T19:40:58","date_gmt":"2025-11-18T16:40:58","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34553"},"modified":"2025-11-18T19:40:58","modified_gmt":"2025-11-18T16:40:58","slug":"vuepresse-kapsamli-bir-giris-modern-statik-siteler-ve-dokumantasyon-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vuepresse-kapsamli-bir-giris-modern-statik-siteler-ve-dokumantasyon-olusturma\/","title":{"rendered":"VuePress’e Kapsaml\u0131 Bir Giri\u015f: Modern Statik Siteler ve Dok\u00fcmantasyon Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

VuePress’e Kapsaml\u0131 Bir Giri\u015f: Modern Statik Siteler ve Dok\u00fcmantasyon Olu\u015fturma<\/h2>\n

Web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen teknolojilerle birlikte, sitelerin olu\u015fturulma ve sunulma bi\u00e7imlerini de d\u00f6n\u00fc\u015ft\u00fcrmektedir. \u00d6zellikle performans, g\u00fcvenlik ve geli\u015ftirici deneyimi (DX) gibi fakt\u00f6rler \u00f6n plana \u00e7\u0131kt\u0131k\u00e7a, statik site jenerat\u00f6rleri (SSG’ler) pop\u00fclaritesini art\u0131rm\u0131\u015ft\u0131r. Bu alanda \u00f6ne \u00e7\u0131kan ara\u00e7lardan biri de Vue.js ekosisteminin g\u00fc\u00e7l\u00fc bir par\u00e7as\u0131 olan VuePress’tir. Bu makale, VuePress’in ne oldu\u011funu, neden bu kadar etkili oldu\u011funu, nas\u0131l kurulup yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 ve \u00e7e\u015fitli kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyerek, okuyuculara kapsaml\u0131 bir giri\u015f sunmay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n

VuePress Nedir? Temel Kavramlar<\/h3>\n

VuePress, Vue.js destekli, Markdown odakl\u0131 bir statik site jenerat\u00f6r\u00fcd\u00fcr. Temel amac\u0131, \u00f6zellikle teknik dok\u00fcmantasyon ve bloglar gibi i\u00e7erik a\u011f\u0131rl\u0131kl\u0131 siteleri h\u0131zl\u0131, SEO dostu ve geli\u015ftirici dostu bir \u015fekilde olu\u015fturmakt\u0131r. Vue.js’in reaktif g\u00fcc\u00fcn\u00fc ve bile\u015fen tabanl\u0131 yap\u0131s\u0131n\u0131 kullanarak, sadece statik HTML dosyalar\u0131 \u00fcretmekle kalmaz, ayn\u0131 zamanda son kullan\u0131c\u0131ya tek sayfa uygulama (SPA) benzeri ak\u0131c\u0131 bir deneyim sunar.<\/p>\n

Statik Site Jenerat\u00f6r\u00fc (SSG) Felsefesi<\/h4>\n

Geleneksel dinamik web siteleri (WordPress, Drupal gibi) her istekte sunucu taraf\u0131nda sayfa olu\u015ftururken, SSG’ler sitenin t\u00fcm sayfalar\u0131n\u0131 derleme (build) zaman\u0131nda \u00f6nceden olu\u015fturur ve statik HTML, CSS ve JavaScript dosyalar\u0131 olarak sunar. Bu yakla\u015f\u0131m\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r:<\/p>\n

* Performans:<\/strong> Sunucu taraf\u0131nda herhangi bir i\u015flem yap\u0131lmad\u0131\u011f\u0131 i\u00e7in sayfalar an\u0131nda y\u00fcklenir.
\n* G\u00fcvenlik:<\/strong> Veritaban\u0131 ve sunucu taraf\u0131 kodlama olmad\u0131\u011f\u0131 i\u00e7in sald\u0131r\u0131 y\u00fczeyi \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r.
\n* Maliyet:<\/strong> Statik dosyalar herhangi bir CDN veya basit bir web sunucusu \u00fczerinden \u00e7ok d\u00fc\u015f\u00fck maliyetlerle bar\u0131nd\u0131r\u0131labilir.
\n* \u00d6l\u00e7eklenebilirlik:<\/strong> Y\u00fcksek trafik alt\u0131nda bile performans d\u00fc\u015f\u00fc\u015f\u00fc ya\u015fanmaz, \u00e7\u00fcnk\u00fc t\u00fcm i\u00e7erik \u00f6nceden haz\u0131rlanm\u0131\u015ft\u0131r.<\/p>\n

VuePress bu felsefeyi benimseyerek, geli\u015ftiricilerin Markdown dosyalar\u0131yla kolayca i\u00e7erik yazmas\u0131n\u0131 ve bu i\u00e7erikleri y\u00fcksek performansl\u0131, modern web sitelerine d\u00f6n\u00fc\u015ft\u00fcrmesini sa\u011flar.<\/p>\n

Markdown Odakl\u0131l\u0131k ve Vue.js G\u00fcc\u00fc<\/h4>\n

VuePress’in kalbinde Markdown yatar. T\u00fcm i\u00e7erik, basit ve okunmas\u0131 kolay Markdown format\u0131nda yaz\u0131l\u0131r. Ancak VuePress, s\u0131radan bir Markdown d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fcden \u00e7ok daha fazlas\u0131d\u0131r. Markdown dosyalar\u0131n\u0131n i\u00e7inde do\u011frudan Vue bile\u015fenlerini kullanman\u0131za olanak tan\u0131r. Bu, statik i\u00e7eri\u011fe interaktif \u00f6\u011feler eklemek, dinamik veri \u00e7ekmek veya karma\u015f\u0131k UI bile\u015fenlerini sayfalar\u0131n\u0131za dahil etmek istedi\u011finizde inan\u0131lmaz bir esneklik sa\u011flar. \u00d6rne\u011fin, bir kod blo\u011funun alt\u0131nda \u00e7al\u0131\u015fan bir \u00f6rnek veya bir API yan\u0131t\u0131n\u0131 g\u00f6steren bir bile\u015fen ekleyebilirsiniz.<\/p>\n

Vue.js’in g\u00fcc\u00fcnden yararlanarak, VuePress, geli\u015ftiricilere tan\u0131d\u0131k bir ortam sunar. Vue geli\u015ftiricileri, mevcut bilgi birikimlerini kullanarak temalar olu\u015fturabilir, eklentiler geli\u015ftirebilir ve sitelerini istedikleri gibi \u00f6zelle\u015ftirebilirler. Bu entegrasyon, Vue ekosisteminin zenginli\u011fini ve canl\u0131l\u0131\u011f\u0131n\u0131 VuePress projelerine ta\u015f\u0131r.<\/p>\n

SPA Benzeri Deneyim<\/h4>\n

VuePress taraf\u0131ndan \u00fcretilen siteler, ilk sayfa y\u00fcklendikten sonra bir tek sayfa uygulama (SPA) gibi davran\u0131r. Sayfalar aras\u0131 ge\u00e7i\u015fler, taray\u0131c\u0131n\u0131n tam sayfa yenilemesi yerine, Vue Router taraf\u0131ndan y\u00f6netilen h\u0131zl\u0131 ve ak\u0131c\u0131 ge\u00e7i\u015flerle ger\u00e7ekle\u015fir. Ayr\u0131ca, VuePress ak\u0131ll\u0131 bir \u00f6nceden getirme (prefetching) mekanizmas\u0131na sahiptir; bu sayede kullan\u0131c\u0131 bir ba\u011flant\u0131n\u0131n \u00fczerine geldi\u011finde veya ba\u011flant\u0131 yak\u0131ndayken, ilgili sayfan\u0131n i\u00e7eri\u011fi arka planda indirilir. Bu, kullan\u0131c\u0131n\u0131n bir sonraki sayfaya t\u0131klad\u0131\u011f\u0131nda neredeyse an\u0131nda y\u00fcklenme deneyimi ya\u015famas\u0131n\u0131 sa\u011flar. Bu \u00f6zellikler, \u00f6zellikle dok\u00fcmantasyon sitelerinde kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n

Neden VuePress Tercih Edilmeli? Avantajlar\u0131<\/h3>\n

VuePress’in pop\u00fclerli\u011finin arkas\u0131nda yatan bir\u00e7ok g\u00fc\u00e7l\u00fc avantaj bulunmaktad\u0131r. Bu avantajlar, onu \u00f6zellikle dok\u00fcmantasyon, blog ve benzeri i\u00e7erik odakl\u0131 projeler i\u00e7in cazip bir se\u00e7enek haline getirir.<\/p>\n

\u00dcst\u00fcn Performans ve SEO Dostu Yap\u0131<\/h4>\n

VuePress, varsay\u0131lan olarak y\u00fcksek performans i\u00e7in optimize edilmi\u015ftir. \u00dcretilen statik dosyalar hafif ve h\u0131zl\u0131d\u0131r. \u0130lk y\u00fckleme s\u00fcreleri k\u0131sad\u0131r ve Core Web Vitals gibi \u00f6nemli performans metriklerinde y\u00fcksek puanlar almay\u0131 hedefler. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, arama motoru s\u0131ralamalar\u0131 i\u00e7in de kritik \u00f6neme sahiptir.
\nAyr\u0131ca, VuePress siteleri sunucu taraf\u0131nda render (SSR) edilmi\u015f \u00e7\u0131kt\u0131lar \u00fcretti\u011fi i\u00e7in, arama motoru botlar\u0131 taraf\u0131ndan kolayca indekslenebilir. Bu, SEO performans\u0131n\u0131 do\u011fal olarak art\u0131r\u0131r ve i\u00e7eri\u011finizin daha geni\u015f kitlelere ula\u015fmas\u0131na yard\u0131mc\u0131 olur. Ba\u015fl\u0131klar, meta a\u00e7\u0131klamalar ve di\u011fer SEO etiketleri kolayca yap\u0131land\u0131r\u0131labilir.<\/p>\n

Harika Geli\u015ftirici Deneyimi (DX)<\/h4>\n

Vue.js geli\u015ftiricileri i\u00e7in VuePress, \u00f6\u011frenme e\u011frisi olduk\u00e7a d\u00fc\u015f\u00fck olan, tan\u0131d\u0131k ve rahat bir ortam sunar. Vue ekosistemine a\u015fina olan herkes, VuePress’in yap\u0131land\u0131rmas\u0131n\u0131, tema ve eklenti geli\u015ftirmesini kolayca kavrayabilir. Canl\u0131 yeniden y\u00fckleme (hot-reloading) \u00f6zelli\u011fi sayesinde, geli\u015ftirme s\u00fcrecinde yap\u0131lan de\u011fi\u015fiklikler an\u0131nda taray\u0131c\u0131da yans\u0131t\u0131l\u0131r, bu da verimli bir geli\u015ftirme d\u00f6ng\u00fcs\u00fc sa\u011flar. Basit ve sezgisel yap\u0131land\u0131rma se\u00e7enekleri, projenin h\u0131zl\u0131 bir \u015fekilde aya\u011fa kalkmas\u0131na olanak tan\u0131r.<\/p>\n

Esneklik ve \u00d6zelle\u015ftirilebilirlik<\/h4>\n

VuePress, varsay\u0131lan olarak g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 bir tema ile gelirken, ayn\u0131 zamanda s\u0131n\u0131rs\u0131z \u00f6zelle\u015ftirme imkan\u0131 sunar. Temalar\u0131 tamamen s\u0131f\u0131rdan olu\u015fturabilir veya mevcut temalar\u0131 ihtiya\u00e7lar\u0131n\u0131za g\u00f6re geni\u015fletebilirsiniz. Vue bile\u015fenlerini Markdown i\u00e7ine g\u00f6mme yetene\u011fi, statik i\u00e7eri\u011fe dinamik ve etkile\u015fimli \u00f6\u011feler eklemenizi sa\u011flar. Eklenti sistemi, sitenizin i\u015flevselli\u011fini arama, PWA deste\u011fi, Google Analytics entegrasyonu gibi \u00f6zelliklerle kolayca geni\u015fletmenize olanak tan\u0131r.<\/p>\n

Zengin Ekosistem ve Topluluk Deste\u011fi<\/h4>\n

Vue.js’in arkas\u0131ndaki geni\u015f ve aktif topluluk, VuePress i\u00e7in de g\u00fc\u00e7l\u00fc bir destek sa\u011flar. Bu, \u00e7ok say\u0131da a\u00e7\u0131k kaynak eklenti, tema ve \u00f6\u011fretici kayna\u011fa eri\u015fim anlam\u0131na gelir. Kar\u015f\u0131la\u015f\u0131lan sorunlar i\u00e7in h\u0131zl\u0131 \u00e7\u00f6z\u00fcmler bulmak veya yeni \u00f6zellikler hakk\u0131nda bilgi edinmek genellikle kolayd\u0131r. Vue ekosisteminin genel olgunlu\u011fu, VuePress’in g\u00fcvenilir ve s\u00fcrd\u00fcr\u00fclebilir bir \u00e7\u00f6z\u00fcm olmas\u0131n\u0131 sa\u011flar.<\/p>\n

Basit Bak\u0131m ve D\u00fc\u015f\u00fck \u0130\u015fletme Maliyeti<\/h4>\n

Statik siteler, dinamik sunucu taraf\u0131 uygulamalara g\u00f6re \u00e7ok daha az bak\u0131m gerektirir. Veritaban\u0131 y\u00f6netimi, sunucu yamalar\u0131 veya karma\u015f\u0131k uygulama da\u011f\u0131t\u0131m\u0131 gibi endi\u015feler ortadan kalkar. \u00dcretilen statik dosyalar, Netlify, Vercel, GitHub Pages gibi bir\u00e7ok \u00fccretsiz veya \u00e7ok uygun maliyetli statik hosting hizmetinde kolayca bar\u0131nd\u0131r\u0131labilir. Bu da i\u015fletme maliyetlerini \u00f6nemli \u00f6l\u00e7\u00fcde d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n

VuePress ile Ba\u015flang\u0131\u00e7<\/h3>\n

VuePress ile bir proje ba\u015flatmak olduk\u00e7a basittir. \u0130\u015fte ad\u0131m ad\u0131m nas\u0131l ba\u015flayaca\u011f\u0131n\u0131z:<\/p>\n

\u00d6n Gereksinimler<\/h4>\n

VuePress kullanmak i\u00e7in bilgisayar\u0131n\u0131zda Node.js (v14 veya \u00fczeri \u00f6nerilir) ve bir paket y\u00f6neticisi (npm veya Yarn) y\u00fckl\u00fc olmal\u0131d\u0131r.<\/p>\n

Kurulum<\/h4>\n

VuePress projesi olu\u015fturman\u0131n iki ana yolu vard\u0131r:<\/p>\n

1. create-vuepress-app<\/code> ile H\u0131zl\u0131 Ba\u015flang\u0131\u00e7:<\/strong>
\n Bu ara\u00e7, size temel bir VuePress projesi iskeleti sunar ve h\u0131zl\u0131ca ba\u015flaman\u0131z\u0131 sa\u011flar.<\/p>\n

npx create-vuepress-app my-vuepress-site\n    cd my-vuepress-site\n    npm install # veya yarn\n    npm run docs:dev # veya yarn docs:dev<\/code><\/pre>\n
    Bu komutlar, size bir proje klas\u00f6r\u00fc olu\u015fturacak, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 kuracak ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r.<\/p>\n
2.  Manuel Kurulum:<\/strong>
\n    Mevcut bir projeye VuePress eklemek veya daha fazla kontrol sa\u011flamak isterseniz, manuel kurulumu tercih edebilirsiniz.<\/p>\n
mkdir my-vuepress-site\n    cd my-vuepress-site\n    npm init -y\n    npm install -D vuepress@next # VuePress v2 i\u00e7in\n    # veya npm install -D vuepress # VuePress v1 i\u00e7in (bu makale v2'yi varsaymaktad\u0131r)<\/code><\/pre>\n
    Ard\u0131ndan, package.json<\/code> dosyan\u0131za \u015fu komutlar\u0131 ekleyin:<\/p>\n
{\n      \"scripts\": {\n        \"docs:dev\": \"vuepress dev docs\",\n        \"docs:build\": \"vuepress build docs\"\n      }\n    }<\/code><\/pre>\n
    docs<\/code> klas\u00f6r\u00fcn\u00fc olu\u015fturun ve i\u00e7ine ilk Markdown dosyan\u0131z\u0131 ekleyin:<\/p>\n
mkdir docs\n    echo '# Hello VuePress' > docs\/README.md<\/code><\/pre>\n
    \u015eimdi geli\u015ftirme sunucusunu ba\u015flatabilirsiniz:<\/p>\n
npm run docs:dev<\/code><\/pre>\n
    Varsay\u0131lan olarak, siteniz http:\/\/localhost:8080<\/code> adresinde \u00e7al\u0131\u015facakt\u0131r.<\/p>\n
Proje Yap\u0131s\u0131<\/h4>\n
Tipik bir VuePress projesinin dizin yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n
my-vuepress-site\/\n\u251c\u2500\u2500 docs\/                     # \u0130\u00e7erik dosyalar\u0131\n\u2502   \u251c\u2500\u2500 .vuepress\/            # VuePress yap\u0131land\u0131rmas\u0131 ve \u00f6zelle\u015ftirmeleri\n\u2502   \u2502   \u251c\u2500\u2500 config.js         # Ana yap\u0131land\u0131rma dosyas\u0131\n\u2502   \u2502   \u251c\u2500\u2500 client.js         # \u0130stemci taraf\u0131 kodlar\u0131\n\u2502   \u2502   \u251c\u2500\u2500 components\/       # \u00d6zel Vue bile\u015fenleri\n\u2502   \u2502   \u251c\u2500\u2500 public\/           # Statik dosyalar (resimler, fontlar vb.)\n\u2502   \u2502   \u251c\u2500\u2500 styles\/           # Stil dosyalar\u0131\n\u2502   \u2502   \u2514\u2500\u2500 theme\/            # \u00d6zel tema dosyalar\u0131\n\u2502   \u251c\u2500\u2500 guide\/\n\u2502   \u2502   \u2514\u2500\u2500 getting-started.md\n\u2502   \u251c\u2500\u2500 README.md             # Ana sayfa\n\u2502   \u2514\u2500\u2500 .gitignore\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 yarn.lock \/ package-lock.json<\/code><\/pre>\n
docs<\/code> klas\u00f6r\u00fc, Markdown i\u00e7eri\u011finizin ve VuePress’e \u00f6zel yap\u0131land\u0131rma dosyalar\u0131n\u0131n bulundu\u011fu yerdir. .vuepress<\/code> klas\u00f6r\u00fc, sitenizin t\u00fcm sihrinin ger\u00e7ekle\u015fti\u011fi yerdir.<\/p>\n
Temel Yap\u0131land\u0131rma: .vuepress\/config.js<\/h3>\n
VuePress sitenizin t\u00fcm temel ayarlar\u0131 .vuepress\/config.js<\/code> dosyas\u0131nda yap\u0131l\u0131r. Bu dosya, CommonJS veya ES mod\u00fcl\u00fc olarak bir JavaScript nesnesi d\u0131\u015fa aktar\u0131r.<\/p>\n
\/\/ .vuepress\/config.js\nimport { defineUserConfig } from 'vuepress'\nimport { defaultTheme } from '@vuepress\/theme-default'\n\nexport default defineUserConfig({\n  \/\/ Temel Yap\u0131land\u0131rma\n  lang: 'tr-TR', \/\/ Sitenin dili\n  title: 'VuePress Dok\u00fcmantasyonu', \/\/ Sitenin ba\u015fl\u0131\u011f\u0131\n  description: 'VuePress ile olu\u015fturulmu\u015f \u00f6rnek bir dok\u00fcmantasyon sitesi.', \/\/ Sitenin a\u00e7\u0131klamas\u0131\n\n  \/\/ Tema Yap\u0131land\u0131rmas\u0131\n  theme: defaultTheme({\n    \/\/ Varsay\u0131lan tema ayarlar\u0131\n    navbar: [\n      { text: 'Ana Sayfa', link: '\/' },\n      { text: 'Rehber', link: '\/guide\/' },\n      {\n        text: 'D\u0131\u015f Ba\u011flant\u0131',\n        children: [\n          { text: 'Vue.js', link: 'https:\/\/vuejs.org' },\n          { text: 'VuePress GitHub', link: 'https:\/\/github.com\/vuejs\/vuepress' },\n        ],\n      },\n    ],\n    sidebar: {\n      '\/guide\/': [\n        {\n          text: 'Rehber',\n          children: ['\/guide\/README.md', '\/guide\/getting-started.md'],\n        },\n      ],\n    },\n    \/\/ Di\u011fer tema ayarlar\u0131...\n    repo: 'your-github-username\/your-repo-name', \/\/ GitHub repo linki\n    docsRepo: 'your-github-username\/your-repo-name', \/\/ Dok\u00fcmanlar\u0131n oldu\u011fu repo\n    docsBranch: 'main', \/\/ Dok\u00fcmanlar\u0131n bulundu\u011fu branch\n    docsDir: 'docs', \/\/ Dok\u00fcmanlar\u0131n repo i\u00e7indeki yolu\n    editLinkText: 'Bu sayfay\u0131 GitHub\\'da d\u00fczenle',\n    lastUpdatedText: 'Son G\u00fcncelleme',\n    contributorsText: 'Katk\u0131da Bulunanlar',\n  }),\n\n  \/\/ Eklenti Yap\u0131land\u0131rmas\u0131\n  plugins: [\n    \/\/ '@vuepress\/plugin-search'\n    \/\/ '@vuepress\/plugin-pwa'\n    \/\/ Di\u011fer eklentiler...\n  ],\n\n  \/\/ Di\u011fer Yap\u0131land\u0131rmalar\n  base: '\/', \/\/ Uygulaman\u0131n da\u011f\u0131t\u0131laca\u011f\u0131 temel URL\n  head: [\n    ['link', { rel: 'icon', href: '\/images\/logo.png' }],\n    \/\/ Di\u011fer meta etiketleri veya linkler\n  ],\n});<\/code><\/pre>\n
Bu \u00f6rnek, bir VuePress projesinin temel yap\u0131land\u0131rma se\u00e7eneklerini g\u00f6stermektedir:<\/p>\n
*   lang<\/code>, title<\/code>, description<\/code><\/strong>: Sitenin dilini, genel ba\u015fl\u0131\u011f\u0131n\u0131 ve a\u00e7\u0131klamas\u0131n\u0131 tan\u0131mlar. Bunlar SEO i\u00e7in \u00f6nemlidir.
\n*   theme<\/code><\/strong>: Kullan\u0131lacak temay\u0131 belirtir. Varsay\u0131lan tema olan @vuepress\/theme-default<\/code> genellikle iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. theme<\/code> \u00f6zelli\u011fi alt\u0131nda, teman\u0131n kendi \u00f6zel ayarlar\u0131 (navbar, sidebar, repo linkleri vb.) yap\u0131land\u0131r\u0131l\u0131r.
\n*   navbar<\/code><\/strong>: \u00dcst gezinme \u00e7ubu\u011funda g\u00f6r\u00fcnecek ba\u011flant\u0131lar\u0131 tan\u0131mlar. Basit metin ba\u011flant\u0131lar\u0131 veya alt men\u00fcleri olan gruplar olu\u015fturabilirsiniz.
\n*   sidebar<\/code><\/strong>: Kenar \u00e7ubu\u011funun nas\u0131l g\u00f6r\u00fcnece\u011fini yap\u0131land\u0131r\u0131r. Genellikle klas\u00f6r yap\u0131n\u0131za g\u00f6re otomatik olarak olu\u015fturulabilir veya manuel olarak tan\u0131mlanabilir.
\n*   plugins<\/code><\/strong>: Kullan\u0131lacak eklentileri bir dizi i\u00e7inde tan\u0131mlar. Her eklenti, sitenize belirli bir i\u015flevsellik ekler.
\n*   base<\/code><\/strong>: Sitenizin bir alt dizinde bar\u0131nd\u0131r\u0131lmas\u0131 gerekiyorsa kullan\u0131l\u0131r (\u00f6rne\u011fin GitHub Pages’de).
\n*   head<\/code><\/strong>: Sayfan\u0131n <\/code> etiketine eklenecek \u00f6zel meta etiketleri, stil sayfalar\u0131 veya favicon gibi \u00f6\u011feleri tan\u0131mlar.<\/p>\n
\u0130\u00e7erik Olu\u015fturma: Markdown ve \u00d6n Bilgi (Front Matter)<\/h3>\n
VuePress’teki i\u00e7erik olu\u015fturma s\u00fcreci, Markdown dosyalar\u0131 yazmaktan ibarettir. Ancak bu Markdown dosyalar\u0131, sadece statik metinlerden ibaret de\u011fildir; Vue bile\u015fenlerini ve \u00f6zel meta verileri de i\u00e7erebilirler.<\/p>\n
Markdown Temelleri<\/h4>\n
Markdown, d\u00fcz metinle bi\u00e7imlendirilmi\u015f belgeler olu\u015fturmak i\u00e7in kullan\u0131lan hafif bir i\u015faretleme dilidir. VuePress, standart Markdown s\u00f6zdizimini destekler:<\/p>\n
*   Ba\u015fl\u0131klar:<\/strong> # Ba\u015fl\u0131k 1<\/code>, ## Ba\u015fl\u0131k 2<\/code>, ### Ba\u015fl\u0131k 3<\/code>
\n   Listeler:<\/strong> - Madde 1<\/code>, <\/em> Madde 2<\/code>, 1. S\u0131ral\u0131 Madde<\/code>
\n   Vurgulama:<\/strong> <\/em>italik*<\/code>, kal\u0131n<\/strong><\/code>
\n*   Kod Bloklar\u0131:<\/strong> \u00dc\u00e7 adet ters t\u0131rnak (<\/p>\n
) aras\u0131na kod yaz\u0131labilir. Dil belirtmek i\u00e7in<\/code><\/pre>\n
javascript<\/code> gibi kullan\u0131labilir.
\n*   Ba\u011flant\u0131lar:<\/strong> [Metin](URL)<\/code>
\n*   G\u00f6rseller:<\/strong> ![Alternatif Metin](\/path\/to\/image.png)<\/code><\/p>\n
VuePress, Markdown’\u0131 i\u015flemek i\u00e7in markdown-it’i kullan\u0131r ve bir dizi faydal\u0131 eklenti ile geni\u015fletir. \u00d6rne\u011fin, \u00f6zel kapsay\u0131c\u0131lar (::: tip<\/code>, ::: warning<\/code>, ::: danger<\/code>) veya kod bloklar\u0131nda sat\u0131r numaraland\u0131rma gibi \u00f6zellikler varsay\u0131lan olarak desteklenir.<\/p>\n
\u00d6n Bilgi (Front Matter)<\/h4>\n
Her Markdown dosyas\u0131n\u0131n en \u00fcst\u00fcnde, YAML format\u0131nda bir “\u00f6n bilgi” (front matter) blo\u011fu tan\u0131mlayabilirsiniz. Bu blok, o sayfaya \u00f6zel meta verileri i\u00e7erir ve \u00fc\u00e7 tire (—) aras\u0131na yaz\u0131l\u0131r:<\/p>\n
---\ntitle: \u0130lk VuePress Sayfam\ndescription: Bu, VuePress ile olu\u015fturulmu\u015f ilk sayfam\u0131n a\u00e7\u0131klamas\u0131d\u0131r.\ndate: 2023-10-27\nsidebar: auto # Bu sayfa i\u00e7in kenar \u00e7ubu\u011funu otomatik olu\u015ftur\nsidebarDepth: 2 # Kenar \u00e7ubu\u011funda H2 ve H3 ba\u015fl\u0131klar\u0131n\u0131 g\u00f6ster\nprev: \/guide\/getting-started.md # \u00d6nceki sayfa ba\u011flant\u0131s\u0131\nnext: \/guide\/advanced-config.md # Sonraki sayfa ba\u011flant\u0131s\u0131\n---\n\n
\u0130lk VuePress Sayfam<\/h2>\n\nBu, VuePress ile olu\u015fturdu\u011fum harika bir sayfa. Markdown ile kolayca i\u00e7erik yazabilirim.<\/code><\/pre>\n
\u00d6n bilgi blo\u011fundaki veriler, VuePress taraf\u0131ndan i\u015flenir ve sayfan\u0131n ba\u015fl\u0131\u011f\u0131n\u0131, a\u00e7\u0131klamas\u0131n\u0131, kenar \u00e7ubu\u011fu davran\u0131\u015f\u0131n\u0131 veya di\u011fer \u00f6zel ayarlar\u0131 dinamik olarak yap\u0131land\u0131rmak i\u00e7in kullan\u0131labilir. title<\/code> ve description<\/code> gibi alanlar, sayfan\u0131n <\/code> etiketine otomatik olarak eklenerek SEO’ya katk\u0131da bulunur.<\/p>\n
Vue Bile\u015fenlerini Kullanma<\/h4>\n
VuePress’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, Markdown dosyalar\u0131n\u0131n i\u00e7inde Vue bile\u015fenlerini do\u011frudan kullanabilme yetene\u011fidir. Bu, statik i\u00e7eri\u011fe interaktif ve dinamik \u00f6\u011feler eklemenizi sa\u011flar.<\/p>\n
\u00d6ncelikle, .vuepress\/components<\/code> dizini alt\u0131nda bir Vue bile\u015feni olu\u015fturun:<\/p>\n
\n