Komutun sonun alan adını (test.bilgi.edu.tr) ekleyerek repo'yu klonla, ve klasöre gir.
git clone https://github.com/bilgi-webteam/nuxt3-boilerplate.git test.bilgi.edu.tr
cd test.bilgi.edu.tryarn ile paketleri kur.
yarn installyarn devTarayıcıda http://localhost:3000 adresini aç.
nuxt.config.ts
Site adresini gir.
const BASE_URL = "test.bilgi.edu.tr";Mail adresini gir. (Footer.vue'da kullanım örneği var)
email: "[email protected]";Sayfaların adreslerini yaz.
pages: {
about: {
en: '/about', //http://localhost:3000/en/about
tr: '/hakkimizda', //http://localhost:3000/tr/hakkimizda
},
about_theteam: {
en: '/about/team', //http://localhost:3000/en/about/team
tr: '/hakkimizda/ekip', http://localhost:3000/tr/hakkimizda/ekip
},
about_company: {
en: '/about/company',
tr: '/hakkimizda/firma',
},
contact: {
en: '/contact',
tr: '/iletisim',
},
news: {
en: '/news',
tr: '/haberler',
}
},Google Analytics kodunu gir.
gtag: {
id: 'G-XXXXXXXXXX'
},Google Font ayarlarını yap.
googleFonts: {
families: {
Raleway: '100..900',
'Libre+Baskerville': [400, 700],
}
}tailwind.config.js
Nuxt Config'e eklenen fontları tanımla.
fontFamily: {
Raleway: ['Raleway', 'sans-serif'],
Libre: ['Libre Baskerville', 'serif'],
},Varsa ek renkleri ekle.
'malachite': {
'50': '#f0fdf4',
'100': '#dbfde7',
'200': '#b9f9ce',
'300': '#82f3aa',
'400': '#45e37d',
'500': '#1ed760',
'600': '#11a847',
'700': '#11843b',
'800': '#136832',
'900': '#12552c',
'950': '#042f16',
},lang/tr.ts , lang/en.ts ...
Her sayfa için zorunlu olan tercümeleri ekle. Varsa diğer tercümeleri ekle.
about: 'Hakkımızda',
aboutDescription: 'Hakkımızda Sayfası Açıklaması',
aboutHeaderTitle: 'Hakkımızda Sayfası Üstalan Başlık',
aboutHeaderDescription: 'Hakkımızda Sayfası Üstalan Açıklaması',layouts/default.vue
<body> ' ye eklenecek class'ları ilk div'e; içerikler'e eklenecek class'ları <main> e ekle.
<div
class="flex min-h-svh flex-col justify-between bg-slate-100 font-Raleway text-slate-900 dark:bg-slate-900 dark:text-slate-200"
></div><main
class="... [&_a]:border-b-2 [&_a]:border-dotted [&_a]:border-malachite-500 hover:[&_a]:border-solid [&_a]:dark:border-malachite-200 [&_p]:mb-4 [&_p]:text-pretty"
></main>components/Header.vue
Menü başlıklarını yaz. name ve to kısmlarıda i18n adreslerini kullan.
const navigation = [
{ name: "index", to: "/" },
{
name: "about",
to: "about",
subItems: [
{ name: "about_theteam", to: "about_theteam" },
{ name: "about_company", to: "about_company" },
],
},
{ name: "news", to: "news" },
{ name: "contact", to: "contact" },
];pages/about.vue
Sayfanin dosya adını yaz.
const pageName = "about";Üst alan görselini seç.
image: '/images/d.png',content/aboutTR.vue, content/aboutEN.vue ...
Her dil için ayrı birer sayfa oluştur.
Sayfa adı ile başlayıp büyük harfle dilin kodunu ekle.
Sunucuda nginx ayarlarini bu sayfadaki gibi yap
package.json
Sitenin sunucu IP ve klasör bilgilerini (test.bilgi.edu.tr) gir.
"config": {
"server": "[email protected]",
"path": "/home/deployer/sites/test.bilgi.edu.tr/"
},Yukarıdaki ayar yapıldıysa aşağıdaki komutu çalıştır.
yarn deployBu komut sırasıyla;
- Lokaldeki
distklasörünü siler, nuxt generateile yenidistklasörünü oluşturur,- Sunucudak
distklasörünü siler, - Secure Copy
scpile lokalde yeni oluşandistklasörünü sunucuya kopyalar.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent