twigjs
Different rendering between inspect and view page source in browsers
We used twig in a project and we had html.twig file as a general layout . We had some twig files that we used html.twig as macro in them. now here we saw a different rendering in browsers between inspect and view page source i mean in inspect , code and location of every tag were OK but in view page source(CTRL + U), codes were in wrong form . that was funny bug i had ever seen .
After that we changed plan so we change macro to extends and used in other twig files.
You can see these changes in this repository in (main,html and exercise).twig files .
https://github.com/Lo-Agency-Internship/Mhmdreza-Maryam-Mahsa-Hutan-workout-tracker-app/tree/8570dc692896a1106565ec80fdff58f29fc2353a
Now everything is OK .
Are you able to include the Twig templates themselves and what TwigPHP rendered and then what twig.js rendered in actual text instead of screen captures?
I am a junior developer and This was our first work experience with twig. We did not use any PHP code in our project. We only use twig and js.
First of all when browser render the page everything is ok and we can't see any bug but in view page source ,we see codes in incorrect form.
We used this file as layout and created this with macro
{% macro html(addressImage) %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body style="background-image: url('asset/image/{{addressImage}}'); height: 100vh; background-size: cover; background-position: center;background-repeat: no-repeat;">
<body>
{% block header %}
{% endblock %}
{% block navbar %}
{% endblock %}
{% block main %}
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous">
</script>
</body>
</html>
{% endmacro %}
And we used these files to fill the blocks
//bug was here . Instead of using macros, we should extend html.twig.
{% import "components/html.twig" as htmls %}
{{ htmls.html("bg-main.jpg")}}
{% block header %}
{% import "components/header.twig" as headers %}
{{headers.header()}}
{% endblock %}
{% block navbar %}
{% import "components/navbar.twig" as navbars %}
{{navbars.navbar()}}
{% endblock %}
{% block main %}
{% import "components/difCard.twig" as usersCards %}
{{usersCards.userCard( allExercise )}}
{% endblock %}
// here is backend's code --> i don't remove but U can ignore it
<script >
function OnLoad(){
const checkUserId = localStorage.getItem('user-id');
if(checkUserId === null)
{
window.location.href ='/login'
}
}
window.onload= OnLoad();
</script>
{% set allExerciseTwig = allExercise %}
<script>
let allExerciseJs = {{ allExerciseTwig|json_encode }};
<script>
let allExerciseJs = {{ allExerciseTwig|json_encode }};
</script>
These are our codes, but if you want to see the codes in detail, ask me to send the exact repository address.
Thank you for providing those templates. Can you please provide the raw output that twig.js is rendering these templates as and then what you expected it to be so I can see exactly what you're referring to?