css in bottle template

Django, Flask, Bottle, WSGI, CGI…
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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.
.robert
User
Beiträge: 274
Registriert: Mittwoch 25. April 2007, 17:59

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
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

Ich weis ja wie das mit den static-files geht, abber nicht wie ich damit eine css Datei in mein Template einbinden kann

lg
Benutzeravatar
gkuhl
User
Beiträge: 600
Registriert: Dienstag 25. November 2008, 18:03
Wohnort: Hong Kong

Nach der Dokumentation, würde ich es wie folgt machen:

Code: Alles auswählen

<link rel='stylesheet' type='text/css' href='/static/style.css'>
Benutzeravatar
Hyperion
Moderator
Beiträge: 7478
Registriert: Freitag 4. August 2006, 14:56
Wohnort: Hamburg
Kontaktdaten:

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.
encoding_kapiert = all(verstehen(lesen(info)) for info in (Leonidas Folien, Blog, Folien & Text inkl. Python3, utf-8 everywhere))
assert encoding_kapiert
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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-.-
Benutzeravatar
Hyperion
Moderator
Beiträge: 7478
Registriert: Freitag 4. August 2006, 14:56
Wohnort: Hamburg
Kontaktdaten:

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.
encoding_kapiert = all(verstehen(lesen(info)) for info in (Leonidas Folien, Blog, Folien & Text inkl. Python3, utf-8 everywhere))
assert encoding_kapiert
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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
Benutzeravatar
Hyperion
Moderator
Beiträge: 7478
Registriert: Freitag 4. August 2006, 14:56
Wohnort: Hamburg
Kontaktdaten:

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.
encoding_kapiert = all(verstehen(lesen(info)) for info in (Leonidas Folien, Blog, Folien & Text inkl. Python3, utf-8 everywhere))
assert encoding_kapiert
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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?
Benutzeravatar
gkuhl
User
Beiträge: 600
Registriert: Dienstag 25. November 2008, 18:03
Wohnort: Hong Kong

@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.
.robert
User
Beiträge: 274
Registriert: Mittwoch 25. April 2007, 17:59

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.
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

@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?
BlackJack

@ceddy: Hast Du denn auch das Programm angepasst?
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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
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.
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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
deets

Wie ist es denn da eingebunden?
ceddy
User
Beiträge: 79
Registriert: Mittwoch 25. August 2010, 12:01

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/')
Benutzeravatar
noisefloor
User
Beiträge: 3856
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

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
Antworten