Nel mio ultimo articolo, ho documentato come creare una pagina master in SharePoint 2013. Le pagine master definiscono gli elementi globali di Chrome del tuo sito web. Questo articolo spiega come creare layout di pagina personalizzati in SharePoint 2013. Per ulteriori informazioni sul modello di pagina SharePoint 2013, consultare questo articolo di Microsoft.
Pianificazione del layout di pagina
Per questo esempio, ricreeremo un pezzo di una pagina sul nostro sito web (www.navantis.com):
Nel nostro precedente articolo, abbiamo creato la pagina principale che definiva l’intestazione, il piè di pagina e i fogli di stile globali per questa pagina. Ora stiamo andando a creare un layout di pagina che segue questo formato di base. Il contenuto sarà dinamico in modo da poter creare tutte le pagine che vuoi in base a questo layout.
Nel nostro layout di pagina, definiremo le seguenti aree come “controlli di campo”. Li creeremo tutti in un unico contenitore di contenuti e li disporremo esplicitamente per riflettere il nostro design:
Il breadcrumb in alto a sinistra possiamo usare breadcrumb trail di SharePoint e incorporeremo l’iscrizione alla newsletter nel layout di pagina perché non vogliamo che questo sia definito esplicitamente nel layout.
Definizione del tipo di contenuto
Quindi, prima di eseguire il lavoro HTML, creiamo un tipo di contenuto (una definizione per i campi di contenuto) che definisce ciascuno di questi campi per la nostra pagina. Sulla base del piano di cui sopra, abbiamo bisogno dei seguenti campi:
- LargeHeadline
- RightHandBlurb
- LeftLinkList
- LeftColumnTitle
- LeftColumnText
- RightColumnText
In ogni caso, questi saranno controlli HTML. SharePoint 2013 consente di definire altri tipi di contenuto per questi campi, ad esempio le immagini. Le immagini in SharePoint 2013 possono essere renderizzate in dimensioni specifiche e SharePoint 2013 eseguirà il rendering dinamico di qualsiasi immagine specificata per garantire che si adattino perfettamente al layout definito.
Per creare un tipo di contenuto, vai a Impostazioni sito –> Tipi di contenuto sito (in Gallerie Web Designer). Se guardi i tipi di contenuto del layout di pagina, vedrai quelli esistenti per Articolo, catalogo, Pagina di benvenuto, ecc. Stiamo andando a creare un tipo di contenuto per il nostro layout. Fare clic su Crea e digitare un nome per il nuovo tipo di contenuto:
In Tipo di contenuto genitore, è possibile selezionare il genitore da cui verrà ereditato il tipo di contenuto. Se si considerano i tipi di contenuto del layout di pagina esistenti, questi vengono ereditati dalla pagina del tipo di contenuto. La pagina si trova nel gruppo Tipi di contenuto di pubblicazione. È inoltre possibile specificare il gruppo che si desidera inserire il nuovo tipo di contenuto: è possibile aggiungerlo al gruppo Tipi di contenuto layout di pagina esistente o creare un gruppo personalizzato.
Dopo aver creato il nuovo tipo di contenuto, SharePoint 2013 visualizzerà le colonne ereditate automaticamente dal tipo di contenuto della pagina. Consente di aggiungere alcuni nuovi per rappresentare i nostri campi personalizzati. Fare clic sulla colonna Aggiungi da nuovo sito e aggiungiamo ogni campo:
Per ogni colonna, possiamo specificare il tipo. Per quei campi che vogliamo esplicitamente stile, possiamo usare l’opzione Singola riga di testo per avere l’autore del contenuto messo in testo normale che verrà formattato dal modello. Per quei campi che vogliamo fornire un maggiore controllo all’autore del contenuto, possiamo specificare il campo come contenuto HTML completo e quindi l’autore del contenuto sarà in grado di inserire qualsiasi HTML utilizzando l’editor di testo ricco. Per i nostri campi, usiamo questo approccio:
- LargeHeadline – Singola riga di testo
- RightHandBlurb – Più righe di testo
- LeftLinkList – Full HTML
- LeftColumnTitle – Singola riga di testo
- LeftColumnText – Full HTML
- RightColumnText – Full HTML
Per ogni campo, creare una colonna del sito.
Ora abbiamo campi per memorizzare il contenuto, ora creiamo un layout di pagina.
Creazione di un layout di pagina
Per creare un layout di pagina, vai a Design Manager e fai clic su 6. Modifica layout di pagina. Fare clic su Crea un layout di pagina. Dai un nome al layout di pagina, scegli la pagina principale e il tipo di contenuto appena creato.
Se visualizzi l’anteprima del layout di pagina, vedrai che non sembra molto: dobbiamo aggiornare l’HTML attorno ai controlli del campo per formattare correttamente il layout.
Pubblicazione del layout di pagina
Prima di poter utilizzare il layout di pagina, deve essere pubblicato. Per pubblicare il layout di pagina, vai a Impostazioni sito – > Pagine master e layout di pagina. Vedrai due file: uno è HTML e uno è ASPX. in SharePoint 2013, l’HTML è ora il master ed è possibile modificarlo utilizzando un editor HTML. SharePoint 2013 genera quindi automaticamente il file ASPX. Per pubblicare il layout, fare clic sul file HTML e quindi Pubblicare:
Questo pubblicherà sia i file HTML che ASPX, rendendoli ora disponibili per creare una pagina in base al layout.
Creazione di una pagina
Per creare una pagina basata sul nostro nuovo layout, vai a Nuova pagina.
Se poi vai a Page – > Layout di pagina, troverai il nostro nuovo layout di pagina nell’elenco dei layout di pagina disponibili. Quando cambi il layout di pagina, ora dovresti vedere tutti i campi che abbiamo creato in precedenza nel nostro tipo di contenuto.
È possibile compilare il contenuto digitandolo o copiandolo e incollandolo dal sito Web esistente o da documenti di Office come Word. Il copia e incolla è migliorata notevolmente rispetto alle versioni precedenti!
Ecco il mio contenuto ora compilato:
Ora possiamo pubblicare la nostra pagina…
Il nostro contenuto è lì, ma il layout non riflette ciò che noi want…so ora modificare l’HTML per aggiornare il nostro layout.
Personalizzazione dei layout di pagina
I layout di pagina in SharePoint 2013 sono solo file HTML con molti markup aggiuntivi per specificare dove verranno iniettati i controlli. Ora possiamo personalizzare il file HTML attraverso il design manager. Si può semplicemente prendere una copia del file HTML, apportare le modifiche e ri-caricare il file e SharePoint 2013 farà il resto. Ci sono due modi per afferrare il file:
- Vai a Design Manager – > 3. Carica i file di progettazione e associa un’unità di rete alla directory della pagina principale.
- Vai a Impostazioni del sito- > Pagine master e layout di pagina e puoi scaricare il tuo file.
Dopo aver iterato alcune volte con il layout di pagina e spostato i frammenti forniti da SharePoint 2013 negli spot appropriati, ora abbiamo una pagina ben formattata:
Tutto il contenuto all’interno dell’area della pagina principale è completamente gestito da SharePoint può essere facilmente modificato da un autore di contenuti.
Questo post è stato scritto da Chris Woodill
Christopher Woodill è il Vice Presidente, Settore pubblico per Navantis. Con oltre 15 anni di esperienza nella pianificazione, gestione e implementazione di strategie tecnologiche sia nel settore pubblico che privato, Christopher è responsabile delle vendite del settore pubblico, della strategia e della consegna di soluzioni per i nostri clienti in sanità, governo, comuni e istruzione.
