Share Point 2013 ile birlikte HTML sayfalarını da master page olarak kullanabiliyoruz. Master page içerisindeki Share Point kontrollerine bulaşmadan doğrudan HTML dosyası üzerinde çalışarak master page design edebiliriz.

Örnek olarak bir HTML tempalet’imiz olsun. Template’imizin style dosyası css adlı bir klasörde, tasarımda kullanılan resimler images adında bir klasörde tutulmaktadır. SharePoint Designer’da portalimizi açıp Site Objects’ten Master Pages’i tıklayalım ve HTML dosyası ile tasarım dosyalarını
kopyalayıp, buraya yapıştıralım.

SharePoint Designer ile HTML ve Tasarım Dosyalarını Yükleme
SharePoint Designer ile HTML ve Tasarım Dosyalarını Yükleme

Şimdi portalimizden Site Settings/Design Manager’ı tıklayalım. Açılan sayfada Edit Master Pages’i tıklayalım. Açılan sayfada “Convert an HTML file to a SharePoint master page” linki görünecektir.

Convert an HTML file to a SharePoint master page
Convert an HTML file to a SharePoint master page

Linke tıkladığımızda convert etmek istediğimiz HTML sayfasını seçmemizi isteyen ekran gelecektir. HTML dosyamızı seçip, ekliyoruz. Edit Master Pages sayfasını refresh ettiğimizde HTML dosyamız ile aynı isimde master page’in eklendiğini göreceksiniz. SharePoint Designer’a geçip Master Pages’i kontrol ettiğimizde HTML dosyamızla aynı isimde “.master” uzantılı master page dosyasının oluşturulduğunu göreceksiniz.

HTML Master Page
HTML Master Page

Tasarım ile ilgili düzenlemeleri master page dosyasında değil HTML dosyasında yapıyoruz. HTML dosyasını kaydettiğimizde yapılan değişiklikler otomatik olarak master page’e yansıyacaktır.

Portalimizde, Edit Master Pages sayfasına dönüp oluşturulan master page’i tıkladığımızda preview sayfası açılacaktır.

Preview
Preview

Yukarıda görünen sarı dikdörtgen örnek bir content alanıdır. SharePoint Designer’da, HTML dosyamızı Edit File in Advanced Mode’a tıklayarak açtığımızda en altta bu master page’den türetilecek sayfaların içeriklerini yerleştirmek için kullanılan Content Place Holder code snippet’ı görünecektir. Code snippet’taki ID’leri değiştirerek master page’de copy-paste ile  birden fazla Content Place Holder kullanabiliriz.

<div data-name=”ContentPlaceHolderMain”>
                    <!–CS: Start PlaceHolderMain Snippet–>
                    <!–SPM:<%@Register Tagprefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c”%>–>
                    <!–MS:<SharePoint:AjaxDelta ID=”DeltaPlaceHolderMain” IsMainContent=”true” runat=”server”>–>
                        <!–MS:<asp:ContentPlaceHolder ID=”PlaceHolderMain” runat=”server”>–>
                            <div style=”border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;”>
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
                            </div>
                        <!–ME:</asp:ContentPlaceHolder>–>
                    <!–ME:</SharePoint:AjaxDelta>–>
                    <!–CE: End PlaceHolderMain Snippet–>
       </div>

Yukarıda preview sayfasının görüntülendiği ekran görüntüsünde de göründüğü gibi preview ekranının sağ üst köşesinde Snippets linki görünmektedir. Snippets linkine tıkladığımızda bir çok kontrolün code snippet’ını üreten sayfa açılacaktır.

Snippets
Snippets

Açılan sayfada, HTML içerisinde kullanacağımız kontrollerin kodları üretilir. Yapmamız gereken, HTML tasarımımıza eklememiz gereken kontrolü seçip, sağ tarafta kontrol ile ilgili düzenlemeleri yaptıktan sonra Update’e tıklayarak code snippet’ı update etmek ve HTML Snippet altındaki textbox’taki kodu kopyalayıp HTML tasarımında yerine yapıştırmaktır. Title, Logo, Navigation, Sign In kontrollerinden custom web partlara kadar bir çok nesneyi code snippet olarak HTML sayfasında yani master page’de  kullanabiliriz.

Sonraki yazıda görüşmek üzere.

Reklamlar