In a particular new website using Elixir and Phoenix, there is lots of boilerplate in order to make the pages have a consistent style. Hence there is a "layout" template whose inner_content delegation is inside the html <body> tag (and a couple <div>s for styling). However, some parts of the <head> actually do change page-to-page, and these aren't just a few trivial values like the <title/>, there's a bunch of SEO metadata too.
Worse yet, there's probably enough visible boilerplate in each page, that significant nontrivial parts of the <body> probably ought to be factored out of the individual templates and into the layout, yet those parts might also contain title-like values.
How do I specify arbitrary extra content for the <head>, or for other places outside the one place where the vast majority of page-to-page-variable content goes, without getting an unmaintainable anti-DRY mess? (Where I come from, a child template could divide itself up into multiple named blocks that a layout template could substitute by-name at multiple different places within itself.)
I believe the correct thing to do is to use assigns field on the [Plug.Conn][1]
In my Pheonix (v 1.6.10) there's pre-decided page_title assigns, so just do this:
conn
|> assign(:page_title), "My Special title")
and it just works, because my root.html.heex has this:
<%= live_title_tag assigns[:page_title] || "Rumbl", suffix: " · Phoenix Framework" %>
And I suppose this is the right thing to do with any other custom stuff, like SEO medatada:
conn
|> assign(:my_seo_metadata), "Whatever")
and add in your template
<whatever>
<%= assigns[:my_seo_metadata] %>
</whatever>
Related
What do I do when I run across this?
<div className="ui row myClass">
If myClass was the only class I would import the relevant style sheet and do this:
<div className={styles.myClass}>
This syntax does not work (not surprising) and I am not sure what to do:
<div className="ui row" {styles.myClass}>
Should I just boil it down to a class without tag selectors?
I may have misunderstood you, but if I got you right, what I'd do is simply using template literals, like so:
<div className={`ui row ${styles.myClass}`}>
Take into account, in the end, React components are just JS. That's the beauty of them. Just remember: now any JS expression, like props, etc., has to be with $ sign (between ${} instead of just {}).
I am looking to add additional layout parameters like the #inner for the layout. For example #title for the <title>#title</title> and an area for onload javascript for individual pages.
window.onload = function () {
#onload_js
}
These are set in the layout, so I am not sure the best way to handle these in Phoenix. Thanks :D.
For the page title, you can simply pass a value through from your controller:
def edit(conn, params) do
render(conn, "edit.html", page_title: "Edit The Thing")
end
<head>
<title><%= assigns[:page_title] || "Default Title" %></title>
</head>
Note that this uses assigns[:page_title] instead of #page_title or assigns.page_title as they will error if the :page_title key is not present in assigns.
For including templates (your script example) there is render_existing/3 (and the docs for the same function in the latest version of Phoenix).
The documentation gives a similar example to what you requested so I have copied it here for convenience:
Consider the case where the application layout allows views to dynamically render a section of script tags in the head of the document. Some views may wish to inject certain scripts, while others will not.
<head>
<%= render_existing view_module(#conn), "scripts.html", assigns %>
</head>
Then the module for the #inner view can decide to provide scripts with either a precompiled template, or by implementing the function directly, ie:
def render("scripts.html", _assigns) do
"<script src="...">"
end
To use a precompiled template, create a scripts.html.eex file in the templates directory for the corresponding view you want it to render for. For example, for the UserView, create the scripts.html.eex file at web/templates/user/.
Being a frontend dev familiar with Ruby, i'm trying to learn Django templating system.
It appears to be an inside-out version of what i'm used to. I struggle to comprehend its reverse ideology: instead of declaring reusable blocks and including them where necessary, in Django you mark some parts of your template as overridable.
Here are two things that i don't understand about this.
With Ruby's Padrino, i would declare a partial (a reusable snippet of templated HTML) and then include it in multiple places. Wherever i call it, it would output its HTML.
According to Django's templating documentation, each block can be used on a page only once: Finally, note that you can’t define multiple block tags with the same name in the same template.
Another feature of Padrino that i find extermely useful is that partials can accept HTML and output (yield) it in a certain place inside them. Below are a couple examples, one for Padrino and one for Jade.
Please note that partails HTML not as a string (awkwardly passed via an argument) but in a template language via nesting.
Padrino (Ruby) example
With Padrino i can pass HTML template code into partials:
_container.erb
<div class="container <%= myclass %>">
<div class="container-inner">
<%= yield %>
</div>
</div>
layout.erb
<%= partial 'container', locals: { myclass: 'container--header' } do %>
<h1><%= Sitename %></h1>
<p>Welcome to my humble place</p>
<% end %>
Resulting HTML
<div class="container container--header">
<div class="container-inner">
<h1>Sitename</h1>
<p>Welcome to my humble place</p>
</div>
</div>
Jade example
In Jade, partials are called mixins and are processed directly by the template engine rather than the backend framework:
Jade source
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided
+article('Hello world')
p This is my
p Amazing article
Resulting HTML
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
Is it possible with Django?
Questions:
How do i reuse a block multiple times in Django? I would like to declare a snippet of template code and include it in multiple places on the page.
How do i pass HTML (template code) into a block? I would like to reuse it with different content.
The use case that i'm trying to cover is a reusable partial/mixin/block that would serve as a container wrapper for each section of the site.
Note that with Padrino, i can even make the partial in such a way that it will let me choose which wrapper tag (div, nav, header...) should be used for each instance of the partial, by passing an argument when including the partial:
<% partial 'container', myclass: 'container--header', tag: 'nav' %>
I wonder how to do that with Django.
In your answer, please comment on whether it is possible with both a) basic Django functionality; b) some Django extensions.
Thank you.
I’m not familiar with Padrino, so I’m not 100% sure I understand what you’re looking for.
However, Django template blocks definitely aren’t the equivalent of Padrino’s partials. From your description, I think the equivalent would be custom template tags.
In outline, to create a custom template tag, you:
Create a templatetags module within your Django app, with a file in it to contain the Python code for the tags e.g.
yourapp/
models.py
templatetags/
__init__.py
mytemplatetags.py
Within that file, create a variable called register that’s an instance of django.template.Library:
# mytemplatetags.py
from django import template
register = template.Library()
Within that file, write a function for each custom tag that you want.
For a tag that includes a template snippet, you’d want to write an inclusion tag.
Inclusion tags can take arguments, which could include HTML (but only as a string).
I'm new to docpad and a lot of the things which it's based upon, therefore sorry if this question might seem a bit dumb. So far docpad is the most designer-friendly one of the recent static site builder out there, that's why I even made it until here :) Thanks for the amazing documentation!
What I'd like to achieve is the following:
setting up pages in a way that I can access different sections via the template (e.g. paragraph 1, table 1, paragraph 2)
having a template which allows me to change the structure/order of the content of those pages (eg moving around the paragraphs on all of them by changing the template)
The metadata section sounded good for that, but it does not allow any markup languages in there, right? So where can I define those different "paragraphs" and how can I access them via the template?
Thanks, Philipp
So you could do the following:
--- cson
someContent: """
# h1
p1
"""
---
<%- #document.someContent %>
And name the file blah.html.md.eco so render the eco first which wil inject someContent, then it will render with markdown, rendering someContent.
We also had --- cson to say use CSON to parse the meta data rather than the standard YAML parser. I find CSON easier to write for more advanced things and multi-line inputs.
Alternatively for the rendering aspect, you can use the text plugin to specify how pieces of content should be rendered like so:
--- cson
someContent: """
<t render="md">
# h1
p1
</t>
"""
---
<%- #document.someContent %>
I have a pretty straight forward question, in regards to joomla templates.
The end result being : http://css3playground.com/flip-card.php
What I want to do is simple, in a sense, but need to know where to look;
I want to have the entire page wrapped in two divs, all the PHP code, to which class i can define in css and drop in some javascrpt so I can apply page transitions to that div. All of which I know how to do except for where to do it in, the PHP structure of joomla is new to me.
and also, after the first step is accomplished, create a second div after the content that would be dynamically loaded with content from clicked links on the page from within the template, but thats two questions at once lol.
Any ideas on the first part?
If you just want to use a div to encompass the entire template, do exactly that: wrap the template in a div and give it a custom class or id:
<html>
<head>
//stuff here
</head>
<body>
//insert the wrapper here
<div id="wrapper">
//template structure here
</div>
</body>
</html>
The file you want to edit will likely be named index.php located at public_html/templates/your_template/index.php.
For some templates, such as those by Yootheme, you will instead want to edit the file at public_html/templates/your_template/layouts/template.php (or /public_html/templates/your_template/styles/current_profile/layouts/template.php if you're using a profile other than the default).