Hugo'da Yerleşik Şablonlar Nasıl Kullanılır: Adım Adım Kılavuz

Yayınlanan: 2024-11-27

Hugo, geliştiricilerin ve içerik oluşturucuların hızla hızlı ve ölçeklenebilir web siteleri oluşturmasına olanak tanıyan güçlü bir statik site oluşturucudur. Hugo'nun temel özelliklerinden biri, içeriğin yapılandırılmasına ve sitenin görünüm ve hissinin özelleştirilmesine yardımcı olan şablon oluşturma sistemidir. Hugo'da yeniyseniz veya şablon oluşturma özelliklerinden daha etkili bir şekilde yararlanmak istiyorsanız, bu adım adım kılavuz size Hugo'da yerleşik şablonların nasıl kullanılacağını gösterecektir.

Hugo'daki Şablonlar Nelerdir?

Hugo'daki şablonlar, sitenizdeki içeriğin nasıl oluşturulacağını tanımlayan dosyalardır. Web sitenizin düzenini özelleştirmenize olanak tanıyan HTML, CSS ve Hugo'ya özgü kodlardan oluşurlar. Şablonlar, üstbilgi, altbilgi, tek sayfa, liste ve daha fazlasını oluşturmak gibi çeşitli amaçlarla kullanılabilir.

Sorunu Anlama Onay Kutusu Gösterilmiyor

Hugo, tema yapısının bir parçası olan yerleşik şablonlara sahiptir ve ayrıca daha fazla esneklik için özel şablonlar oluşturmanıza da olanak tanır. Bu şablonlar içerik türüne, URL yapısına ve diğer değişkenlere göre otomatik olarak uygulanarak karmaşık sitelerin yönetimini kolaylaştırır.

Adım 1: Hugo'yu yükleyin ve Yeni Bir Site Oluşturun

Şablonlara dalmadan önce öncelikle Hugo'yu kurmanız ve sitenizi kurmanız gerekiyor. İşte bunu nasıl yapacağınız:

  1. Hugo'yu yükleyin :
    • Hugo'yu yüklemediyseniz işletim sisteminize uygun resmi kurulum kılavuzunu izleyin: Hugo'yu Kurmak.
  2. Yeni bir Hugo Sitesi Oluşturun :
    • Yeni bir site oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:
       hugo new site mysite
    • Bu, Hugo projeniz için temel dosya yapısına sahip mysite adında yeni bir dizin yaratacaktır.

2. Adım: Tema Ekle

Hugo, içeriğin nasıl görüntülendiğini yönetmek için temalarla çalışır. Hugo Temalarından mevcut bir temayı kullanabilir veya özel bir tema oluşturabilirsiniz. Kolaylık sağlamak için Hugo tema kitaplığından bir tema kullanalım.

  1. Bir Tema Ekle :
    • Bir temayı themes/ dizininize kopyalayarak ekleyebilirsiniz. Örneğin “Ananke” temasını kullanalım:
       git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  2. Temayı Yapılandırın :
    • config.toml dosyanızı açın ve temayı ayarlayın:
       theme = "ananke"

Adım 3: Hugo Şablon Yapısını Anlayın

Hugo'nun şablon oluşturma sistemi Go şablonlama diline dayanmaktadır. Şablonlar amaçlarına göre çeşitli kategorilere ayrılmıştır:

  • Temel Şablonlar : Bunlar içeriği saran kapsayıcı şablonlardır. Genellikle üstbilgiler, altbilgiler ve gezinme gibi ortak bölümleri içerirler.
  • İçerik Şablonları : Bunlar, bireysel içerik türlerinin (örneğin, blog yazıları, sayfalar, bölümler) nasıl görüntüleneceğini tanımlar.
  • Liste Şablonları : Bu şablonlar içerik gruplarının nasıl sunulacağını kontrol eder (örneğin, blog gönderilerinin listesi).
  • Kısmi Şablonlar : Bunlar, ana şablonlara dahil edilen daha küçük yeniden kullanılabilir parçacıklardır (örneğin, gezinme çubuğu veya alt bilgi).

Ortak Şablon Dizinleri

  • layouts/ : index.html , single.html vb. gibi tüm düzen dosyalarını içerir.
  • themes/ : Seçtiğiniz temayla birlikte gelen şablonları içerir.
  • content/ : İçerik dosyalarınızı saklar (genellikle Markdown'da yazılır).

4. Adım: Şablon Oluşturun

Bir sayfa için şablonun nasıl oluşturulacağını ve değiştirileceğini keşfedelim.

  1. Yeni İçerik Dosyası Oluşturun :
    • Yeni bir sayfa (örneğin bir blog yazısı) oluşturmak için aşağıdaki komutu kullanın:
       hugo new posts/my-first-post.md
    • Bu content/posts/ içinde ön madde (YAML veya TOML) ve içeriğiniz için bir yer tutucu içeren yeni bir Markdown dosyası oluşturur.
  2. Tek Sayfalar için Şablon Oluşturun :
    • layouts dizininde, layouts/_default/ içinde single.html adlı bir dosya oluşturun. Bu, bireysel içerik sayfalarının nasıl görüntüleneceğini kontrol edecektir.
       <!-- layouts/_default/single.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
    • Bu şablon, oluşturduğunuz herhangi bir sayfanın başlığını ve içeriğini gösterecektir.
  3. Liste Şablonu Oluşturun :
    • Benzer şekilde, birden fazla içerik öğesini (örneğin, bir gönderi listesi) görüntülemek için bir liste şablonu oluşturabilirsiniz. layouts/_default/ dizininde bir list.html oluşturun.
       <!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>

Adım 5: Şablonları Özelleştirme

Hugo'nun zengin şablon oluşturma işlevleriyle şablonlarınızı geliştirebilirsiniz. Örneğin, özel CSS, döngüsel değişkenler veya format tarihleri ​​ekleyebilirsiniz:

  • CSS Ekleme : Bir CSS dosyasını şablonunuza bağlayabilirsiniz:
     <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
  • Tarihleri ​​Biçimlendir : Tarihleri ​​belirli bir biçimde görüntülemek için date işlevini kullanın:
     <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>

6. Adım: Sitenizi Yayınlayın ve Önizleyin

Şablonlarınız hazır olduğunda ve içerik ekledikten sonra sitenizi yerel olarak önizleyebilirsiniz:

 hugo server

Sitenizi görüntülemek için http://localhost:1313 adresine gidin.

Hugo Şablonları hakkında SSS

1. Hugo'daki “layouts” dizininin amacı nedir?

layouts dizini, tüm şablon dosyalarınızı Hugo'da sakladığınız yerdir. Sitenizin ön ucunda farklı içerik türlerinin (örneğin, gönderiler, sayfalar, listeler) nasıl görüntüleneceğini tanımlamak için kullanılır. Şablonlar, tek tek içerik sayfaları için single.html ve içerik listeleri için list.html gibi türe ve konuma göre düzenlenir.

2. Hugo'da kendi özel şablonlarımı oluşturabilir miyim?

Evet, Hugo'da özel şablonlar oluşturabilirsiniz. Şablonlarınızı layouts dizinine yerleştirerek belirli içerik türleri, bölümler ve hatta benzersiz içerik görünümleri için özel şablonlar oluşturabilirsiniz. Hugo ayrıca seçtiğiniz temanın varsayılan şablonlarını geçersiz kılmanıza da olanak tanır.

3. Hugo içerik dosyalarını ve şablonlarını nasıl kullanıyor?

Hugo, içerik dosyalarının (Markdown veya diğer formatlarda yazılmış) nasıl görüntüleneceğini tanımlamak için şablonlarla eşleştirildiği bir sistem kullanıyor. İçerik oluşturduğunuzda (örneğin bir blog yazısı), Hugo otomatik olarak uygun bir şablon arar (örneğin, single.html ) ve içeriği bu şablonu kullanarak işler. Hugo ayrıca içeriğin farklı şablonlar kullanabilen bölümler halinde düzenlenmesini de destekler.

4. Hugo'daki kısmi şablonlar nelerdir?

Kısmi şablonlar, diğer şablonlara eklenebilen yeniden kullanılabilir bileşenler veya HTML parçacıklarıdır. Örneğin, bir üst bilgi, alt bilgi veya gezinme menüsü kısmi olarak oluşturulabilir ve {{ partial "header.html" . }} sözdizimi. Bu, DRY (Kendinizi Tekrar Etmeyin) ilkelerinin korunmasına yardımcı olur ve sitenin yönetimini kolaylaştırır.

5. Hugo şablonlarını özel bir temayla kullanabilir miyim?

Evet, Hugo'da özel temalar kullanabilirsiniz. Kendi temanızı oluşturabilir veya Hugo tema deposundaki mevcut bir temayı kullanabilirsiniz. Mevcut bir temayı kullanıyorsanız, özel şablonlarınızı layouts dizinine ekleyerek şablonlarını geçersiz kılabilirsiniz; bu, tüm yapıyı değiştirmeden temanın belirli kısımlarını değiştirmenize olanak tanır.

Bu adımları izleyerek ve Hugo'nun şablon oluşturma sistemini anlayarak güçlü, özelleştirilebilir web siteleri oluşturabilirsiniz. İster yerleşik şablonlar kullanıyor olun ister kendinizinkini oluşturuyor olun, Hugo statik siteleri kolaylıkla geliştirmek için gereken esnekliği ve hızı sağlar.