Skapa en anpassad Sidlayout i SharePoint 2013-NavantisNavantis Blog

i min senaste artikel dokumenterade jag hur man skapar en huvudsida i SharePoint 2013. Huvudsidor definierar de globala chrome-elementen på din webbplats. I den här artikeln beskrivs hur du skapar anpassade sidlayouter i SharePoint 2013. Mer information om sidan SharePoint 2013-modellen finns i den här Microsoft-artikeln.

planera din sidlayout

för det här exemplet kommer vi att återskapa en bit av en sida på vår webbplats (www.navantis.com):

i vår tidigare artikel skapade vi huvudsida som definierade sidhuvud, sidfot och globala stilark för den här sidan. Nu ska vi skapa en sidlayout som följer detta grundläggande format. Innehållet kommer att vara dynamiskt så att du kan skapa så många sidor du vill baserat på den här layouten.

i vår sidlayout kommer vi att definiera följande områden som”fältkontroller”. Vi kommer att skapa dem alla i en enda innehållsbehållare och lägga ut dem uttryckligen för att återspegla vår design:

brödsmulan längst upp till vänster kan vi använda SharePoints brödsmulspår och vi kommer att bädda in nyhetsbrevsprenumerationen i sidlayouten eftersom vi inte vill att detta uttryckligen ska definieras i layouten.

definiera din innehållstyp

så innan vi gör HTML-arbetet, låt oss skapa en innehållstyp (en definition för innehållsfält) som definierar vart och ett av dessa fält för vår sida. Baserat på ovanstående plan behöver vi följande fält:

• LargeHeadline
• Högerhandblurb
• Vänsterlänklista
• Vänsterkolumntitle
• Vänsterkolumntext
• Högerkolumntext

i varje fall är dessa kommer att vara HTML-kontroller. Med SharePoint 2013 kan du definiera andra typer av innehåll för dessa fält, till exempel bilder. Bilder i SharePoint 2013 kan renderas i specifika dimensioner och SharePoint 2013 kommer dynamisk återge en bild som anges för att säkerställa att de passar fint i din definierade layout.

för att skapa en innehållstyp, gå till Webbplatsinställningar –> Webbplatsinnehållstyper (under Webbdesignergallerier). Om du tittar på Sidlayoutinnehållstyper ser du befintliga för artikel, katalog, välkomstsida etc. Vi kommer att skapa en innehållstyp för vår layout. Klicka på Skapa och skriv in ett namn för din nya innehållstyp:

Under Föräldrainnehållstyp kan du välja den förälder som din innehållstyp kommer att ärva från. Om du tittar på de befintliga sidlayoutinnehållstyperna ärver de från sidan innehållstyp. Sidan är i gruppen publicera Innehållstyper. Du kan också ange den grupp du vill placera din nya innehållstyp – du kan lägga till den i gruppen befintliga Sidlayout Innehållstyper eller skapa din egen anpassade grupp.

när du har skapat din nya innehållstyp visar SharePoint 2013 de kolumner som ärvdes automatiskt från Sidinnehållstypen. Låt oss lägga till några nya för att representera våra anpassade fält. Klicka på kolumnen Lägg till från ny webbplats och låt oss lägga till varje fält:

för varje kolumn kan vi ange typen. För de fält som vi uttryckligen vill stila kan vi använda alternativet Enkel textrad för att få innehållsförfattaren att lägga i vanlig text som formateras av mallen. För de fält som vi vill ge mer kontroll till innehållsförfattaren kan vi ange fältet som fullständigt HTML-innehåll och sedan kan innehållsförfattaren lägga in valfri HTML med rich text editor. För våra fält, låt oss använda detta tillvägagångssätt:

• LargeHeadline-enda textrad
• RightHandBlurb-flera textrader
• LeftLinkList-Full HTML
• LeftColumnTitle-enda textrad
• LeftColumnText-Full HTML
• RightColumnText-Full HTML

skapa en webbplatskolumn för varje fält.

nu har vi fält för att lagra innehållet, låt oss nu skapa en sidlayout.

skapa en sidlayout

för att skapa en sidlayout, gå till Designhanteraren och klicka på 6. Redigera Sidlayouter. Klicka på Skapa en sidlayout. Ge din sidlayout ett namn, välj din huvudsida och din innehållstyp du just skapade.

om du förhandsgranskar din sidlayout ser du att den inte ser ut så mycket – vi måste uppdatera HTML runt fältkontrollerna för att formatera layouten korrekt.

publicera din sidlayout

innan du kan använda din sidlayout måste den publiceras. För att publicera din sidlayout, gå till Webbplatsinställningar –> huvudsidor och sidlayouter. Du kommer att se två filer-en är HTML och en är ASPX. i SharePoint 2013 är HTML nu master och du kan redigera den med en HTML-redigerare. SharePoint 2013 genererar sedan ASPX-filen automatiskt. För att publicera din layout, klicka på HTML-filen och sedan publicera:

detta publicerar både HTML-och ASPX-filerna och gör dem nu tillgängliga för att skapa en sida baserat på din layout.

skapa en sida

för att skapa en sida baserat på vår nya layout, gå till ny sida.

om du sedan går till Page – > sidlayouter hittar du vår nya Sidlayout i listan över tillgängliga sidlayouter. När du byter sidlayout bör du nu se alla fält som vi skapade tidigare i vår innehållstyp.

du kan fylla i ditt innehåll antingen genom att skriva in det eller kopiera och klistra in det från din befintliga webbplats eller från office-dokument som Word. Kopiera och klistra in har förbättrats dramatiskt jämfört med tidigare versioner!

här är mitt innehåll nu fyllt i:

nu kan vi publicera vår sida…

vårt innehåll finns där, men layouten återspeglar inte vad vi want…so redigera nu HTML för att uppdatera vår layout.

anpassa sidlayouter

sidlayouter i SharePoint 2013 är bara HTML-filer med mycket ytterligare markering för att ange var kontrollerna ska injiceras. Vi kan nu anpassa HTML-filen via designhanteraren. Du kan helt enkelt ta en kopia av HTML-filen, göra dina ändringar och åter ladda upp filen och SharePoint 2013 kommer att göra resten. Det finns två sätt att ta tag i filen:

• gå till Design Manager –> 3. Ladda upp designfiler och mappa en nätverksenhet till din huvudsida katalog.
• gå till Webbplatsinställningar –> huvudsidor och sidlayouter och du kan ladda ner filen.

efter att ha upprepat några gånger med sidlayouten och flyttat utdragen från SharePoint 2013 till lämpliga platser har vi nu en snyggt formaterad sida:

Allt innehåll inom huvudsidan området är helt hanteras av SharePoint kan enkelt ändras av ett innehåll författare.