Here is my base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% include 'flashes/page-title.html.twig' %}</title>
</head>
<body>
<h1>{% include 'flashes/page-title.html.twig' %}</h1>
</body>
</html>
I'm wondering why twig includes only once this file ?
When you get a flash message from the flashbag, the message gets cleared at the same time. You can see this in Symfony's documentation of flash messages as well as in the FlashBagInterface API.
So my guess is that Twig includes the file twice, but the second time the flashbag is just empty. That's why you don't get anything for the h1 tag. You can confirm this by putting something static (e.g. simply Hello world) to the flashes/page-title.html.twig file and see whether the file gets included twice.
You could instead use the peek() method to retrieve the message while keeping it in the bag, i.e. something like {% for title in app.flashes.peek('title') %} or {% for title in app.session.flashbag.peek('title') %} if the former doesn't work. But then the message wouldn't get cleared. It might or might not be a problem in your case.
Could something else than flash messages be a better approach in this case?
Related
I'm using a Laravel app with an external public directory, e.g. root/Laravel, and root/html/public.
I need this app to load from a require on an php file that already has another framework(root/html/this-section.php), hence that other fw has its own head, and body tag. This app will load between the header and footer of that index.
In my blade layout.app file, i have
#section('stylesheets')
<link rel="stylesheet" href="/this-section/css/vendors.css">
<link rel="stylesheet" href="/this-section/css/app.css">
#show
<div id="main">
#include('layouts.sidebar')
#include('layouts.header')
<section>
#yield('content')
</section>
</div>
The issue I'm having is if no my app layout, when I delete the head and body tags during testing, which is what i need, the blade system, or what i dont know, is still creating an empty head tag set, <head></head>, then when i enable the stylesheets section, it ends up in that <head> tag.
Expected: The head tag should not be there. I don't want a head tag. What in laravel can i adjust to remove this auto creation of head (and body)?
It sounds like your using tags that belong in the <head> section is causing this. While your source may be pristine:
browsers will add in the missing-but-required tags as appropriate, resulting in you seeing them in the browser's web inspector:
I've got specific Form component, which is declared as
Form::component('fcRadio', 'components.form.fcradio', ['name', 'options', 'selected' => null]);
and used as
{{ Form::fcRadio('name', $options }}
What I want is somehow attach custom CSS file, so if the page fires this component at least once, the desired CSS file is included to the <head> of my document.
For example, in Joomla it was like
$this->document->addStylesheet('my_awesome_style.css');
Is there any way to achieve the same in Laravel?
UPD:
I've extended the answers below a bit to let it add multiple styles from multiple templates. Finally, it looks like this:
#section('styles')
#parent
{{HTML::style('css/fcradio.css')}}
#stop
It works fine, but if I use the component twice per page, style is also adds twice. How can I allow multiple but unique entries?
So this is typically how I deal with it:
In your folder: resources/views I create a folder called layout. This folder handles the templates for all my pages.
Then I create a file called default.blade.php. In it I put the bulk of the HTML code. Here's an example of how default.blade.php could look (slimmed down, obviously)
<!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">
<title>
#yield('title')
</title>
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<!-- Additional per-page css -->
#yield('css')
</head>
<body>
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<!-- Include per-page JS -->
#yield('js')
</body>
</html>
Right, so essentially what we have so far is the #yield() and asset() helpers.
#yield() is special blade syntax that Laravel uses to say, "Okay. Any time a blade view that is inheriting THIS master template calls the section named in this #yield() I will display that content right here.
asset() is a nifty little helper that basically appends your URL structure onto the string you pass it. So if your url is http://MyGreatSite.com and you use asset('js/script.js') it will spit out a fully qualified URL that will work anywhere on the site (http://MyGreatSite.com/js/script.js). asset() is great because you can use it in blade templates that will get sent out as an email and all of the files will work in an email inbox because they are absolute links.
Right. So now we have this master template and we need to use it. So what I do is create another view in the resources/views directory. Lets say we're doing a contact page. I would make contact.blade.php. Now I want to inherit that master template we created. So we do that like so:
#extends('layout.default)
#section('css')
<link rel="stylesheet" href="{{ asset('css/contact.css') }}">
#stop
#section('title')
Contact Us
#stop
#section('content')
<h1>Contact us</h1>
<p>
Contact us via email: contact#mygreatsite.com
</p>
#stop
#section('js')
<script src="{{ asset('js/contact-form.js') }}"></script>
#stop
Okay, so, first things first. At the very top we tell this blade file that we want to use the template we just made. We use the blade helper #extends() and pass it the path to our view relative to the views directory separated by periods.
Next, we want to create the sections that correspond to the template. We do that by opening the section with #section() and passing the name of the section we want to push this block of content to. We write our content and then we close the section by using #stop. Pretty simple. For images, css, or js, we simply use the asset() helper again.
I know it's a little long-winded, but hopefully that helps and explains the process a little better.
tl;dr: Use #yield(), #section(), and asset().
So I think I understand what you are saying.
In your blade layout file create a section inside the head:
<head>
#yield('componentcss')
</head>
And in the component do:
#section('componentcss')
{{HTML::style('css/fcradio.css')}}
#stop
You could also just include the css but I wouldn't advise this:
#section('componentcss')
<style>
.exampleclass {text-align:center;}
</style>
#stop
Hopefully I have understood you correctly.
I've finally found a bit tricky but working solution:
#hasSection('fcRadioStyle')
#else
#section('fcRadioStyle')
{{Html::style('css/components/fcradio.css')}}
#stop
#section('styles')
#yield('fcRadioStyle')
#append
#endif
This makes by Form::fcRadio append this style only once
My goal is to convert a markdown document to html, with a table of contents at the top. I saw that Redcarpet has a HTML_TOC option, which is really nice. But when I use it, it only renders the TOC, it does not include the rest of the document.
renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
markdown = Redcarpet::Markdown.new(renderer)
html = markdown.render(File.read(input_file))
How do I render both the TOC and document itself in the same html page?
The only thing I can think of is to render two separate html objects, then combine them. But that is a little messy because I'd have to parse out the head/body tags properly before combining them. Is there a better way?
The only thing I can think of is to render two separate html objects, then combine them.
That would be exactly what you need to do. As a reminder, Markdown does not render a complete HTML document anyway. You only get an HTML fragment. For example a simple Markdown document:
A simple Markdown document.
gets rendered as the following HTML fragment:
<p>A simple Markdown document.</p>
However, for a complete, valid HTML document you need (at least) the following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>A simple Markdown document.</p>
</body>
</html>
Considering that you need to generate all of that anyway, how is it "messy" to obtain the TOC and the body separately?
In fact, in more sophisticated systems, the TOC may be in a sidebar or something. Therefore, using a templating system, the TOC can be passed to a template separately anyway, where it is then placed in a container which separates it from the document body for positioning and styling by CSS.
The exact template syntax might vary depending on which tools you use, but perhaps something like this:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<aside>
{{ page.toc }}
</aside>
<div id="body">
{{ page.body }}
</div>
</body>
</html>
Of course, you don't have to use a template, but is certainly is a "clean" way to generate a document.
I'm having some difficulty getting Jekyll to use a particular theme and I think there's something fundamental I'm missing about how {{ content }} works with posts.
So, in a generic Jekyll site, index.html has a layout specified in its front matter. When the site is generated, the layout includes index.html as {{ content }}. It's kind of inverted, where the page specifies the layout and then the layout calls the page, but simple enough.
Posts, on the other hand, are all generated via a file, post.html, which resides in the _layouts folder even though it isn't really a layout. Like index.html it's essentially just a for loop. This is where I'm running into trouble.
Is post.html a required file? Could I rename it story.html?
Why does post.html require a layout in the front matter? The actual post, that is, the markdown that contains the text for said post, also requires a layout in its front mater. Is there a circumstance where post.html would have a different layout than the layout specified in the markdown file?
Edit: one other question. Why is {{ content }} called in multiple places? index.html and the layout file both have {{ content }}. Why doesn't the layout simply {% include %} index.html and let index.html call {{ content }}
I think you largely figured it out by yourself, but I'll still explain it in my own words.
You're right that {{ content }} is the placeholder in the layout file where the content of the actual page will go.
What probably confused you is the fact that you can build a set of nested layout files where one "inherits" from the other, and each layout has its own {{ content }}.
And yes, I didn't find anything about this in the docs, I figured it out by myself or better, by looking at examples.
So here's an example for you.
First, a default layout and a page:
/_layouts/default.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
/index.md:
---
title: example page
layout: default
---
This is the page content.
The generated HTML will look like this:
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<h1>example page</h1>
<p>This is the page content.</p>
</body>
</html>
Now let's create another layout file that "inherits" from the first one.
You'll probably want to use something like this if you're building a blog with Jekyll.
The layout file shown above is the default for all pages, blog posts and regular ones.
When you want all blog posts to contain additional information like post date and user, tags and so on.
For this, you can create a second layout file which uses the first one:
/_layouts/post.html:
---
layout: default
---
<div class="blogpost">
<i>post date: {{ page.date }}</i>
{{ content }}
</div>
And a blog post which uses this layout:
/_posts\2015-04-08-example-post.md:
---
title: example post
layout: post
---
This is the post content.
And the generated HTML:
<!DOCTYPE html>
<html>
<head>
<title>example post</title>
</head>
<body>
<h1>example post</h1>
<div class="blogpost">
<i>post date: 2015-04-08 00:00:00 +0200</i>
<p>This is the post content.</p>
</div>
</body>
</html>
In other words, something like this happened:
Jekyll used the post layout and put the content of the post into {{ content }}
Jekyll used the default layout and put the complete generated HTML from step 1 into {{ content }}
(no idea if Jekyll really does things in this order under the hood, but you get the idea)
You can see another example if you create a new Jekyll project as shown in the "Quick-start Instructions" on the home page of the Jekyll site.
The example site that Jekyll (version 2.1.1 on my machine) creates has three layout files, two of which (page and post) inherit from the default one.
I have an answer for myself, sort of. Each markdown file is assigned a layout in the front matter. But this "layout" isn't really a layout at all or it's a partial layout?
The terminology escapes me, so I'll just list the steps.
1) The markdown file has layout: post
2) Whatever is in the markdown file gets processed and then sent over to the logic residing in post.html. Here's the part that I wasn't getting right off: post.html has it's own layout. That's what's up in the front matter. Essentially we have the layout's layout.
3) The outer "layout" (default.html in a vanilla jekyll install), wraps itself around the inner "layout" (post.html), which wraps itself around the actual {{ content }}.
post.html could be named whatever, so long as the various layout lines are properly set.
I still don't know why {{ content }} winds up at the top of the layout stack only to be passed all the way back down. I'm not even sure "passed" is the right word when dealing with liquid. I like Jekyll, but it's kind of a nest of snakes.
Simplified my main.blade.php template looks like this...
<html>
<head>
#inlcude("header")
#yield("addToHeader")
</head>
<body>
#yield("content")
#include("footer")
</body>
</html>
Let's say my controller points to login.blade.php and it provides addToHeader and content sections. When my footer is included, I'd like to append the addToHeader section but I just can't get it to work.
In my footer I have tried
#section("addToHeader")
#parent
This is the added content
#yield("addToHeader")
#stop
And variations of this.
Now, for the sake of doing it right and in hopes that I might not spend my resources on doing this the incorrect or inefficient way, here is what I am trying to accomplish by doing this...
When a user logs in every time they try to load a new page, I want the website to throw a message to the user (in my case I am actually "locking" the page down with a modal) that lets the user know he/she must finish setting up her profile before anything else can be done. Is there a controller or route that doesn't care which page/action is being requested and allows me to send extra data to the template - even if it is just $data["lockdown"]=true?
I don't know if it's the best way to do it but i would go for something like this.
Using a session variable to know if the user has to set-up his profile or not:
Session::put('profile_uncompleted',true);
You can set this variable when the user log-in for exemple.
Then on your main.blade.php you can check if you have to display your modal:
#if(Session::has('profile_uncompleted')
#include('modal')
#endif
Where modal contains your Html modal content.