Zum Inhalt springen

Template integrieren

Erstellt am 16. Januar 2006 · 7 Antworten · letzte Antwort am 16. Januar 2006

Tags: Frage

stetabar ·

so, ich habe ein html-template erstellt und will es nun in ein typo3 system einbauen.
habe mal etwas mit den mitgelieferten typo3 templates gearbeitet, also noch sehr unerfahren...
habe hier auch schon so einige male gute hilfe und ratschläge bekommen, aber weiß gerade echt nicht, wie das geht...

ich habe 2 varianten gefunden, um html-templates einzubetten.

bei der einen verstehe ich nicht, wie ich die felder deklarieren muss, damit sie im template angezeigt werden...(Resource ist noch Template.html angelegt)

# Configuring the Auto-Parser:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/template/main/Template.html
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
TD.all = 1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template/main/
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.config.disableAllHeaderCode=1
page.10 =< plugin.tx_automaketemplate_pi1

bei der anderen wird mein template garnicht aufgerufen, würde ich sagen, weil immer eine standard-seite generiert wird...

page = PAGE
page {
        typeNum = 0
        10 = TEMPLATE
        10 {
                template = TEXT
                template.file = fileadmin/template/main/Template.html
                workOnSubpart = DOCUMENT_BODY
                marks {
                        INHALT_NORMAL = CONTENT
                        INHALT_NORMAL {
                                table = tt_content
                                select {
                                        where = colPos = 0
                                        orderBy = sorting
                                        languageField = sys_language_uid
                                }
                        }
                        INHALT_RAND = CONTENT
                        INHALT_RAND {
                                table = tt_content
                                select {
                                        where = colPos = 3
                                        orderBy = sorting
                                        languageField = sys_language_uid
                                }
                        }
                }
        }
}

habe die felder, die variablen sein sollen erstmal wieder rausgenommen, weil ich mir echt nicht mehr so sicher bin, ob das alles so stimmt...
in den divs sollen jeweils die variablen inhalte kommen...
einmal wird gesagt, dass man es mit

###INHALT_NORMAL###

machen soll.
ein anderes mal wird von

<!--##INHALT_NORMAL## begin -->
<!--##INHALT_NORMAL## end -->

gesprochen.

vielleicht ist ja jemand so gütig und weißt mich mal etwas ein...

Quellcode Template.html:

<html><head>
<title>TITEL</title>

<script language="javascript" type="text/javascript">
// Scrollbars made by geeeet@ghtml.com
// Keep these two lines and you're free to use this code

var upH = 26; // Height of up-arrow
var upW = 26; // Width of up-arrow
var downH = 26; // Height of down-arrow
var downW = 26; // Width of down-arrow
var dragH = 26; // Height of scrollbar
var dragW = 26; // Width of scrollbar
var scrollH = 405; // Height of scrollbar
var speed = 4; // Scroll speed

// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick

var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar

var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span

// Mousedown
function down(e){
	if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
	getMouse(e);
	startY = (mouseY - dragT);
	
	// If click on up-arrow
	if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
		clickUp = true;
		return scrollUp();
	}	
	// Else if click on down-arrow
	else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
		clickDown = true;
		return scrollDown();
	}
	// Else if click on scrollbar
	else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
		clickDrag = true;
		return false;
	}
	else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
		// If click above drag
		if(mouseY < dragT){
			clickAbove = true;
			clickUp = true;
			return scrollUp();
		}
		// Else click below drag
		else{
			clickBelow = true;
			clickDown = true;
			return scrollDown();
		}
	}
	// If no scrolling is to take place
	else{
		return true;
	}
}

// Drag function
function move(e){
	if(clickDrag && contentH > contentClipH){
		getMouse(e);
		dragT = (mouseY - startY);
		
		if(dragT < (rulerT))
			dragT = rulerT;		
		if(dragT > (rulerT + scrollH - dragH))
			dragT = (rulerT + scrollH - dragH);
		
		contentT = ((dragT - rulerT)*(1/scrollLength));
		contentT = eval('-' + contentT);

		moveTo();
		
		// So ie-pc doesn't select gifs
		if(ie4)
			return false;
	}
}

function up(){
	clearTimeout(timer);
	// Resetting variables
	clickUp = false;
	clickDown = false;
	clickDrag = false;
	clickAbove = false;
	clickBelow = false;
	return true;
}

// Reads content layer top
function getT(){
	if(ie4)
		contentT = document.all.content.style.pixelTop;
	else if(nn4)
		contentT = document.contentClip.document.content.top;
	else if(dom)
		contentT = parseInt(document.getElementById("content").style.top);
}

// Reads mouse X and Y coordinates
function getMouse(e){
	if(ie4){
		mouseY = event.clientY + document.body.scrollTop;
		mouseX = event.clientX + document.body.scrollLeft;
	}
	else if(nn4 || dom){
		mouseY = e.pageY;
		mouseX = e.pageX;
	}
}

// Moves the layer
function moveTo(){
	if(ie4){
		document.all.content.style.top = contentT;
		document.all.ruler.style.top = dragT;
		document.all.drag.style.top = dragT;
	}
	else if(nn4){
		document.contentClip.document.content.top = contentT;
		document.ruler.top = dragT;
		document.drag.top = dragT;
	}
	else if(dom){
		document.getElementById("content").style.top = contentT + "px";
		document.getElementById("drag").style.top = dragT + "px";
		document.getElementById("ruler").style.top = dragT + "px";
	}
}

// Scrolls up
function scrollUp(){
	getT();
	
	if(clickAbove){
		if(dragT <= (mouseY-(dragH/2)))
			return up();
	}
	
	if(clickUp){
		if(contentT < 0){		
			dragT = dragT - (speed*scrollLength);
			
			if(dragT < (rulerT))
				dragT = rulerT;
				
			contentT = contentT + speed;
			if(contentT > 0)
				contentT = 0;
			
			moveTo();
			timer = setTimeout("scrollUp()",25);
		}
	}
	return false;
}

// Scrolls down
function scrollDown(){
	getT();
	
	if(clickBelow){
		if(dragT >= (mouseY-(dragH/2)))
			return up();
	}

	if(clickDown){
		if(contentT > -(contentH - contentClipH)){			
			dragT = dragT + (speed*scrollLength);
			if(dragT > (rulerT + scrollH - dragH))
				dragT = (rulerT + scrollH - dragH);
			
			contentT = contentT - speed;
			if(contentT < -(contentH - contentClipH))
				contentT = -(contentH - contentClipH);
			
			moveTo();
			timer = setTimeout("scrollDown()",25);
		}
	}
	return false;
}

// reloads page to position the layers again
function reloadPage(){
	location.reload();
}

// Preload
function eventLoader(){
	if(ie4){
		// Up-arrow X and Y variables
		upL = document.all.up.style.pixelLeft;
		upT = document.all.up.style.pixelTop;		
		// Down-arrow X and Y variables
		downL = document.all.down.style.pixelLeft;
		downT = document.all.down.style.pixelTop;
		// Scrollbar X and Y variables
		dragL = document.all.drag.style.pixelLeft;
		dragT = document.all.drag.style.pixelTop;		
		// Ruler Y variable
		rulerT = document.all.ruler.style.pixelTop;		
		// Height of content layer and clip layer
		contentH = parseInt(document.all.content.scrollHeight);
		contentClipH = parseInt(document.all.contentClip.style.height);
	}
	else if(nn4){
		// Up-arrow X and Y variables
		upL = document.up.left;
		upT = document.up.top;		
		// Down-arrow X and Y variables
		downL = document.down.left;
		downT = document.down.top;		
		// Scrollbar X and Y variables
		dragL = document.drag.left;
		dragT = document.drag.top;		
		// Ruler Y variable
		rulerT = document.ruler.top;
		// Height of content layer and clip layer
		contentH = document.contentClip.document.content.clip.bottom;
		contentClipH = document.contentClip.clip.bottom;
	}
	else if(dom){
		// Up-arrow X and Y variables
		upL = parseInt(document.getElementById("up").style.left);
		upT = parseInt(document.getElementById("up").style.top);
		// Down-arrow X and Y variables
		downL = parseInt(document.getElementById("down").style.left);
		downT = parseInt(document.getElementById("down").style.top);
		// Scrollbar X and Y variables
		dragL = parseInt(document.getElementById("drag").style.left);
		dragT = parseInt(document.getElementById("drag").style.top);
		// Ruler Y variable
		rulerT = parseInt(document.getElementById("ruler").style.top);
		// Height of content layer and clip layer
		contentH = parseInt(document.getElementById("content").offsetHeight);
		contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
		document.getElementById("content").style.top = 0 + "px";
		
	}
	// Number of pixels scrollbar should move
	scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
	// Initializes event capturing
	if(nn4){
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
		window.onresize = reloadPage;
	}
	document.onmousedown = down;
	document.onmousemove = move;
	document.onmouseup = up;
}
</script>


<style type="text/css">
#content
{
	position: absolute;
	height:426;
	width:450;
}
body
{
	overflow: hidden;
	background-color: #000000;
	background-image: url(Web_Main.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.player
{
	position:absolute;
	height: 38px;
	width:102px;
	top: 132px;;
	left:24px;;
}

.review
{
	position:absolute;
	height: 352px;
	width: 102px;
	top:201px;
	left:24px;
	text-align: justify;
	font-family: Arial;
	font-size: 10px;
	color: #d2be7d;
	overflow:hidden;

}
.maincontent
{
	text-align: justify;
	font-family: Arial;
	font-size: 10px;
	color: #d2be7d;
	overflow:hidden;
}
.shows
{
	position:absolute;
	top: 129px;
	left:674;
	width: 102px;
	height: 80 px; 
	text-align: justify;
	font-family: Arial;
	font-size: 10px;
	color: #d2be7d;
	overflow:hidden;
}
.contact
{
	position:absolute;
	top: 244px;
	left:674px;
	width: 102px;
	height: 80 px; 
	text-align: justify;
	font-family: Arial;
	font-size: 10px;
	color: #d2be7d;
	overflow:hidden;
}
.newsletter
{
	position:absolute;
	top: 475px;
	left:674px;
	width: 102px;
	height: 52 px; 
	text-align: justify;
	font-family: Arial;
	font-size: 10px;
	color: #d2be7d;
	overflow:hidden;
}
.FWH
{
	position:absolute;
	top: 548px;
	left:717px;
	width: 76px;
	height: 40 px;
}
.SFE
{
	position:absolute;
	top: 540px;
	left:668px;
	width: 76px;
	height: 40 px;
}
</style>
</head>
<body onload="eventLoader();">
<div class="player">
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="102" height="38" id="player" align="">
 		<param name="movie" value="player.swf"> <param name="quality" value="high"> <param name="salign" value="LT"> <param name="wmode" value="transparent"> <param name="bgcolor" value="#FFFFFF"> <embed src="player.swf" quality="high" salign="LT" wmode="transparent" bgcolor="#FFFFFF" width="102" height="38" name="player" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
	</object>
</div>	

<div class="review">

	REVIEW

</div>

<div class="maincontent">	
	<span id="up" style="Z-INDEX: 1; LEFT: 627px;  WIDTH: 1px; POSITION: absolute; TOP: 130px ; HEIGHT: 1px">
		<img src="up.gif" border="0" alt="Scroll up" /> 
	</span> 
	<!-- div containing down-arrow | change: top + left -->
	<span id="down" style="Z-INDEX: 2; LEFT: 627px; WIDTH: 1px; POSITION: absolute; TOP: 547px; HEIGHT: 1px">
		<img src="down.gif" border="0" alt="Scroll down" /> 
	</span> 
	<!-- div containing scrollbar | change: top + left + width + height -->
	<span id="drag" style="Z-INDEX: 3; LEFT: 631px; WIDTH: 9px; POSITION: absolute; TOP: 145px; HEIGHT: 1px">
		<img src="drag.gif" border="0" alt="Scroll" /> 
	</span> 
	<!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height -->
	<span id="ruler" style="Z-INDEX: 4; LEFT: 631px; WIDTH: 1px; POSITION: absolute; TOP: 145px; HEIGHT: 1px">
	</span> 
	<!-- div containing content | change: top + left + width + height + clip -->
	<span id="contentClip" style="Z-INDEX: 5; LEFT: 50%; margin: -171px 0px 0px -236px; OVERFLOW: hidden; WIDTH: 455px; CLIP: rect(0px 455px 430px 0px); POSITION: absolute; TOP: 50%; HEIGHT: 430px; visibility: show;">
	<span id="content"> 
			
			INHALT
			
		</span>
	</span>
</div>

<div class="shows">
	SHOWS
</div>

<div class="contact">
	CONTACT
</div>

<div class="newsletter">
	NEWSLETTER
</div>

<div class="FWH">
</div>

<div class="SFE">
</div>

</body>
</html>

____________
Titel geändert von just2b

mrasp ·

Hallo Stetabar,

setz mal bei der zweiten Variante "template = FILE" (statt TEXT).

template = FILE
template.file = fileadmin/template/main/Template.html

Martin

stetabar ·

also das mit file hat schonmal soweit funktioniert, dass er zumindest den body meines html-templates findet.
die komplette deklaration im header geht aber verschütt.
muss ich die als css datei auslagern, oder kann ich das durch eine setupzeile im TS steuern?
interessanter weise löscht er alles aus dem header, bis auf den titel...

hier mal die erzeugt php datei von typo3

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is brought to you by TYPO3 - get.content.right
	TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2005 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://www.typo3.com
-->

	<title>TITEL : Home</title>
	<meta name="generator" content="TYPO3 3.8 CMS" />
	<script type="text/javascript">
		/*<![CDATA[*/
	<!--
		browserName = navigator.appName;
		browserVer = parseInt(navigator.appVersion);
		var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
		if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror") {version = "n3";} else {version = "n2";}
			// Blurring links:
		function blurLink(theObject)	{	//
			if (msie4)	{theObject.blur();}
		}
		
	// -->
		/*]]>*/
	</script>


</head>
<body bgcolor="#FFFFFF">

<div class="player">
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="102" height="38" id="player" align="">
 		<param name="movie" value="player.swf"> <param name="quality" value="high"> <param name="salign" value="LT"> <param name="wmode" value="transparent"> <param name="bgcolor" value="#FFFFFF"> <embed src="player.swf" quality="high" salign="LT" wmode="transparent" bgcolor="#FFFFFF" width="102" height="38" name="player" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
	</object>
</div>	

<div class="review">

	REVIEW

</div>

<div class="maincontent">	
	<span id="up" style="Z-INDEX: 1; LEFT: 627px;  WIDTH: 1px; POSITION: absolute; TOP: 130px ; HEIGHT: 1px">
		<img src="up.gif" border="0" alt="Scroll up" /> 
	</span> 
	<!-- div containing down-arrow | change: top + left -->
	<span id="down" style="Z-INDEX: 2; LEFT: 627px; WIDTH: 1px; POSITION: absolute; TOP: 547px; HEIGHT: 1px">
		<img src="down.gif" border="0" alt="Scroll down" /> 
	</span> 
	<!-- div containing scrollbar | change: top + left + width + height -->
	<span id="drag" style="Z-INDEX: 3; LEFT: 631px; WIDTH: 9px; POSITION: absolute; TOP: 145px; HEIGHT: 1px">
		<img src="drag.gif" border="0" alt="Scroll" /> 
	</span> 
	<!-- div laying above scrollbar for netscape 6 protection | change: top + left + width + height -->
	<span id="ruler" style="Z-INDEX: 4; LEFT: 631px; WIDTH: 1px; POSITION: absolute; TOP: 145px; HEIGHT: 1px">
	</span> 
	<!-- div containing content | change: top + left + width + height + clip -->
	<span id="contentClip" style="Z-INDEX: 5; LEFT: 50%; margin: -171px 0px 0px -236px; OVERFLOW: hidden; WIDTH: 455px; CLIP: rect(0px 455px 430px 0px); POSITION: absolute; TOP: 50%; HEIGHT: 430px; visibility: show;">
	<span id="content"> 
			
			INHALT
			
		</span>
	</span>
</div>

<div class="shows">
	SHOWS
</div>

<div class="contact">
	CONTACT
</div>

<div class="newsletter">
	NEWSLETTER
</div>

<div class="FWH">
	</div>

<div class="SFE">
	</div>

</body>
</html>

hatte zuvor noch die elemente

<!-- ###DOCUMENT_BODY### -->
###INHALT_NORMAL###
<!-- ###DOCUMENT_BODY### -->

in mein template eingebunden...

mrasp ·

Das ist schon richtig was Typo3 da macht. :-)

Es wird alles vor dem ersten und nach dem zweiten ###DOCUMENT_BODY###-Tag gelöscht. Dazwischen werden die Marker ersetzt (vorausgesetzt es sind im TypoScript entsprechende Anweisungen enthalten).

Die CSS-Anweisungen würde ich in einer extra Datei speichern und wie folgt einbinden ("seite" ist bei mir vom Typ "PAGE").

seite.headerData.5 = TEXT
seite.headerData.5.value = <script language="JavaScript" type="text/javascript" src="fileadmin/vorlagen/intranet.js"></script>

Martin

stetabar ·

das heißt ich muss den ###DOCUMENT_BODY###-tag noch vor meinen header setzen, damit er nicht verlohren geht...
oder muss man da dann noch einen tag anlegen, wie zB ###DOCUMENT_HEADER### oder so?
soll ich denn trotzdem den titel außen vor lassen, weil er ja immer noch die seiten mit einbezieht...
oder ist dass dann nur noch formsache?

aber warum werden mir keine inhalte an der stelle ###INHALT_NORMAL### angelegt?

im TS ist es doch richtig angelegt, oder?

stetabar ·
Norman2k schrieb

http://www.typo3.net/uploads/media/dokumentation.pdf
In dieser Doku werden die Grundlagen ziemlich gut erklärt!

Norman

also da gibt es eine menge zu lesen und ist sehr hilfreich, danke!
aber habe noch eine letzte frage zu diesem thema.

wenn ich <!--###DOCUMENT_BODY###--> vor und hinter meinen body setze,
kann ich ja über typo die bodytags setzen.
kann ich denn auch einen <!--###DOCUMENT_HEADER###--> machen, damit
die scripte und css-tags aus dem header erhalten bleiben???
wie müsste ich den aufbauen?
das steht da leider nicht mit drin und ich verstehe gerade einiges mehr, als noch vor einer stunde, aber das ist noch einproblem, danach denke ich, dass es nur nochmal zum menü etwas knifflig wird...😉

stetabar ·

habe eine lösung gefunden, aber gefällt mir nur bedingt...
im TS gebe ich

page.config.disableAllHeaderCode=1

ein. dadurch kann ich mein <!-- ###DOCUMENT_BODY### --> um die ganze datei legen.
problem dabei ist nur, dass die titelzeile nicht angepasst wird...
oder kann ich die auch über einen platzhalter definieren?

wie zB.

page.marks{
TITEL_PAGE=TEXT
TITLE_PAGE.text = Webseitentitel & title
}

oder ähnlich?