{.title}}

Üretim sırasında Hugo, içerik dosyasında başlığı otomatik olarak alacak ve iki

arasında bir başlık ekleyecektir. Hugo’nun çeşitli varsayılan değişkenleri vardır ve üretim sırasında verileri işlemek için özel işlevler bile yazabilirsiniz. Şablonlama için Hugo, HTML/Şablon ve Metin/Şablon/Varsayılan Şablon Kütüphanesi kullanır. Bu, şişmiş uygulamaların azaltılmasına yardımcı olur çünkü Hugo’nun şablonlama için üçüncü taraf bir kütüphane yüklemesi gerekmez. Aşağıda, popüler Ananke temasından index.html ana sayfa şablonuna bir örnek verilmiştir. Gördüğünüz gibi, bu birkaç ek şablon koduna sahip standart bir HTML dosyasına benziyor: TBD: Buradan Kodu: https://gititub.com/thenewdynamic/gohugo-heme-anke Derlenmiş bir yürütülebilir olarak gönderilen Hugo hugo nasıl yüklenir, Bu, sadece başlamak için birçok bağımlılığı indirmeniz ve yönetmeniz gerekmediği anlamına gelir. Bu macOS, Windows ve Linux için kullanılabilir. Aşağıdaki önemli kurulum talimatları, yürütülebilir Hugo’yu sizin için indirecek bir paket yöneticisi gerektirir. Hugo’yu kaynaktan inşa etmeyi tercih ediyorsanız, lütfen Hugo’nun resmi belgesine bakın. MacOS ve Linux’a Hugo Nasıl Yüklenir MacOS ve Linux için önerilen kurulum yöntemi, kurulum ve uygulama güncellemeleri için bir homebrew, paket yöneticisi gerektirir. Bir HomeBle yüklemediyseniz, aşağıdaki komutu terminalde çalıştırarak yükleyebilirsiniz:
/bin/bash -c “$ (curl -fssl https://raw.githubusercontent.com/homebrew/install/head/install.sh)” HomeBew yüklendikten sonra, hugo yüklemek için aşağıdaki komutu çalıştırın: Windows kullanıcıları için Windows’a Hugo’yu nasıl yükleyen Hugo, Chocolate veya Scoop Paket Yöneticileri kullanılarak yüklenebilir. Çikolata ve kepçe yükleme talimatları homebraces’den biraz daha karmaşık olduğundan, burada ve burada resmi belge sayfalarına atıfta bulunmanızı öneririz. Chocolate veya Scoop’u yükledikten sonra, Hugo’yu aşağıdaki komutlardan birini kullanarak yükleyebilirsiniz (paket yöneticinize bağlı olarak): choco yükleme hugo-extended-confirm kepçe yükleme hugo uzantısı, hugo’nun Hugo’nun olduğunu doğrulamak için doğru şekilde yükleneceğini doğrulamak için nasıl doğru bir şekilde yükleneceğini doğrulamak için True ile yüklü, aşağıdaki komutu çalıştırın: Hugo sürümü Bu terminal komutu, şu anda yüklü olan Hugo sürümü hakkında bilgi görüntüler: Hugo v0.85.0+genişletilmiş darwin/arm64 BuildDate = bilinmeyen komutlar ve yapılandırma Hugo Hugo ile statik site, çeşitli CLI komutlarını ve yapılandırma dosyası parametrelerini tanıyalım. Hugo Cli sipariş etti
Hugo Check – Çeşitli doğrulama sınavlarını çalıştırın
Hugo Config – Hugo sitesi için yapılandırmayı görüntüler
Hugo Convert – İçeriği farklı bir formata dönüştürme
Hugo Dağıtım – Sitenizi Bulut Sağlayıcıya Yayın
Hugo Env – Hugo sürümünü ve çevresel bilgileri görüntüler
Hugo Gen – çeşitli jeneratörlere erişim sağlar
Hugo Yardımı – Bir komutla ilgili bilgileri görüntüler
Hugo Import – Siteleri diğer konumlardan içe aktarmanıza olanak tanır
Hugo Listesi – Çeşitli içerik türlerinin bir listesini görüntüler
Hugo Mod – Manduo modülünün çeşitli yeni modüllerine erişim sağlamak – siteniz için yeni içerik oluşturmanızı sağlar
Hugo Server – Yerel Geliştirme Sunucusu Başlatma
Hugo Sürümü – Mevcut Hugo sürümünü görüntüler
Hugo Cli’nin ayrıca bazı komutlar için ek seçenekleri belirlemek için çeşitli bayrakları var. Hugo bayrağının (çok sayıda) tam bir listesini görmek için, mevcut tüm bayrakların bir listesini görüntülemek için Hugo Yardım komutunu kullanmalısınız.
Hugo Yapılandırma Dosyası Hugo yapılandırma dosyası üç biçimi destekler: YAML, TOML ve JSON. Aynı şekilde, Hugo yapılandırma dosyası config.yml, config.toml veya config.json’dur ve Hugo Project Root dizininde bulabilirsiniz.
Hugo yapılandırma dosyası. Aşağıdaki Hugo Yapılandırma dosyasını yaml formatında görüntüle: defaultConcenTanguage: tr tema: -insta-static-site contentdir: layouts publishdir: public painat: 5 başlık: kinsta statik site açıklaması: “Bu, hugo ile oluşturulan statik bir sitedir. ! ” Permalinks: Post :: Slug/Page :: Slug/Tags: “Tag/: Slug/” Yazar: “Yazar/: Slug/” Daha önce WordPress veya diğer CM’leri kullandıysanız, bazı yapılandırma seçenekleri size tanıdık gelebilir. Örneğin, Kinsta-static-site site temasının adıdır, Kinsta Static Site SEO başlığı meta’dır ve Painatin (sayfa başına yayın sayısı) 5’dir.
Hugo, Hugo’nun resmi belgelerini keşfedebileceğiniz düzinelerce yapılandırma seçeneğine sahiptir.Hugo sitesini geliştirirken küresel yapılandırmada bir değişiklik yapmanız gerekiyorsa, bu yapılandırma dosyasını düzenlemeniz gerekebilir.Hugo Sitesi Nasıl Oluşturulur Şimdi Hugo Cli’yi yüklemek ve kullanarak ve Hugo Configuration dosyasının temellerini kullanarak yeni bir Hugo sitesi oluşturalım.Bir Hugo sitesi oluşturmak için aşağıdaki komutu kullanın (isterseniz sitelerimi başka bir şeye dönüştürmek için tereddüt etmeyin): Hugo yeni site my-hugo-yeni bir hugo sitesi oluşturun.Ardından, site klasörüne gidin, aşağıdaki dosyaları ve klasörleri göreceksiniz: config.toml dosyaları, arketip klasörleri, içerik klasörleri, düzen klasörleri, tema klasörleri, veri klasörleri ve statik klasörler.Bu dosyaların ve klasörlerin her birinin ne olduğunu hızlı bir şekilde tartışalım.
Config.toml hugo dosyası Yukarıda vurgulandığımız gibi, Hugo ana yapılandırma dosyası siteniz için global ayarlar içerir. Hugo archety klasörü klasörü Arketipe, fiyat azaltmada biçimlendirilmiş içerik şablonlarını depoladığınız yerdir. Sitenizin birçok içerik formatı varsa arketip çok kullanışlıdır. Hugo’nun temel deseniyle, sitenizdeki her bir içerik türü için bir şablon oluşturabilirsiniz. Bu, gerekli tüm yapılandırma ayarlarıyla üretilen fiyat azaltma dosyasını doldurmanıza olanak tanır. Örneğin, podcast bölümünü görüntülemek için bir podcast içerik türünüz varsa, archetypes/podcast.md’de aşağıdaki içerikle yeni bir arketip oluşturabilirsiniz: — başlık: “{{rlax .name”-“” ” | Title}} “Tarih: {{.date}} Açıklama:” “Sezon: Bölüm: Taslak: True — Bu podcast’in temel deseniyle, yeni bir yazı oluşturmak için aşağıdaki komutu kullanabilirsiniz: Hugo New Podcast/s1e6_intview-with- kinsta-creo.md Şimdi, yeni oluşturulan bir gönderi açarsanız, şunu göreceksiniz: — Başlık: “Kinsta CEO ile Röportaj” Tarih: 2021-05-20T13: 00+09 : 00 Açıklama: “” Sezon: 1 Bölüm: 6 Taslak:
True — Arketip olmadan, yaptığınız her yeni yazı için ön malzeme parametrelerini manuel olarak belirlemelisiniz. Arketipler ilk başta karmaşık ve gereksiz görünse de, uzun vadede zamanınızın çoğunu kurtarabilirler. Hugo içerik klasörü içerik klasörü gerçek içerik yerinizdir. Hugo, Markdown ve HTML biçimini destekler ve Markdown kullanım kolaylığı nedeniyle daha popüler bir seçenektir. Göndermek için genel bir depolama alanı olmanın yanı sıra, içerik daha fazla göndermek için içerik klasörünü kullanabilirsiniz. Hugo, içerik klasöründeki her üst düzey dizini içeriğin bir parçası olarak ele alır. Hugo’daki içerik bölümü, WordPress’teki özel bir yazı türüne benzer. Örneğin, sitenizin yayınları, sayfaları ve podcast’leri varsa, içerik klasörünüzün çeşitli yayın türleri için içerik dosyasının bulunacağı bir yayın, sayfa ve podcast dizinine sahip olacaktır. Hugo Düzen Düzeni Düzeni Klasörü, sitenizin yapısını belirleyen HTML dosyaları içerir. Bazı durumlarda, Hugo sitesini bir düzen klasörü olmadan görebilirsiniz, çünkü proje kök dizininde olmanız gerekmez ve bunun yerine tema klasöründe olabilirsiniz. Şablon için PHP kullanan WordPress temasına benzer şekilde, Hugo şablonu HTML/Şablon ve Metin/Şablon/Şablon tarafından desteklenen ek dinamik şablonlara sahip temel HTML’den oluşur.

Sitenizin bir işaretleme HTML’sini oluşturmak için gereken çeşitli HTML şablon dosyaları düzen klasördedir. Hugo tema klasörü Dosyaları ve şablon varlıklarını depolamak için daha bağımsız yollar tercih eden siteler için Hugo, tema klasörünü destekler. Hugo teması WordPress temasına benzer, çünkü tema dizininde saklanır ve temanın çalışması için gereken tüm şablonları içerir. Bazı Hugo kullanıcıları kök proje dizinindeki temalarla ilgili dosyaları kaydetmeyi tercih ederken, bu dosyaları tema klasörüne kaydedin, daha kolay yönetim ve paylaşım sağlar. Hugo Veri Klasörleri Hugo Veri Klasörü, site sayfanızı oluşturmak için gereken ek verileri (JSON, YAML veya TOML formatlarında) saklayabileceğiniz bir yerdir. Veri dosyaları, doğrudan içerik veya şablon dosyalarına kaydetmek için pratik olmayabilecek daha büyük veri koleksiyonları için kullanışlıdır. Örneğin, 1960’dan 2020’ye kadar USD enflasyon oranlarının bir listesini yapmak istiyorsanız, verileri temsil etmek yaklaşık 80 satır alır (her yıl için bir satır). Bu verileri doğrudan içerik veya şablon dosyasına koymak yerine, veri klasöründe yapabilir ve gerekli bilgilerle doldurabilirsiniz. Hugo statik klasörü Hugo statik klasörü, ek işlem gerektirmeyen statik varlıkları depoladığınız yerdir. Statik klasörler genellikle Hugo kullanıcılarının resimleri, yazı tiplerini, DNS doğrulama dosyalarını ve daha fazlasını sakladığı yerlerde. Hugo sitesi kolay dağıtım için bir klasörde oluşturulup saklandığında, statik klasördeki tüm dosyalar olduğu gibi kopyalanır.
Neden JavaScript veya CSS dosyalarından bahsetmediğimizi merak ediyorsanız, bunun nedeni, site geliştirme sırasında boru hatları aracılığıyla genellikle dinamik olarak işlenmeleridir. Hugo’da, JavaScript ve CSS dosyaları genellikle ek işlem gerektirdiği için tema klasöründe saklanır. Hugo Sitesine Temalar Nasıl Eklenir ve Hazır Yapılan Bir Tema İndir ve Yükle Hugo ile başlamak için iyi bir yoldur. Hugo teması çeşitli şekil ve boyutlarda mevcuttur ve birçoğu resmi Hugo tema deposunda ücretsizdir. Hugo sitemize popüler Hyde temasını devam edip kuralım. İlk olarak, Terminal’deki Proje Tema Klasörünüze gidin: CD / TEMAS/ SONRAKİ, Hyde temasını proje temanızın dizine klonlamak için git kullanın. Git klonu https://github.com/spf13/hyde.g Sonraki, hyde temasını etkinleştirmek için config.toml dosyanıza aşağıdaki satırı ekleyin: tema = “hyde” Bu noktada, hyde teması yüklenir ve yapılandırılmıştır . Bir sonraki adım, siteyi web tarayıcınızdaki görmek için Hugo Varsayılan Web Geliştirme Sunucusunu başlatmaktır. Hugo Hugo Sitesi nasıl gözden geçirilir geliştirme amacıyla entegre bir web sunucusu ile gönderilir, bu da sitenizi yerel olarak görmek için Nginx veya Apache gibi üçüncü -parti web sunucularını yüklemeniz gerekmediği anlamına gelir. Hugo Web sunucusunu başlatmak için, projenizin kök dizininde aşağıdaki komutu çalıştırın: Hugo Server -d Hugo daha sonra site sayfanızı oluşturacak ve http: // localhost: 1313/: hugo local geliştirme sunucusu adresinde sunacaktır. Web tarayıcınızdaki URL’yi ziyaret ederseniz, Hugo sitenizi Hyde temasıyla göreceksiniz:

Bir Hyde teması ile Hugo Site Ekranı. Varsayılan olarak, Hugo’nun yerel geliştirme sunucusu, siteyi otomatik olarak değiştirecek ve yeniden inşa edecektir. Hugo’yu yapma hızı çok hızlı olduğundan, sitenize güncellemeler neredeyse statik site jeneratörleri dünyasında nadiren görülen gerçek zamanlı olarak görülebilir. Bunu göstermek için Hugo’daki ilk yazımızı oluşturalım. Hugo sitesine içerik nasıl eklenir Hugo sitesine içerik eklendi WordPress veya Ghost gibi tam CM’lerden çok farklıdır. Hugo ile içeriğinizi yönetmek için konjenital CMS katmanı yoktur. Bunun yerine, çeşitli şeyleri isteklerinize göre yönetmeniz ve yönetmeniz beklenir. Başka bir deyişle, Hugo’da içerik yönetimi yapmak için açıkça “doğru” bir yol yoktur. Bu bölümde içerik ekleme ve yönetme yöntemini paylaşacağız, ancak Hugo’yu daha iyi bildiğinizde birçok şeyi değiştirmekten çekinmeyin. Sahip olduğunuz ilk içerik organizasyon aracı olan Hugo’daki Hugo’daki içerik bölümü içerik bölümüdür. Hugo’daki içerik bölümü, WordPress’teki yazı türüne benzer – sadece bir içerik filtresi olarak kullanamazsınız, aynı zamanda özel bir tema oluştururken kimlik olarak da kullanabilirsiniz. Örneğin, bir blog içeriği bölümü klasörünüz varsa, tüm blog yayınlarınızı saklamak ve yalnızca blog yayınları için geçerli olan belirli sayfalar şablonlarını oluşturmak için kullanabilirsiniz. Hugo’da yayınların nasıl eklenmesini hatırlayarak, bir blog göndermek ve biraz içerik eklemek için bir içerik bölümü oluşturalım. Proje İçerik Klasörünüzde Posting adlı yeni bir klasör oluşturun – Bu, İçerik Bölümüdür.
2021 klasörü oluşturarak yayın klasöründe başka bir organizasyon katmanı oluşturalım.Bu noktada, içerik dizininiz şöyle görünecektir:
Hugo İçerik Dizini. Şimdi ilk gönderimizi yapalım. Daha önce tartıştığımız gibi, Hugo içerik için Markdown ve HTML dosyalarını destekler. Genel olarak, fiyat azaltma dosyalarını kullanmak daha iyidir, çünkü yazmak, biçimlendirmek ve okumak daha kolaydır. İçerik/Destekler/2021 klasöründe, .md (fiyat azaltma dosyası uzantısı) ile biten yeni bir dosya oluşturun. İstediğiniz herhangi bir dosya adını verebilirsiniz, ancak Hugo içerik dosyasını adlandırmak için önerilen sözdizimi YYYY-MM-DD-A-SAMPLE-POST.MD’dir. İçerik dosyaları manuel olarak oluşturmanın yanı sıra, aşağıdaki komutla yeni bir yayın oluşturmak için Hugo CLI’yi de kullanabilirsiniz (proje dizininizden komutlar çalıştırdığınızdan emin olun): Hugo Yeni Mesajları/2021/2021-08-30-A-SA-Sample -Post MD, içerik klasörünün yukarıdaki yoldan nasıl kaybolduğuna dikkat edin. Bunun nedeni, Hugo’nun tüm içerik dosyalarının varsayılan olarak içerik klasörünü girmesini düşünmesidir. Yeni içerik dosyasını açarsanız, belgenin üstünde şuna benzeyen birkaç satır meta veri göreceksiniz: — Başlık: “2021 08 30 Bir Örnek Gönderi” Tarih: 2021-08-30T13: 44: 28+09: 00 Taslak: Doğru — YAML’de biçimlendirilmiş bu meta verilere “Ön Malzeme” denir. Otomatik olarak yapılan ön malzeme, Hugo Cli’nin kullanımının önemli faydalarından biridir. Ön, bir yayın için benzersiz bir veri depolama alanıdır (posta adı, veri, taslak durum, etiket, kategori, vb.) Ön malzeme için varsayılan biçimi, temel desenler kullanılarak bölüm başına yapılandırılabilir. Şimdi gönderiye biraz metin ekleyelim. Yayınlar yazarken, içeriğinizin her zaman önün altında olduğundan emin olun:
Bültenin için kaydolun Trafiğimizi%1000’den fazla artırdığımızı biliyor musunuz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Hugo’da bir blog gönderin. İçerik dosyasını kaydettikten sonra, Hugo’nun sitenizi terminalde yeniden inşa ettiğini göreceksiniz. Aşağıdaki ekran görüntülerinde, Hugo’nun tüm siteyi 22 MD’de yeniden inşa ettiğini görebilirsiniz!

Hugo sitesi yeniden inşa edildi. Web tarayıcınızdaki Hugo sitenizi ziyaret ederseniz, yeni bir gönderi göreceksiniz.

Gönderi ile Hugo sitesi. Hugo’da Sayfa Nasıl Eklenir Şimdi Hugo sitemize bir gönderi ekledik, bir sayfa ekleyelim. WordPress de dahil olmak üzere çoğu içerik yönetim sistemi yayınlar ve sayfalar arasında ayrım yapar. Genellikle, gönderi tarihli bir içeriktir, sayfa her zaman yeşil veya statik içerikten oluşur. Bir sayfa oluşturmak için önce sayfa içeriğinin bir kısmına ihtiyacımız var. Bunu yapmak için, Hugo Content klasöründe sayfa adlı bir klasör oluşturun. Bundan sonra, sitenize “yeni” bir sayfa eklemek için aşağıdaki komutu kullanın: Hugo Yeni Sayfalar/Hakkında.md Not Sayfa için adlandırma kuralının yazıdan nasıl farklı olduğuna dikkat edin. Yayınların aksine, sayfa belirli bir tarihe bağlı değildir, bu nedenle üretim tarihini dosya adına dahil etmeye gerek yoktur. Şimdi, “Hakkında” sayfasına birkaç metin ekleyelim:
Hugo’daki sayfa hakkında. Bu noktada, web tarayıcınızda bir sayfa göreceksiniz:

Web tarayıcısındaki sayfalar hakkında.Artık içeriğin iki bölümüne sahibiz – yayın ve sayfalar – sitede nasıl ayarlamalar yapacağınızı tartışalım, örneğin başlıkları ve açıklamaları düzenleme, yan çubuk menüsüne hakkında sayfalar ekleme, kalıcı bağlantı biçimini değiştirme ve sayfayı silme Gönderi yeminden.
Sitenin başlığını ve açıklamasını değiştirmek için yöntemin doğru yönteminin başlığını ve açıklamasının nasıl değiştirileceği Sitenin yapılandırmasına ve/veya aktif temanıza bağlıdır. Hyde teması durumunda, sitenin başlığı ve açıklaması Hugo Configuration dosyasında (config.toml) değiştirilebilir. Bunu biliyoruz çünkü aşağıdaki tema kodu yan bıçakları yapar:

{{.site.title}

{{ile .site.params.descripti}}}}}}}} {{.} } {{else}} hugo için zarif bir açık kaynak ve mobil ilk tema @mdo . Başlangıçta Jekyll için yapılmış. .Menus.main -}} {{.Name}}
{{ – end}}

{ {ile .site.params.copyright}} {{.}} {{else}} {{now.format “2006”}}. Tüm hakları Saklıdır. {{End}}
Odaklanan iki parça şunlardır: {{.site.title}} ve … {{with .site.params.escription}} {{. }} {{else}} hugo için zarif bir açık kaynak ve mobil ilk tema @mdo
.Başlangıçta Jekyll için yapılmış.Örneğin, {{.site.title}} Hugo’ya yapılandırdı.Hugo’nun varsayılan yapılandırması yeni Hugo sitemi sitenin başlığı olarak kullandığından, Sisi Bilah’ın görüntülenmesi budur.Config.toml’deki sitenin başlığını başka bir şeye değiştirirsek, değişiklik ön uçta da görülecektir.Yeni Hugo sitesinden config.toml adresindeki başlık parametresini devam edelim ve Hugo Kinsta sitesi haline getirelim.
Hugo’daki site başlığını değiştirin. Site açıklamasına geçerken, Hugo şablon makinesinin koşullu mantığı desteklediğini görebilirsiniz. Sıradan İngilizce’ye çevrilen aşağıdaki kod, Hugo’ya params değerinin config.toml dosyasındaki açıklama anahtarına ayarlanıp ayarlanmadığını kontrol etmesi talimatını verdi. Değilse, bu kullanım için varsayılan dizedir. {{with .site.params.description}} {{.}} {{else}} için zarif bir açık kaynak ve mobil ilk tema @mdo . Başlangıçta Jekyll için yapılmış. Başlangıçta Jekyll için yapılmış. ” Şimdi config.tom dosyamızı şu adresten güncelleyelim: BaseUrl = “http://example.org/” dilegeCode = “en /example.org/” dilegeCode = “tr Beklendiği gibi, değişiklikler artık ön uçta görülüyor:

Hugo sitesi açıklamasını değiştirin. Sayfaların nasıl silinir Çoğu blogda, ana sayfaya gönderilen yem genellikle yalnızca gönderileri görüntüler. Varsayılan olarak, Hyde teması Gönderi Feed’indeki tüm içerik dosyalarını içerir. Bu davranışı değiştirmek için, ana sayfayı üreten dizin.html şablonundaki aralık işlevini düzenlemeniz gerekir. Hugo işlevi aralığı, bir dizi belirtilen öğeyi tekrarlar ve ardından verilerle bir şeyler yapar. Varsayılan olarak, şablon index.html .site.regularPages ve Filtre verilerini HTML oluşturmadan önce. Çünkü .site.regularPages, Hugo’daki yayınlar ve sayfalar, “Hakkında” Direnders sayfaları dahil tüm sıradan sayfaları içerir. Aralık öğesini .site.regularpages “bölüm” olarak değiştirerek, Hugo’ya yalnızca daha önce oluşturduğumuz yayın klasörlerindeki içerik dosyaları – WordPress siteniz için Güvenli mi? Kinsta, WordPress uzmanlarından tüm bunları ve 7/24 dünya standartlarında desteği sunmaktadır. Planımıza bakın

Şablonu şablonu düzenleyerek şimdi bu değişikliği yapalım: {{tanıma “ana” -}}}
{{-range .site.regularpages -}}

{{.date.format “Pzt, 2 Ocak 2006”}} {{.Summary}} {{if .truncated}
Devamını oku … bunun için {{ – end}}: {{tanıma “ana” -}}
{{ – aralık .site.regularpages “” yazılar ” -}}

{{.title}} .Date.Format “2006-01-02T15: 04: 05Z0700”}} “class =” Post-date “> {{.date.format” Pzt, 2 Ocak 2006 “}} {{. Özet}} {{if .truncated}}
<a href=" {.RelperMalink }Tent }Tent} {{- end}} {{- end}} Bu değişikliği yaptıktan sonra, ana sayfa yalnızca şöyle yayınları görüntüler:

Yayınları yalnızca ana sayfada gösterin. Hugo’da kısmi nasıl kullanılır En güçlü Hugo şablon özelliklerinden biri Parsial – HTML şablonu başka bir HTML şablonuna gömülüdür. Bazıları, her dosyadaki kodu yönetmeden çeşitli şablon dosyalarında kodun yeniden kullanılmasına izin verir. Örneğin, genellikle ayrı bir kısmi dosyada farklı bir sayfa (üstbilgi, altbilgi vb.) Görmek, daha sonra BaseOF.html tema şablonu dosyasına çağrılır. Baseof.html dosyasında Ananke temasındaki, satır 18-{{kısmi “site-style.html” de kısmi bir örnek görebilirsiniz. }} {{kısmi “site-style.html”. }}. Bu durumda, {{kısmi “site-style.html”. }} {{kısmi “site-style.html”. }} Hugo’ya, satır 18’in içeriğini site-style.html ile klasörde /mizanpajlarda /kısmi olarak değiştirmesini öğretmek. /Partials/site-style.html’ye gidersek, aşağıdaki kodu görüyoruz: {{particached “style/getmaincss” “stil/getmaincss”}} {{end}} {{aralık sitesi . }} {{else}}

{{end}} {{end}} Bu kodu ayrı bir dosyaya sökerek, basoof.html şablon dosyası düzenli ve okunması kolay kalabilir. Özellikle temel projeler için kısmi gerekli olmasa da, daha karmaşık işlevselliğe sahip daha büyük projeler için yararlıdır. Hugo Hugo’nun kısa kodunda kısa bir kod nasıl kullanılır, çeşitli sayfalarda kodun yeniden kullanılmasına izin verdiği için kısmi olana benzer. Jortcode, klasör /düzen /kısa kodlarda bulunan bir HTML dosyasıdır. Temel fark, bazılarının HTML şablonları için geçerli olması, kısa kodların fiyat azaltma içerik sayfaları için geçerli olmasıdır. Hugo’da kısa kod, her sayfa için kod değişikliklerini yönetmeden sitenizdeki sayfalarda kullanabileceğiniz işlevsellik modülünü geliştirmenize olanak tanır. Bir blog çalıştırırsanız, büyük olasılıkla yıldan yıla referansı güncellemek için yayınınızın içeriğini kontrol edersiniz. Sitenizde kaç gönderi olduğuna bağlı olarak, bu görev uzun zaman alabilir! İçerik dosyanızdaki Hugo kısa kodunu kullanarak, bir yılın referansını güncelleme konusunda endişelenmenize gerek yok! Aşağıdaki içeriklerle birlikte /layouts/shortcodes/current_year.html içinde bir kısa kodu oluşturarak başlayalım: {{now.format “2006”}} Kısa kod, bu sözdizimiyle – {{chortcode_name>}} ile yayınlanabilir. Bizim durumumuzda, {{}} ile kısa kodu current_year.html’yi çağırabiliriz: — başlık: “2021 08 30 A Örnek Post” Tarih: 2021-08-30T13: 44: 28+09: 00: 00: 00 Taslak: True — Bu gönderi {{ yılda oluşturuldu

}}. Lorem iPsum Dolor oturma amet, seçkin adipiscing kavramı. Finibus curabitur, velit oturma amet vulputate scelerisque, Turpis kütle fringilla nulla, commodo dapibus urna arcu, nunc. Mauris ultrices convallis iPsum eget kolaylığı. Curabitur ut rutrum Sem. Praesent Id nibh non enim mollis porta. Nam Mollis, Quam et Vehicula Tristique, lorem ante laoreet orci, oturma amet congue tortor nibh sit amet leo. Curabitur Lobortis Neque Tumpor, Vestibulum lacus NEC, Cazibe Arcu. Nulla fringilla leo oturma amet PPSUM auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque telasaada neque oturma amet kavram fringilla. FELIS TELLUS CURABITUR, DUI Vel’de Mattis, Vestibulum Tincidunt Metus. Mauris Eget Elite DUI. Etiam Risus Nulla, Ultrisler Vitae Molestie Quis, Magna’da Placerate. Proin Interdum, Orci AC Auctor Ullamcorper, eski Portor Tellus Tortor, Suscipit Luctus Libero Odio Quis Arcu. Phasellus dapibus pellentesque eGet Eget Pulvinar. Proin Vitae Elite Risus. Sed Justo Nulla, Pellentesque AB sıkıca AB, Luctus bibendum magna. Curabitur Mi Id augue egesteas çeşni sed quis lectus. AENEAN FRINGILLA NISL SED TINDIDUNT TRISTIQUE. Cras scelerisque laoreet sapien bir faucibus. Vivamus bir araç arcu. Duis Rutrum, Mass Eu Tincidunt Eleifend, Est Nulla faucibus nisl, Velit’te amet Conceptur Neque Velit. Tamsayı fermentum augue ut orci iaculis aliquet. GRADIDA MAGNA içinde. Web tarayıcısında bir gönderi görürseniz, şu gibi ilk yayınlarda şu anki yılı göreceksiniz:

Cari yılı otomatik olarak üretmek için Hugo kısa kodunu kullanın. WordPress ve diğer eksiksiz içerik yönetim sistemlerinin aksine Hugo’daki yayınlara resimler nasıl eklenir, Hugo görüntüleri yönetmek için bir sürükleme ve bırak sistemi içermez. Böylece, görüntü yönetim sisteminin tasarlanması son kullanıcıya indirilir. Hugo’nun görüntüleri yönetmek için standart bir yolu olmasa da, popüler bir yöntem klasör /statikte görüntü depolamaya bağlıdır ve kısa kodları kullanarak yayınlarda ve sayfalarda referans verir. Hugo’da temel görüntüleri nasıl düzenleyebileceğinizi keşfedelim. Yapmamız gereken ilk şey, görüntü kütüphanemiz için bir organizasyon yapısı oluşturmaktır. Bu karmaşık görünse de, gereken tek şey klasörde /statikte bazı ek dizinlerin oluşturulmasıdır. Di /statik yükleme klasörü oluşturarak başlayalım. Yüklenen klasörde, 2021’de yüklenen tüm resimleri karşılamak için 2021 adlı bir klasör oluşturun. Hugo’daki görüntü yönetimi. Ardından, 2021 klasörüne iki resim (Blue1.jpg ve Blue2.jpg) ekleyelim.
“2021” klasörüne resim ekleyin. HTML’de görüntü kullanılarak görüntülenir. Örneğin, mavi1.jpg görüntülemek için aşağıda HTML kullanabiliriz:

Bu HTML doğrudan içeriğe eklenebilir Dosya Fiyatı Azalan, Yükleme klasöründen herhangi bir görüntü görüntülemek için kullanabileceğiniz kısa bir kod yapmak daha iyidir. Bu şekilde, IMG etiketini güncellemeniz gerekiyorsa, her bir IMG etiketini düzenlemeden kısa bir kod şablonunu düzenleyebilirsiniz. Bir kısa kod şablonu oluşturmak için, aşağıdaki içerikle birlikte /layouts/shortcodes/img.html adresinden yeni bir dosya oluşturun: <div class = "/uploads/ {.get" src "}}" alt = "{.get "Alt"}} Ardından, aşağıdaki kısa kodu blog yazısına ekleyin: {{

} Kısa kod şablonunda {{ {. “Src”}} ve {{{.get “Alt”}} Hugo’ya SRC parametresinden içerik almasını sağladı <ve alt <kısa kodu çağırırken. Bunun gibi bir görüntü:

Hugo’da kısa kod görüntüsü. Hugo Sitesini Nasıl Yayılır Bu gönderiye, Hugo’yu nasıl yükleyeceğinizi, bir site oluşturmayı, temalar ekleyeceğinizi, yapılandırma dosyalarında temel düzenleme yapmayı ve sitenizin işlevselliğini parça ve kısa kodla genişletmeyi öğrendiniz. Bu noktada, çevrimiçi kullanılmaya hazır işlevsel bir siteniz olmalıdır. Hugo statik bir site jeneratörü olduğundan, bir web sunucusuyla her yerde üretir HTML, CSS ve JS’yi uygulayabilirsiniz. Statik siteler sunmak için teknik gereksinimler çok düşük olduğundan, NetLify, Vercel, Cloudflare sayfaları ve daha fazlası gibi çeşitli sağlayıcılarda ücretsiz olarak gönderebilirsiniz. Daha önce, sitemizdeki önizleme değişikliklerini gerçek zamanlı olarak görmek için yerel geliştirme sunucularını çalıştırmak için Hugo Server -D kullandık. Tam bir site üretmek için Hugo komutunu Proje Kök Dizinimizde kullanabiliriz. Siteyi tamamladıktan sonra, proje dizininizde yeni bir genel klasör göreceksiniz. Bu klasörde, Amazon S3 gibi sunucuya veya bulut depolama hizmetine yüklenmesi gereken tüm dosyaları bulacaksınız.

Hugo sitenizi yerel olarak üretin. Sitenizi yerel olarak yapın ve Nginx’i çalıştıran Amazon S3 veya sunucu olarak manuel olarak yükleyin, statik hale getirilen bir site uygulamanın bir yoludur. Ancak, bu en verimli değildir, çünkü her değişiklik yaptığınızda yeni dosyaları manuel olarak yüklemenizi gerektirir. Bunun yerine, daha iyi bir seçenek, Hugo Proje klasörünüzü GitHub’ın deposuna ve GitHub’ın deposunu NetLify gibi otomatik uygulama hizmetlerine bağlamaktır. Bu ayarla, sitenizi düzenleyebilir, GitHub’daki değişiklikleri teşvik edebilir ve manuel müdahale olmadan NetLify’da yeni oluşturma ve uygulamayı tetikleyebilirsiniz. Şimdi, tüm bunları nasıl yapacağınızı keşfedelim! Hugo Projenizi Nasıl Yükleyeceğiniz İlk GitHub’a, projeniz için bir GitHub deposu oluşturmanız gerekir. Bunu yapmak için bir GitHub hesabı oluşturun (yoksa) ve resmi GitHub masaüstü uygulamasını indirin. GitHub uygulamasını yükledikten sonra menü çubuğundaki dosyayı tıklayın ve yeni depo seçin. Seçtiğiniz depoyu adlandırın, şimdilik varsayılan durumda başka bir seçenek bırakın ve depo oluştur’u tıklayın. GitHub’ın deposunu yapın. Varsayılan olarak (macOS’ta), GitHub uygulaması/kullanıcılar/kullanıcı adı/belgeler/github’da yeni bir depo oluşturur. Havuzumuzu My-Hugo-Site adını verdiğimiz için depomuz/kullanıcılar/brianli/belgeler/github/my-hugo sitesinde bulunabilir. Ardından, orijinal proje klasörünüzdeki tüm dosyaları yeni GitHub depo klasörüne taşıyın. Klasörü GitHub’a yüklememiz gerekmediği için genel klasörleri sildiğinizden emin olun.
Projeyi GitHub depo klasörüne kopyalayın. GitHub uygulamasına geri dönerseniz, şimdi değiştirilen dosyaların bir listesini göreceksiniz. GitHub’a bir depo yüklemek için bir özet ekleyin, ana için taahhüt tıklayın ve sağ üst köşedeki yayın deposunu tıklayın. Varsayılan olarak, “Bu Kişisel Kodu Kaydet” seçeneği kontrol edilir. Kodunuzun açık kaynaklı ve kamuya açık olmasını istiyorsanız, işaretlemekten çekinmeyin. Son olarak, bir kez daha yayın deposuna tıklayın.
GitheB deposunuzu yayınlayın. Şimdi, GitHub’a giderseniz, deponuzu çevrimiçi olarak görmelisiniz:

GitHub’da Hugo Proje Deposu. Github Repo’yu NetLify olarak nasıl bağlarsa, zaten bir NetLify hesabınız yoksa, buradan bir tane için kaydolun. Bir GitHub deposunu NetLify’a bağlamak için NetLify panosundaki Git’ten yeni siteyi tıklayın.
Git on NetLify yeni site. Sürekli dağıtım altında GitHub seçeneğini seçin.
Sürekli dağıtım için “GitHub” ı seçin. Ardından, Hugo Proje Repository’nizi bulmak için arama kutusunu kullanın.

Hugo Proje Repository’nizi bulun. Ardından, sürekli dağıtım için ayarları belirtin. NetLify bir Hugo yapılandırmasını algıladığından, varsayılan ayarlar temel bir dağıtım için iyi çalışmalıdır. Hugo’ya daha fazla aşina olduğunuzda, ortam değişkenlerini, özel oluşturma komutlarını ve daha fazlasını araştırabilirsiniz. Şimdilik, Build komutunu Hugo’ya ve genel dizinine halka ayarlamak, basit bir Hugo sitesi dağıtmanıza izin verecektir. Derleme komutunu ve genel dizinini belirttikten sonra, dağıtım sitesini tıklayın.

Hugo sitesini Netlify üzerine yaymak. Hugo çok hızlı bir statik site üreteci olduğundan, uygulaması temel site için sadece birkaç saniye sürer. Uygulama tamamlandıktan sonra, NetLify panosunda sahneleme URL’sini görebileceksiniz. Sitenin uygulandığını görmek için URL’yi tıklatın. Bu Netlify’deki Hugo sitemiz. Gördüğünüz gibi, bu yerel ortamımızdaki sitelerle eş anlamlıdır:

Netlify üzerinde Hugo sitesi. Bu noktada, NetLify tarafından gönderilen site için özel bir etki alanı ve SSL sertifikası hazırlayabilirsiniz. Bunu yapmak için NetLify’ın resmi belgelerine başvurmanızı öneririz. NetLify’ı GitHub’a bağladığımız için, Hugo Project Repo Github’a yeni bir taahhüt, NetLify’da yeni bir uygulamayı otomatik olarak tetikleyecektir! Kısa sürede statik bir site oluşturmaya hazır mısınız? Hugo ile başlayarak Hugo’nun özeti için tıklayın Tweet, dünyanın en popüler statik site jeneratörlerinden biri ve iyi nedenlerle. Sadece süper hızlı yapı işlemesi olmakla kalmaz, aynı zamanda kısmi ve kısa kodu destekleyen güçlü şablon özellikleri ile de gönderilir. Bu öğreticide, Hugo’yu nasıl yapılandıracağınızı, yeni bir proje oluşturmayı, içerik dosyaları ekleyeceğinizi, tema dosyalarını düzenleyeceğinizi ve tamamlanan statik siteleri uygulayacağınızı öğrenirsiniz. Hugo ve özel işlevler, ön malzeme ve BuildPack CSS/JS gibi daha sofistike özellikler hakkında daha fazla bilgi edinmek için Hugo’nun resmi belgelerini okumanızı öneririz. Hugo ve diğer statik site jeneratörleri hakkında ne düşünüyorsunuz? Bize aşağıdaki yorumlarda anlatın!

Hugo ile çok hızlı statik bir site nasıl oluşturulur