Öğretici: Sitenize özel sayfa düzeni ekleme

Sayfalar çalışma alanını kullanarak yeni Web sayfaları oluşturduğunuzda, sağlanan sayfa düzenleri seçeneğiniz vardır. Bazı durumlarda belirli bir biçimdeki bilgileri görüntülemek veya özel bir kullanıcı arabirimi sağlamak için özel bir sayfa düzeni oluşturmak isteyebilirsiniz.

Bu öğreticide, Liquid kullanarak özel bir sayfa düzeni oluşturmayı öğreneceksiniz.

Örnek senaryomuz, sol taraftaki gezinti olarak bir ana site menüsü, sayfa içeriğini de sağ tarafta gösterecek olan basit bir iki sütunlu şablon oluşturmak.

Özel sayfa düzeni hazırlamak için oluşturulacak adımlar ve varlıklar şunlardır:

• Temel sayfa düzeni oluşturmak için özel kod içeren genel bir temel web şablonu oluşturacağız.
• Web şablonlarının modüler özelliklerini göstermek için ek kod içeren ikinci bir web şablonu oluşturacağız.
• Ayrıca, web şablonuna başvuruda bulunan ve sayfa düzeninin sitede nasıl işleneceğini yapılandıracak bir sayfa şablonu kaydı da oluşturacağız.
• Son olarak, özel sayfa düzenini kullanarak bir web sayfası oluşturacağız.

Önkoşullar

• Power Pages aboneliği veya denemesi. Buradan Power Pages denemesi edinin.
• Oluşturulmuş bir Power Pages sitesi. Power Pages sitesi oluşturma.
• Temel HTML ve Liquid bilgisi.

Adım 1: Web şablonu oluşturun ve Liquid şablon kodunu yazın

İlk olarak, web şablonumuzu oluşturacağız ve Liquid şablon kodumuzu yazacağız. Bu şablonun bazı ortak öğelerini, gelecekteki şablonlarda da yeniden kullanma ihtimalimiz yüksek. Bu nedenle, daha sonra belirli şablonumuzla genişleteceğimiz bir ortak temel şablon oluşturacağız. Temel şablonumuz içerik haritası bağlantılarını, sayfa başlığımızı/üstbilgimizi sağlayacak ve iki sütunlu düzenimizi tanımlayacaktır.

1. Şuraya git: Power Pages.

2. tasarım stüdyosunda ... simgesini ve Portal Yönetimi'ni seçin. Web şablonu kaydı oluşturmak ve özel kodunuzu girmek için Portal Yönetimi uygulamasını kullanmanız gerekir.

   

3. Portal Yönetimi uygulamasında İçerik bölümüne gidin ve Web Şablonları'nı seçin.

4. Etkin Web Şablonları ekranından Yeni'yi seçin.

5. Web şablonunu İki Sütunlu Düzen olarak adlandırın.

   

6. Kaynak alanına aşağıdaki kodu yapıştırın.

   İki Sütunlu Düzen (Web Şablonu)

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. Kaydet'i seçin.

Adım 2: Temel düzen şablonumuzu genişleten yeni bir web şablonu oluşturun

İlişkili web sayfasından gezinti kaydını okuyacak (aşağıya bakın) bir web şablonu oluşturacağız. Ayrıca, önceki adımda oluşturduğunuz temel şablonu da genişleteceğiz. Web şablonları, gelişmiş siteler oluştururken yeniden kullanılabilir bileşenler olarak kullanılabilir.

1. Portal Yönetimi uygulamasında İçerik bölümüne gidin ve Web Şablonları'nı seçin.

2. Etkin Web Şablonları ekranından Yeni'yi seçin.

3. Web şablonu Web Bağlantıları Sol Gezinti olarak adlandırın.

   

   Weblinks Sol Gezinti (Web Şablonu)

   Kodun, temel düzen şablonunu birleştirmek için Liquid extends anahtar sözcüğünü nasıl kullandığına dikkat edin.

   {% extends 'Two Column Layout' %}
   
   {% block sidebar %}
     {% assign weblinkset_id = page.adx_navigation.id %}
     {% if weblinkset_id %}
       {% assign nav = weblinks[page.adx_navigation.id] %}
       {% if nav %}
         <div class=list-group>
           {% for link in nav.weblinks %}
             <a class=list-group-item href={{ link.url }}>
               {{ link.name }}
             </a>
           {% endfor %}
         </div>
       {% endif %}
     {% endif %}
   {% endblock %}
   
   {% block content %}
     <div id="mainContent" class = "wrapper-body" role="main">
       {% include 'Page Copy' %}
     </div>
   {% endblock %}
   

Adım 3: Web şablonunu temel alan yeni bir sayfa şablonu oluşturun

Bu adımda önceki adımda oluşturduğumuz web şablonunu temel alan yeni bir sayfa şablonu oluşturacağız. Özel sayfa düzenimizin, yeni bir web sayfası oluştururken seçebileceğiniz bir seçenek olması için sayfa şablonu gereklidir.

1. Portal Yönetimi uygulamasında Web sitesi bölümüne gidin ve Sayfa Şablonları'nı seçin.

2. Etkin Sayfa Şablonları ekranından Yeni'yi seçin.

3. Alanları doldurun.

   Alan	Değer
   Veri Akışı Adı	Ad girin.
   Web sitesi	Temanın uygulanacağı web sitesini seçin. Kullanılabilir seçeneklerin listesini görüntülemek için imlecinizi alana yerleştirin ve klavyenizde Enter tuşuna basın.
   Türü	Web Şablonu seçin
   Web Şablonu	Web Bağlantıları Sol Gezinti'yi seçin (veya web şablonunuza verdiğiniz adı).
   Web Sitesi Üst Bilgisini ve Alt Bilgisini Kullan	İşaretlendi.
   Varsayılan	İşareti kaldırıldı.
   Tablo Adı	Seçim yapılmadı.
   Tanım	Sayfa şablonunuza ilişkin bir açıklama.

   

4. Kaydet'i seçin.

Adım 4: İçeriğin görüntüleneceği bir web sayfası oluşturun

1. Tasarım stüdyosunda Eşitle'yi seçin. Bu işlem, Portal Yönetimi uygulamasında yapılan güncelleştirmeleri tasarım stüdyosuna getirir.

2. Sayfalar çalışma alanında + Sayfa'yı seçin.

3. Sayfa ekle iletişim kutusunda:

   1. Sayfa adı girin
   2. Özel düzenlerden, özel sayfa düzeninizi seçin.
   3. Ekle'yi seçin.

   

4. Sayfanın düzenlenebilir bölümlerine daha fazla içerik ekleyin.

Ek sayfa yapılandırması

Bu örnekte, özel kodumuzun sol gezinti bölmesinde menüyü oluşturması için gezinti kaydını içerik sayfasına bağlamamız gerekir.

1. tasarım stüdyosunda ... simgesini ve Portal Yönetimi'ni seçin. Sayfanıza ek yapılandırma eklemek için Portal Yönetimi uygulamasını kullanırsınız.

2. Portal Yönetimi uygulamasında İçerik bölümüne gidin ve Web Sayfaları'nı seçin.

3. Daha önce Sayfalar çalışma alanında oluşturduğunuz sayfayı bulun ve açın. Bu, kök web sayfasını açar. İlgili yerelleştirilmiş içerik sayfasında değişikliklerimizi yapmamız gerekir.

4. Aşağıya gidin ve Yerelleştirilmiş İçerik bölümünde yerelleştirilmiş içerik web sayfasını seçin.

   

   Not

   Sağlanan birden çok dil varsa her bir yerelleştirilmiş sayfayı güncelleştirmeniz gerekir.

5. Çeşitli bölümüne gidin ve Gezinti alanında görüntülemek istediğiniz web bağlantısı kümesini seçin.

   

6. Yaptığınız değişiklikleri kaydedin ve tasarım stüdyosuna geri dönün.

7. Yan gezinti uygulanmış özel sayfanızı görüntülemek için Önizleme ve Masaüstü'nü seçin.

   

Ayrıca bkz.

• Özel sayfa düzeni oluşturma
• Liquid'e genel bakış