Tworzenie niestandardowego układu strony w SharePoint 2013-NavantisNavantis Blog

w moim ostatnim artykule udokumentowałem, jak utworzyć stronę wzorcową w SharePoint 2013. Strony wzorcowe definiują globalne elementy chrome witryny sieci web. W tym artykule wyjaśniono, jak tworzyć niestandardowe układy stron w SharePoint 2013. Aby uzyskać więcej informacji na temat modelu strony SharePoint 2013, zobacz ten artykuł firmy Microsoft.

planowanie układu strony

w tym przykładzie odtworzymy fragment strony na naszej stronie internetowej (www.navantis.com):

w poprzednim artykule stworzyliśmy stronę wzorcową, która zdefiniowała nagłówek, stopkę i globalne arkusze stylów dla tej strony. Teraz stworzymy układ strony, który będzie zgodny z tym podstawowym formatem. Zawartość będzie dynamiczna, dzięki czemu możesz utworzyć dowolną liczbę stron w oparciu o ten układ.

w naszym układzie strony zdefiniujemy następujące obszary jako „kontrolki pól”. Stworzymy je wszystkie w jednym pojemniku i rozłożymy je wyraźnie, aby odzwierciedlić nasz projekt:

ścieżka breadcrumb w lewym górnym rogu możemy użyć ścieżki breadcrumb SharePoint i osadzimy subskrypcję newslettera w układzie strony, ponieważ nie chcemy, aby była ona wyraźnie zdefiniowana w układzie.

Definiowanie typu zawartości

zanim więc wykonamy pracę HTML, stwórzmy typ zawartości (definicję pól zawartości), który definiuje każde z tych pól dla naszej strony. Na podstawie powyższego planu potrzebujemy następujących pól:

  • LargeHeadline
  • RightHandBlurb
  • LeftLinkList
  • LeftColumnTitle
  • LeftColumnText

w każdym przypadku będą to kontrolki HTML. SharePoint 2013 umożliwia definiowanie innych typów zawartości dla tych pól, takich jak obrazy. Obrazy w SharePoint 2013 mogą być renderowane w określonych wymiarach, a SharePoint 2013 dynamicznie renderuje dowolny obraz do określonego, aby upewnić się, że dobrze pasuje do zdefiniowanego układu.

aby utworzyć typ zawartości, Przejdź do ustawień witryny –> typy zawartości witryny (w obszarze Galerie projektantów stron internetowych). Jeśli spojrzysz na typy treści układu strony, zobaczysz istniejące Dla artykułu, katalogu, strony powitalnej itp. Stworzymy typ zawartości dla naszego układu. Kliknij Utwórz i wpisz nazwę nowego typu zawartości:

w obszarze Typ zawartości nadrzędnej możesz wybrać rodzica, od którego będzie dziedziczony Twój typ zawartości. Jeśli spojrzysz na istniejące typy zawartości układu strony, będą one dziedziczone po stronie typu zawartości. Strona znajduje się w grupie publikowanie typów treści. Możesz również określić grupę, którą chcesz umieścić nowy typ zawartości – możesz dodać ją do istniejącej grupy typów zawartości układu strony lub utworzyć własną grupę niestandardową.

po utworzeniu nowego typu zawartości program SharePoint 2013 wyświetli kolumny, które zostały automatycznie odziedziczone z typu zawartości strony. Dodajmy kilka nowych, aby reprezentować nasze pola niestandardowe. Kliknij na kolumnę Dodaj z nowej strony i dodajmy każde pole:

dla każdej kolumny możemy określić typ. Dla tych pól, które chcemy jawnie stylizować, możemy użyć opcji pojedynczego wiersza tekstu, aby Autor treści umieścił w zwykłym tekście, który będzie sformatowany przez szablon. Dla tych pól, które chcemy zapewnić większą kontrolę autorowi treści, możemy określić pole jako pełną zawartość HTML, a następnie Autor treści będzie mógł umieścić w dowolnym HTML za pomocą edytora tekstu sformatowanego. W naszych dziedzinach wykorzystajmy to podejście:

    • LargeHeadline-pojedynczy wiersz tekstu
    • RightHandBlurb – wiele wierszy tekstu
    • LeftLinkList-pełny HTML
    • LeftColumnTitle-pojedynczy wiersz tekstu
    • LeftColumnText-pełny HTML
    • RightColumnText-pełny HTML

dla każdego pola Utwórz kolumnę witryny.

teraz mamy pola do przechowywania treści, stwórzmy teraz układ strony.

tworzenie układu strony

aby utworzyć układ strony, Przejdź do Menedżera projektu i kliknij 6. Edytuj Układy Stron. Kliknij Utwórz układ strony. Nadaj układowi strony nazwę, Wybierz stronę wzorcową i typ treści, który właśnie utworzyłeś.

jeśli przejrzysz układ strony, zobaczysz, że nie wygląda on zbyt wiele – musimy zaktualizować kod HTML wokół kontrolek pól, aby poprawnie sformatować układ.

publikowanie układu strony

zanim będziesz mógł użyć układu strony, musi on zostać opublikowany. Aby opublikować układ strony, Przejdź do ustawień witryny –> strony wzorcowe i układy stron. Zobaczysz dwa pliki-jeden to HTML, a drugi ASPX. w SharePoint 2013 HTML jest teraz mistrzem i można go edytować za pomocą edytora HTML. SharePoint 2013 automatycznie generuje plik ASPX. Aby opublikować swój układ, kliknij plik HTML, a następnie opublikuj:

spowoduje to opublikowanie zarówno plików HTML, jak i ASPX, a teraz udostępni je do utworzenia strony opartej na układzie.

Tworzenie strony

aby utworzyć stronę opartą na naszym nowym układzie, przejdź do nowej strony.

po przejściu na stronę – > Layouty strony nasz nowy Layout znajdziesz na liście dostępnych layoutów strony. Po przełączeniu układu strony powinny być teraz widoczne wszystkie pola, które wcześniej utworzyliśmy w naszym typie zawartości.

możesz wypełnić swoją treść, wpisując ją lub kopiując i wklejając z istniejącej witryny internetowej lub z dokumentów biurowych, takich jak Word. Kopiowanie i wklejanie znacznie się poprawiło w stosunku do poprzednich wersji!

oto moja treść wypełniona:

teraz możemy opublikować naszą stronę…

nasza zawartość tam jest, ale układ nie odzwierciedla tego, co my want…so teraz edytuj HTML, aby zaktualizować nasz układ.

dostosowywanie Układów Stron

układy stron w SharePoint 2013 to tylko pliki HTML z wieloma dodatkowymi znacznikami określającymi, gdzie zostaną wstrzyknięte kontrolki. Możemy teraz dostosować plik HTML za pomocą menedżera projektu. Możesz po prostu pobrać kopię pliku HTML, wprowadzić zmiany i ponownie przesłać plik, a SharePoint 2013 zrobi resztę. Istnieją dwa sposoby pobierania pliku:

  • przejdź do Menedżera projektu – > 3. Prześlij pliki projektu i zmapuj dysk sieciowy do katalogu stron wzorcowych.
  • przejdź do ustawień witryny – > strony wzorcowe i układy stron i możesz pobrać swój plik.

po kilkukrotnym powtórzeniu układu strony i przeniesieniu fragmentów udostępnionych przez SharePoint 2013 w odpowiednie miejsca, mamy teraz ładnie sformatowaną stronę:

Cała zawartość w obszarze strony głównej jest w pełni zarządzana przez SharePoint może być łatwo zmieniona przez autora treści.

this post was written by Chris Woodill
Christopher Woodill is the Vice President, Public Sector for Navantis. Z ponad 15-letnim doświadczeniem w planowaniu, zarządzaniu i wdrażaniu strategii technologicznych zarówno w sektorze publicznym, jak i prywatnym, Christopher jest odpowiedzialny za sprzedaż sektora publicznego, strategię i dostarczanie rozwiązań dla naszych klientów w służbie zdrowia, rządzie, gminach i edukacji.

Write a Comment

Twój adres e-mail nie zostanie opublikowany.