Seite 1 von 2

css in bottle template

Verfasst: Mittwoch 8. Juni 2011, 19:38
von ceddy
1.kann mir jemand sagen wie ich in ein Template für Bottle(.tpl) eine css Datei einbinden kann?
ich habe es einfach versucht wie in html auch:

Code: Alles auswählen

<link rel="stylesheet" href="style.css" type="text/css" />
Die css Datei liegt zwar im gleich Verzeichniss wird jedoch nicht geladen.

Re: css in bottle template

Verfasst: Mittwoch 8. Juni 2011, 21:17
von .robert
Hm, ich gucke ja in solchen Fällen als erstes in der Dokumentation nach. Das geht schneller, als zu warten, dass dir jemand antwortet: http://bottlepy.org/docs/dev/tutorial.h ... atic-files

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 05:39
von ceddy
Ich weis ja wie das mit den static-files geht, abber nicht wie ich damit eine css Datei in mein Template einbinden kann

lg

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 05:54
von gkuhl
Nach der Dokumentation, würde ich es wie folgt machen:

Code: Alles auswählen

<link rel='stylesheet' type='text/css' href='/static/style.css'>

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 05:54
von Hyperion
ceddy hat geschrieben:Ich weis ja wie das mit den static-files geht, abber nicht wie ich damit eine css Datei in mein Template einbinden kann
Hu? :o Wo ist denn dann noch das Problem? Kann es sein, dass Dir da http-Grundlagen fehlen? Denk mal drüber nach, was beim Browser (Client) passiert, sobald das HTML-Dokument auf die Stelle mit dem Stylesheet-Link trifft ;-) Was für einen Request sendet der Client dann an den Server? Sobald Dir das klar ist, solltest Du das Problem auch lösen können.

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 06:03
von ceddy
ja nen httprequest nach der datei, ich hab das nach dokumentation so gemacht:

Code: Alles auswählen

@route('/static/:filename')
def server_static(filename):
    return static_file(filename, root='/home/cedric/bottle/file-server')

Code: Alles auswählen

<link rel="stylesheet" href="/static/:style.css" type="text/css" />
das geht abber auch nicht-.-

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 06:27
von Hyperion
Was soll der Doppelpunkt im Pfad in Deinem <link>-Tag? Zudem verlinkst Du ja auf ein Unterverzeichnis namens `static`, in welchem sich dann eine style.css befinden soll. Dafür ist aber laut Doku Deine Route nicht ausgelegt.

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 07:11
von ceddy
Nein die style.css befindet sich im gleichen ordner wie der python script. Das href="/static/ soll ja nur @route('/static/:filename') im python script ansteuern und das :style.css soll den Datei namen an die "def server_static(filename):" funktion übermitteln, so hab ich das in der Dokumentation verstanden:)

mfg ceddy

bin halt nur nen dummer schüler:p

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 07:25
von Hyperion
ceddy hat geschrieben:Nein die style.css befindet sich im gleichen ordner wie der python script. Das href="/static/ soll ja nur @route('/static/:filename') im python script ansteuern und das :style.css soll den Datei namen an die "def server_static(filename):" funktion übermitteln, so hab ich das in der Dokumentation verstanden:)
Der Doppelpunkt wird aber doch dann als Element des Pfades vom Client im Request verpackt. Das kann ja von Dir nicht gewollt sein! Die Datei heißt ja nicht ":style.css", sondern "style.css" (Ich denke auch nicht, dass ein Doppelpunkt Teil eines Dateinamens, zumindest nicht der Beginn sein darf).

Generell würde da auch ein Logging helfen, um zu prüfen, ob die Route denn überhaupt angefordert wird.

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 07:28
von ceddy
ich verstehe eigentlich garnicht, wiso man nicht einfach eine relative pfad angabe in die .tpl Datei schreiben kann, liegt das an dem server von botle?

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 07:36
von gkuhl
@ceddy: Kannst du über "http://localhost:8080/static/style.css" deine "style.css" im Browser öffnen? Es ist übrigens keine gute Idee dein Python-Skript im gleichen Ordner, wie die statische Dateien zu haben. Dein Skript wäre dann auch abrufbar, was vermutlich nicht gewollt ist.

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 08:18
von .robert
css-Dateien, genau so wie js und jpg und html, sind statische Dateien. Ich vermute du kommst aus dem php-Umfeld, wo man das Routing direkt durch das Filesystem implementiert. Bei Bootle (u.a.) referenziert man keine (Python-)Dateien, sondern ein Programm, welches dann aus der Route (das nach der Domain) den entsprechenden Inhalt generiert.

Deswegen ist es sinnlos und unklug, statische Dateien (also in dem Fall dein css) und das Programm zu mischen.

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 13:23
von ceddy
@gkuh, ich habe jetzt die css in den ordner static verschoben, wenn ich http://localhost:8080/static/style.css aufrufe bekomm ich die meldung:

Sorry, the requested URL http://localhost:8080/static/style.css caused an error:

File does not exist.

@.robert genau ich ich habe früher mit php gearbeitet.

Würd es etwas nützen wenn ich meinen ganzen programm code und die .tpl Datei poste?

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 13:48
von BlackJack
@ceddy: Hast Du denn auch das Programm angepasst?

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 13:56
von ceddy
Nein wie denn ?, kann mir bitte jemand sagen, was ich in meinen script und in meine tpl schreiben muss damit das geht oder nen link tuts auhc

danke

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 14:45
von BlackJack
@ceddy: Ich würde da jetzt die Bottle-Dokumentation verlinken. Geh doch einfach mal in Gedanken und dann im Programm durch was passiert wenn Du die URL http://localhost:8080/static/style.css anforderst. Was wird da ausgeführt.

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 17:35
von ceddy
Vielen dank ich hab's jetzt hinbekommen.
Abber bei den bild Datein in dem stylesheet geht das nicht obwohl ich es genau so gemacht hab wie bei dem css Dateien.
Wenn ich http://localhost:8080/images/login.png aufrufe wird das bild angezeigt aber halt nicht auf der Seite wo die css-Datei eingebunden ist

ceddy

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 17:55
von deets
Wie ist es denn da eingebunden?

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 18:14
von ceddy
Also die css datei ist mit:

Code: Alles auswählen

<link rel="stylesheet" href="/styles/style.css" type="text/css" />
eingebunden.
und im script ist dann halt:

Code: Alles auswählen

@route('/styles/:filename')
def server_static(filename):
    return static_file(filename, root='./styles/')
Damit die css Datei ausgegeben wird

in der css steht dann z.B:

Code: Alles auswählen

div#login{ background-image:url(/images/login.png);width:200px; height:100px; display:none}
und im script dann wiederum:

Code: Alles auswählen

@route('/images/:filename')
def server_static(filename):
    return static_file(filename, root='./images/')

Re: css in bottle template

Verfasst: Donnerstag 9. Juni 2011, 18:44
von noisefloor
Hallo,

da ist mindestens ein Fehler drin: root in static_file ist der _absolute_ Pfad im _Dateisystem_.

Folgendes funktioniert:

Code: Alles auswählen

#!/usr/bin/python
# -*- coding: utf-8 -*-

from bottle import route, static_file, template, run, debug

@route('/test')
def test():
    return template('test.tpl')
    
@route('/test/static/:filename')
def static(filename):
    rootpath = '/home/jochen/Code/bottle_test/static/'
    return static_file(filename,root=rootpath)
    
if __name__ == "__main__":
    debug(True)
    run(reloader=True)
Template "test.tpl":

Code: Alles auswählen

<html>
<head>
<title>Bottle test</title>
<link rel="stylesheet" type="text/css" href="/test/static/format.css">
</head>
<body>
<h1>Hallo Welt</h1>
<p>Wie geht's</p>
<p class="kursiv">Ich hoffe gut!</p>
</body>
</html>
noch noch die CSS-Datei, welche unter "/home/jochen/Code/bottle_test/static" (absoluter Pfad!) liegt:

Code: Alles auswählen

.kursiv {font-style: italic; color: red; }
Gruß, noisefloor