Bekijk deze pagina in het Engels - vanaf daar zijn ook andere talen te vinden.
Sjablonen
- laatst bijgewerkt op 02-01-2011 voor CMSMS V1.9.2
- De ontwerper maakt de sjablonen die bij de website behoren en stelt ze beschikbaar aan de redacteur. Het verdient aanbeveling alle sjablonen die niet bestemd zijn voor de website (zoals de sjablonen die bij de installatie van CMSMS worden gegenereerd) te verwijderen, of in elk geval middels rechtentoekenning onbereikbaar te maken voor de redacteur.
- Sjablonen bepalen de structuur van de pagina, dus wat er in de pagina wordt opgenomen. Met behulp van de stylesheets kan die structuur vervolgens gestileerd worden om de look-and-feel van de pagina te realiseren.
war vind je de sjablonen?
- De sjablonen zijn bereikbaar via het menu Opmaak > Sjablonen.
- Je kunt ze hier bekijken, aanpassen, verwijderen. Ook kan je op deze pagina een nieuw sjabloon toevoegen.
hoe maak je een CMSMS-sjabloon?
- Maak een HTML-pagina en plaats daarin ipv. echte content zgn. SMARTY-tags, die de content ophalen en in de pagina plaatsen wanneer die in een browser wordt aangeroepen.
- SMARTY is de motor die CMSMS aandrijft. Middels de zgn. SMARTY-tags vertel je deze motor welke content hij moet invoegen in de HTML-pagina.
- Het meest instructief is om eens een reeds bestaande sjabloon te bekijken, bijv. Minimal template:
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
</head>
<body>
{* Start Navigation *}
<div style="float: left; width: 25%;">
{menu template='minimal_menu.tpl'}
</div>
{* End Navigation *}
{* Start Content *}
<div>
<h2>{title}</h2>
{content}
</div>
{* End Content *}
</body>
</html>
- Je ziet hierin allerlei bekende HTML-codering staan: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, <head>, <title> etc.
- Ook zie je stukken code tussen accolades { en } staan. Dàt zijn de SMARTY-tags die straks de content ophalen: {process_pagedata}, {sitename}, {menu template='minimal_menu.tpl'}, {content} etc.
- Tenslotte zie je tekst tussen {* en *} staan. Dit zijn commentaarregels die door SMARTY worden genegeerd.
- Wat je dus doet is een HTML-pagina maken zoals je dat altijd zou doen en, in plaats van uitgeschreven content, SMARTY-tags invoegen op de juiste plaatsen. Simpeler kan het niet!
- Dit betekent dat je de opmaak van elke willekeurige pagina kan gebruiken en die kan omzetten naar een CMSMS-sjabloon.
video tutorials
- Bekijk deze twee video tutorials ook eens:
veelgebruikte tags
- Hieronder volgen de meestgebruikte SMARTY-tags die als placeholder in een sjabloon gebruikt kunnen worden:
- {sitename} - Geeft de naam weer van de site zoals die is ingesteld bij Algemene instellingen.
- {title} - Geeft de titel weer van de pagina zoals die is opgegeven bij het aanmaken van een pagina.
- {stylesheet} - Plaats deze tussen de <head>-tags. Zo worden alle stylesheets van je sjabloon aan de pagina gekoppeld. Het weglaten van deze tag resulteert in een pagina zonder opmaak. Als je liever externe stylesheets gebruikt, plaats dan de normale <link> tag in de header.
- {metadata} - Geeft de metadata toe zoals ingesteld via Algemene instellingen.
- {content} - Geeft de content weer van de geselecteerde pagina zoals ingevoerd bij he taanmaken of bewerken van de pagina.
- {breadcrumbs} - Geeft het pad naar de geselecteerde pagina weer.
- {menu} - Geeft het menu, de site-navigatie weer. In het algemeen zal deze SMARTY-tag nog een parameter template='verwijzing naar menu-sjabloon' hebben. Het volledige menu wordt nu automatisch gegenereerd. Andere parameters bepalen bijv. tot hoeveel niveau's diep het menu laat zien.
welke tags zijn er beschikbaar voor een sjabloon?
- Een lijst met tags is te vinden onder Uitbreidingen -> Tags in het beheerpaneel. Voorbeelden zijn de eerder genoemde {title}, {stylesheet} en {breadcrumbs}. Klik op de uitleg-link om te zien hoe ze gebruikt worden.
- Je kan je eigen Gebruikergedefinieerde tags maken. Voeg ze in met hun naam, dus bijvoorbeeld {mijntag}
- Modules (zoals de nieuws-module) worden toegevoegd met {cms_module module='modulename'}. Hoe ze gebruikt worden staat in hun hulpbestand (Uitbreidingen -> Modules).
- opmerking
- Voor veel tags en modules kunnen parameters gebruikt worden. De aanroep wordt dan {tagname parameter='waarde'}.
koppelen van stylesheets
- Om de elementen van je sjabloon te stileren en de div-elementen te positioneren, koppel je een of meerdere stylesheets aan het sjabloon. In de lijst van sjablonen (Opmaak -> Sjablonen) klik je op het CSS-icoon ter rechterzijde van een sjabloon. Selecteer in het keuzemenu de stylesheets die je aan het sjabloon wilt koppelen en klik op "Stylesheet toevoegen".
lees meer over het maken en aanpassen van sjablonen
Bijdragen aan de Nederlandse wiki? Check dan eerst het forum-topic WIKI - wat doen we daarmee?
