I'm using XAMPP (v 3.2.1), Composer and Slim framework for learning PHP programming. And somewhy when opening "localhost//" page in Chrome, just text appearing. Without graphic and CSS, but with HTML justifying and active hyperlink. Also there are "{% extends "main.twig" %} {% block content %}" on the begining of it and "{% endblock content %}" in the end.
Before Twig templating, project was runnig normally: with page routing through Slim and correct HTML interpreting.
Project structure:
'.../htdocs/emerson' - main folder,
'/emerson/index.php' - main php controller (see code down this post),
'/emerson/templates/main.twig' - main Twig template (see code down this post), in folder 'temlates' there are other teml.: 'about.twig' and 'contact.twig'
Composer:
{
"name": "yarkopol/first-proj",
"description": "My first Composer proj",
"authors": [
{
"name": "Jarko",
"email": "yarko@dot.com"
}
],
"require": {
"monolog/monolog": "^1.17",
"slim/slim": "^2.6",
"twig/twig": "^1.22"
}
}
index.php
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
require '/vendor/autoload.php';
date_default_timezone_set('Europe/Warsaw');
use Monolog\Logger;
use Monolog\Handler\StreamHandler;
$log = new Logger('name');
$log->pushHandler(new StreamHandler('app.log', Logger::WARNING));
$log->addWarning('Foo');
$app = new \Slim\Slim();
$app->get('/', function() use($app){
$app->render('about.html');
});
$app->get('/contact', function() use($app){
$app->render('contact.html');
});
$app->run();
?>
</body>
</html>
main.twig
<!doctype html>
<html lang="en">
<head>
{% block head %}
<meta charset="utf-8">
<title>{% block title %}Ralph Waldo Emerson{% endblock title %}</title>
<meta name="description" content="Ralph Waldo Emerson">
<meta name="author" content="Treehouse">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/master.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/global.js"></script>
{% endblock %}
</head>
<body>
<header>
<h1>Ralph Waldo Emerson</h1>
<nav>
<a href="index.html" class="selected">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<div class="emerson">
{% block hero %}<img src="images/emerson.jpg" alt="Picture of Ralph Waldo Emerson">{% endblock hero %}
</div>
<main>
{% block content %}
{% endblock content %}
</main>
<footer>
{% block footer %}
<p>A project from <strong><a href="http://teamtreehouse.com">Treehouse</a></strong></p>
<nav>
<a href="index.html" class="selected">About</a>
<a href="contact.html">Contact</a>
</nav>
{% endblock footer %}
</footer>
</body>
</html>
Please help me with this issue!
