Personalizando tu sitio

Plantillas personalizadas

Cuando creamos un proyecto frontweb, hay una serie de plantillas que se utilizan para presentar un diseño muy simple.

El diseño por defecto consiste una serie de elementos div:

_images/layout2.png

Cada elemento div se encarga de mostrar el resultado de procesar un archivo .rst diferente:

  • 1: data/title.rst
  • 2: data/navbar.rst
  • 3: data/sidebar.rst
  • 4: data/index.rst
  • 5: data/footer.rst

El archivo que se utiliza para construir este diseño es template/page.html:

<html>

<head>
    <link href="/theme/css/base.css" rel="stylesheet" type="text/css" media="all">
    <link href="/theme/css/syntax.css" rel="stylesheet" type="text/css" media="all">
    <link href="/theme/css/custom.css" rel="stylesheet" type="text/css" media="all">
    <title>{{head_title}}</title>
</head>

<body>

<div id='container'>
    <div id='titulo'>
        {% autoescape off %}
            {{title}}
        {% endautoescape %}
    </div>

    <div id='sidebar'>
        {% autoescape off %}
            {{sidebar}}
        {% endautoescape %}
    </div>

    <div id='navbar'>
        {% autoescape off %}
            {{navbar}}
        {% endautoescape %}
    </div>

    <div id='content'>
        {% block content %}{% endblock %}
    </div>

    <div id='footer'>
        {% autoescape off %}
            {{footer}}
        {% endautoescape %}
    </div>

</div>

</body>
</html>

Si quieres modificar esta página, simplemente tienes que crear un directorio llamado templates/frontweb y colocar ahí las nuevas plantillas.

Observá el directorio frontweb/templates/frontweb del repositorio para tomar algunas ideas:

Creando un favicon

Favicon es el nombre que recibe la pequeña imagen que muestran muchos navegadores en la propia pestaña de navegación:

_images/favicon.png

Para que tu sitio tenga una imagen representativa como las de la imágen, primero tienes que hacer una imagen pequeña (podés usar el siguiente servicio para eso http://www.favicon.cc/) y luego copiarla al directorio data bajo el nombre favicon.ico.

Por último, asegurate de que la cache de tú navegador se actualice, por ejemplo accediendo directamente al archivo y pulsando ALT+F5. En mi equipo, la ruta directa al archivo es http://localhost:8000/favicon.ico.

Project Versions

Contenidos

Tema anterior

Feeds Atom (sindicación)

Próximo tema

Autenticación de usuarios

Esta página