nano app/Resources/views/base.html.twig
este archivo se ve así:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
lo que necesitamos es que se vea así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div class="wrap container">
{% block body %}{% endblock %}
</div>
{% block javascripts %}{% endblock %}
</body>
</html>
Esto es sólo asegurar HTML5 correcto y a demás para que bootstrap tenga un wrap container.
El paso siguiente es crear un layout, que heredará de base, que es de donde las demás plantillas heredarán.
{% extends '::base.html.twig' %}
{% block stylesheets %}
{% stylesheets output='css/main.css' filter='cssrewrite' debug=false
'bundles/petramasmain/lib/bootstrap/css/bootstrap.min.css'
'bundles/petramasmain/css/styles.css' -%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% endblock %}
{% block body -%}
<div class="container">
{% block content %}{% endblock %}
</div>
{% endblock %}
{% block javascripts %}
{% javascripts output='js/main.js' debug=false
'@PetramasMainBundle/Resources/public/js/jquery.js'
'@PetramasMainBundle/Resources/public/lib/bootstrap/js/bootstrap.min.js'
'@PetramasMainBundle/Resources/public/js/scripts.js' -%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Aquí se colocan todas las librerías comunes que serán necesarias para el frontend como jquery, bootstrap, jquery-ui, etc. Así como nuestros desarrollos propios que estarán en los archivos styles.css y scripts.js así que deberemos asegurarnos de crearlos antes de realizar los siguientes pasos.
La plantilla que muestra nuestro mensaje Hello! sólo dice eso, aśi que para que pueda heredar todo lo que hemos agregado, debemos modificarlo para que se vea así:
nano src/Petramas/MainBundle/Resources/views/Default/index.html.twig
{% extends 'PetramasMainBundle::layout.html.twig' %}
{% block content%}
Hello!
{% endblock %}
Ahora debemos configurar el archivo config.yml para que PetramasMainBundle tenga permiso de usar el AsseticBundle:
nano app/config/config.yml # Assetic Configuration assetic: debug: %kernel.debug% use_controller: false bundles: [ PetramasMainBundle ]
Por último generamos los assets usando nuestro comando personalizado dev:up
joerobles@joebuntu:~/NetBeansProjects/petramas$ php app/console dev:up Pulling from git repository >> Already up-to-date. Installing assets >> Installing assets using the symlink option Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework Installing assets for Petramas\MainBundle into web/bundles/petramasmain Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution Updating schema >> Nothing to update - your database is already in sync with the current entity metadata. Clearing cache >> Clearing the cache for the dev environment with debug true Finished successfully.
Y ya podemos ver nuestro mensaje Hello! con el estilo de Bootstrap3.
No hay comentarios.:
Publicar un comentario
Puedes comentar como te gustaría que comenten de ti.