Lección 6: Contenido estático

Cualquier elemento que no se renderice con Django se considera contenido estático. Esto incluye imágenes, hojas de estilo y scripts. En este apartado vamos a ver cómo añadir contenido estático, en concreto un fichero CSS, a nuestra aplicación.

Crea un archivo style.css en la carpeta static/css (deberás crear ambas carpetas) con el siguiente contenido:

:root {
    /* Paleta de colores vibrante y moderna */
    --primary-color: #FF7EB6;    /* Rosa moderno */
    --secondary-color: #7AF2FF;  /* Azul claro */
    --accent-color: #FF65A3;     /* Rosa más intenso */
    --background-gradient: linear-gradient(45deg, #fff5f5 0%, #f7f9ff 100%);
    --text-color: #2E2E2E;
    --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --spacing-unit: 1.5rem;
    --border-radius: 20px;
    --transition-fast: 0.3s ease;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: var(--spacing-unit) 0;
    background-image: var(--background-gradient);
    color: var(--text-color);
    line-height: 1.6;
}

h1 {
    text-align: center;
    font-size: 2.8rem;
    margin: 1.5em 0;
    color: var(--primary-color);
    text-shadow: 2px 2px 0 rgba(255, 126, 182, 0.1);
    position: relative;
}

h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent-color);
    margin: 0.5em auto;
    border-radius: 2px;
}

h2 {
    color: var(--text-color);
    font-size: 1.8rem;
    margin-bottom: 1em;
    position: relative;
    padding-left: 1rem;
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    height: 0.8em;
    width: 4px;
    background: var(--secondary-color);
    border-radius: 2px;
}

article {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    margin: var(--spacing-unit) auto;
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    box-shadow: var(--soft-shadow);
    max-width: 800px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

article:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: var(--spacing-unit) 0;
    transition: transform var(--transition-fast);
}

img:hover {
    transform: scale(1.02);
}

/* Efectos modernos */
@media (prefers-reduced-motion: no-preference) {
    article {
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
}

/* Mejoras de tipografía */
p {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

/* Personalización de enlaces */
a {
    color: var(--accent-color);
    text-decoration: none;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--transition-fast);
}

a:hover::after {
    width: 100%;
}

Para que el archivo de estilos sea encontrado por el navegador, necesitaremos añadir a la plantilla HTML un par de lineas.

Al inicio del archivo article_list.html, añade {% load static % y <link rel="stylesheet" type="text/css" href="{% load static % y <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> en la etiqueta head:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Lista de artículos</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Lista de grandes mujeres en la historia de la informática</h1>
{% for article in articles %}
    <article>
        <h2>{{ article.title }}</h2>
        <img src="{{ article.photo.url }}" alt="{{ article.title }}">
        <p>{{ article.description }}</p>
    </article>
{% endfor %}
</body>
</html>

Por último, dile a Django que sirva los archivos estáticos. Añade la siguiente línea al final de my_app/settings.py:

STATICFILES_DIRS = [BASE_DIR / 'static']

Vuelve a cargar la página y deberías ver los cambios.

¡Bien hecho!

Sería muy interesante si tuviéramos páginas individuales para cada artículo.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario