martes, 29 de octubre de 2024

Fast HTML (III). Referenciando ficheros locales de recursos (js, css, imágenes ..)

Se explica en https://fastapi.tiangolo.com/tutorial/static-files/

Supongamos que tenemos esta estructura de ficheros

/proyecto
        main.py
        /static
                /css
                        menu.css

y desde main.py queremos referenciar a menú css


Para ello tenemos este código en main.py, dondew se muestra como se genera código html cons FastHTML y directamente, y como hacer las referencias relativas en ambos, que se hace de la misma manera


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
from fastapi.staticfiles import StaticFiles
from fasthtml import common as fh

fh.FastHTML(static_path='./static/css')
app = fh.FastHTML()

#Montamos la carpeta "static"
app.mount("/static", StaticFiles(directory="static"), name="static")

#Creamos el código HTML con FastHTML
def getCodeFH(cssPath:str):
	return fh.Html(
		fh.Head(
			fh.Link(rel='stylesheet', href=cssPath),
		),
		fh.Body(
			fh.Div(
				fh.A('Home', href='#home'),
				fh.A('News', href='#news'),
				cls='navbar'
			),
		)
	)

#Creamos el mismo código HTML pero directamente
def getCodeHTML(cssPath:str):
	return f'''
		<!DOCTYPE html>
		<html>
		  <head>
		    <link rel="stylesheet" href="{cssPath}">
		  </head>

		  <body style="background-color:white;">
            <div class="navbar">
		      <a href="#home">Home</a>
		      <a href="#news">News</a>
		    </div>
		  </body>
		</html>
		'''

# Falla por no meter los .. en la ruta
@app.get("/fallo1/")
def getf1():
	return getCodeFH('/static/css/menu.css')

# Falla por no meter los .. en la ruta
@app.get("/fallo2/")
def getf2():
	return getCodeHTML('/static/css/menu.css')

# Va bien por meter los .. en la ruta
@app.get("/ok1/")
def geto1():
	return getCodeFH('../static/css/menu.css') 

# Va bien por meter los .. en la ruta
@app.get("/ok2/")
def geto1():
	return getCodeHTML('../static/css/menu.css')


Para referenciar al fichero static/css/menu.css debemos:

  • Línea 8 : Montar la carpeta "/static" para que al hacer un route la reconozca.
  • Líneas 56 y 61: Referenciarlas como "../static/css/menu.css" (No olvidar los 2 puntos)

En las líneas 46 y 51 no encuentra los css por no colocar ".." como prefijo de la  ruta


Publicado por en

No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )