Twig markup is not interpreting while using XAMPP (with Composer/Slim framework)

Question

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": "[email protected]"
    }
],
"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!

You might check this site for how to properly use twig with slim: slimframework.com/docs/features/templates.html — dev0

jmattheis jmattheis · Accepted Answer · 2015-11-12T20:01:59

0

votes

You need to just use {% endblock %} not {% endblock content %}

Twig markup is not interpreting while using XAMPP (with Composer/Slim framework)

1 Answers