Jak edytować szablon strony lub dodać nowy

Utworzono: 2011-11-21
Ostatnia aktualizacja: 2021-08-25

Liczba odwiedzin posta: 12385

Aby dodać swój własny szablon do systemu Siteor należy posiadać podstawowe umiejętności w HTML + CSS.
Szablon strony edytuje się w menu Strona WWW > Szablony ( http://NAZWA_STRONY.siteor.pl/app/page_layouts )

Przy tworzeniu szablonu trzeba zachować część naszego kodu ( dzięki temu m.in. nazwa strony, oraz inne tagi w Head będą dynamicznie podmieniane) :

------------------



 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{page.lang}}" lang="{{page.lang}}" id="lavina">  
 
<head>
 
<title>{{page.title}}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="{{page.lang}}" />
        <meta name="robots" content="all" />
        <meta name="author" content="Siteor.pl" />
        <meta name="description" content="{{page.html_description}}" />
        <meta name="keywords" content="{{page.html_keywords}}"/>  

  
 <!--  Powyższy plik css definiuje ogólny wygląd dla elementów wyświetlanych na stronie -->

 
 
 
 <!-- 
 
W tym miejscu można wkleić odnośniki do lików css  ( np <link rel="stylesheet" href="/layouts/blackandwhite/extras/print.css" type="text/css" media="print" /> , favicon  < np  link rel="shortcut icon" href="/layouts/default/extras/favicon.ico" /> skrypty itp 
 
-->
 
</head>
<body>
 
tutaj wpisujemy  HTML naszej strony. Aby strona była edytowalna w systemie Siteor.pl trzeba skorzystać z specjalnych tagów ( ich opis poniżej )
 
</body>
</html>

-----------------------

Opis tagów niezbędnych do poprawnego działania szablonów na systemie Siteor

Przykładowe odwołanie do CSS:

<link href="http://fs.siteor.com/flup/files/layout/default/main.css" media="screen" rel="stylesheet" type="text/css" />

W Layoucie można wstawiać specjalne TAGi w kodzie HTML.

Dostępne tagi:


<cms type="menu" kind="list|list_2|tree|tree_toggled|tree_toggled_2|sitemap" from="1|2|3|...|-1|-2" ></cms>
from: 
	numer menu: które menu główne
	-1 : wybrane podmenu
	-2 : wybrane menu (zalecane)

kind:
	list: Menu proste jeden poziom - poziome lub pionowe
	list_2: Menu proste dwa poziomy - poziome
	tree_toggled: Menu wielopoziomowe klikalne - pionowe 
	tree_toggled_2: Menu wielopoziomowe rozwijane - poziome lub pionowe
	tree: Menu wielopoziomowe rozwinięte - pionowe
	sitemap: "Mapa strony"

<cms type="box" id="1"></cms>
<cms type="box" id="2" max="1"></cms> - np do bannera górnego 
<cms type="box" id="3">
	 <paragraph name="image">
			<type name="horizontal" size="200>x400" />
			<type name="vertical" size="200>x400" />
			<type name="links" size="100x200>,50x50" />
			<type name="bullets" size="646x179#" />
			<type name="thumbs" size="100x200>,50x50#" />
			<type name="slider" size="200>x400" />
	</paragraph>							
</cms>

Menu użytkownika - logowanie, rejestracja, nazwa użytkownika - <cms:component type="user"/> 
Menu językowe - jeżeli posiadamy kilka witryn z różnymi głównymi  językami za pomocą menu językowego można przełączać się między nimi - <cms:component type="lang"/> 
<cms:component type="logo"/> 
Wyszukiwanie na stronie i w sklepie ( jeśli jest) - <cms:component type="search"/>
Wyszukiwanie tylko na stronie - <cms:component type="www_search"/>
Ścieżka - <cms:component type="breadcrumb"/>
<cms:component type="page_changelog"/> 
<cms:include name="nazwa_layout"/> 
<cms:t value="name_to_translate"/> 
Licznik strony - <span id="portal_counter"/></span> 
 


zmienne które można użyć w layoucie ( ich angielska nazwa opisuje do czego służą ): 


{{page.title}}
{{page.name}}
{{page.url}}
{{page.html_title}}
{{page.html_description}}
{{page.html_keywords}}
{{page.html_script}}
{{page.lang}}
{{page.layout_config}},
{{page.var1}}
{{page.var2}}
{{page.var3}}
{{page.id}}
{{page.page_layout_id}}

{{portal.name}} 
{{portal.url}} 
{{portal.html_title}}
{{portal.lang}}
{{portal.logo_url}}

{{paragraph.class}}
{{paragraph.class_for_body}}

( opis tych tagów można znaleźć rownież w ekranie edytcji / tworzenia layoutu)

Poniżej przykład wideo z przykładem jak przenosić gotowy dostępny w internecie szablon na system Siteor CSM:

Wyświetlenie innego logotypu, gdy w portalu nie jest wgrane inne logo:

{% if portal.logo_url == '/assets/missing/portals_logos_original.png' %}

  <img src="https://s3-eu-west-1.amazonaws.com/fs.siteor.com/radgost/files/invoiceocean-logo-white.png" />

{% else %}

    <img src="{{portal.logo_url}}" />

{% endif %}

Powrót

Komentarze

anonim

szkoda, ze nie widac w co sie klika aby przejść na html

2013-10-25 14:50

Dodaj komentarz

Aby komentować musisz być zalogowany!

Jak edytować szablon strony lub dodać nowy

Opis tagów niezbędnych do poprawnego działania szablonów na systemie Siteor

Komentarze

Dodaj komentarz

Najnowsze