I'd like to accomplish something in jade, but not sure on the best approach. I want to have several product pages on a website, and most of these product pages will have the same layout and design, so I'm going to create one jade template. However, I would love to be able to insert some custom HTML for a couple of product pages in particular.
Can I use an include or something to optionally add custom HTML?
You could use jade partials to show different snippets depending on some conditions in the templating context:
if user.description
!=partial(template name[, options])
Or you might use template inheritance and render a different template depending on the same conditional, but this time in your controller. I would probably do the latter.
Related
I evaluate mjml as a tool for making my days less horrible when I need to do something with transactional emails and there is one feature that I can't find any informations of but I'm just sure there is a way for people to do it right.
Reusable layout.
I used to write emails in pug and it was basic feature there. I know mjml wants to be a framework and not template engine but they do have "mj-include" and layout is kind of reverse include.
Pseudo code explaining what I would like to achieve:
layout.mjml
<mjml>
<mj-head>...</mj-head>
<mj-body>
... some header
<mj-this-is-where-content-comes><</mj-this-is-where-content-comes>
... some footer
</mj-body>
</mjml>
welcome-user.mjml
<mj-layout src="./layout.mjml">
<mj-text>
Hi user!
</mj-text>
</mj-layout>
Based on my reading I see few ways how people could deal with it:
mj-include <= documentation examples stands on that, still requires lots of copy and paste for each template
wrapping template with layout in compile process <= I'm loosing the power of mjml tools in this case, I could though set-up watchers that compile and wrap my code in layout for each change
custom component <= seems like the best option but aren't reusable layouts such a common case that if it would be a solution then by now I would probably find custom component for it
Using Node.js and express in a MEAN environment, I am looking for a simple and straightforward template engine, meeting these requirements:
does not dictate me to only use its own weird syntax but allows me to keep writing webpages using pure/plain html and js
supports conditional includes
works with express
operates on server-side (Node.js/Express)
executes freakin' fast ;)
Basically I just want to slice my webpage into several modules (e. g. header, footer, ...) and include those now and then based on simple conditions. I don't want to entirely (re-)rebuild all webpages using a proprietary template language but rather prepare a few html modules that I concatenate at runtime (comparable to PHP where I just use the include instruction to paste prepared html code).
I had a look at http://garann.github.io/template-chooser/ and https://github.com/nodejs/node-v0.x-archive/wiki/modules#templating but the sites seem outdated and according to them, there ain't no template engine available fully meeting my requirements!?
Suggestions anyone?
I think ejs is more natural for what you are looking for https://scotch.io/tutorials/use-ejs-to-template-your-node-application, but jade can work also. The example in the link uses partials, which you dont need to use if ur just rendering a single page
I come from a PHP background and I've used frameworks such as CakePHP and Laravel and it is quite easy to work with layouts and views in all of them.
And the possibility of using PHP inside those template engines provide a way to do things such as:
<?php for($i=0; $i<1000; $i++){ ?>
<td>demo</td>
<? } ?>
Now, starting with Node and express.js I found out template engines seems quite basic here. I've tried hjs, hogan, swig, mustache, handlebars... none of them offers both :
Layout support (templates and views)
A way to do loops like the one I named before.
Am I missing something? Am I asking for too much?
Which one would you recommend me?
A lot of the template engines for Javascript take the philosophical view that it's better to enforce a fairly strict separation between logic and presentation, meaning that the complexity of code/logic allowed in the template is deliberately limited. For a quick overview of this topic, see http://blog.startifact.com/posts/older/the-new-hot-thing-in-web-development-client-side-templating-languages.html (it's about client-side templating, but since it's Javascript, a lot of those same template languages are the ones popular in node.js / Express). This idea of logicless templates exists in the PHP world as well, it's just not as common.
For a more academic treatment of this subject, see this paper: http://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf. (The author is also the author of a popular template engine for Java called StringTemplate.) The author makes a lot of good points, and in general I agree with the idea of logicless templates, but there are times when it can be inconvenient and I find myself more on the fence about it...see this link for some further considerations. Obviously there are also those who want to be able to anything from a template (as you can in PHP) and believe it's fine to rely on the self-restraint of the programmer not to put too much code in the view, which is where template engines like EJS come in.
Having said all that, it's important to note that what you want to achieve is possible in Handlebars (which is one of the "logicless" languages) and probably many of the others you tried as well. To do it in Handlebars, you'd need to create a custom helper. This might be what you're looking for:
https://www.npmjs.org/package/handlebars-helper-repeat
Example usage:
{{#repeat 10}}
{{> button }}
{{/repeat}}
You could also extend it to be able to support arguments to be able to control the starting number or increment, although that would probably be getting into logic that might be better done in the JS code (according to the Handlebars philosophy) while preparing the data for the template.
With regard to layouts, the closest thing in Handlebars (which is the template engine I'm most familiar with) is partials. This link provides a good introduction to those: http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers.
Personally I'm a big fan of the template language in an awesome framework (built on Express) called Derby. Its template language is similar to Handlebars, but comes with a couple of handy extensions - just enough to make it a bit more convenient to use without allowing too much logic to creep into the template. Unfortunately I don't think there's a standalone version of it (i.e. you have to use the full Derby framework), but you could create custom helpers in Handlebars to achieve a similar effect.
I´m trying to understand how the use of the stash plugin will affect the URls of my site.
The traditional way:
I have a template group called site. Within the TG site I have the templates articles, about_us, etc.
The URl will for a single entry be
www.mysite.com/index.php/site/articles/title_of_respective_article
URL for the About-us-page:
www.mysite.com/index.php/site/about_us
Both will reflect the template_group/template structure and thus be SEO-friendly and give users a hint where they are on the site.
But when I use stash I will have 2 wrappers (one for the homepage and one for the rest of the site.
Partials will be used for header, main content and footer.
As far as I understand it, I´ll use the template_groups layout for the wrappers and partials for the main content.
The templating look like
Two wrappers build the TG "layout" Both are hidden, since they should´nt be called directly.
layout
.homepage
.site
Three partials in the TG partials
partials
header
main_content
footer
And by the way shouldn´t those not also be hidden, since they aren´t complete HTML-pages either.
This is what confuses me. How do I get my nice URLs back?
A URL like
www.mysite.com/index.php/site/about_us
will not match the TG/T concept anymore.
Any help?
To expand on both their answers above, and just to be specific to your www.mysite.com/index.php/site/about_us request:
You'd create a template group called "site" and then you may alternatively have something like this code in the /index template
{embed="layout/.site"}
{exp:channel:entries limit="1" disable="categories|member_data|pagination"}
{exp:stash:set name='title'}{title}{/exp:stash:set}
{exp:stash:set name='maincontent'}
<section>
<h1>{title}</h1>
<article>{content}</article>
</section
{/exp:stash:set}
{/exp:channel:entries}
The embed calls the .site layout and the interior simply pulls your specific channel:entries data.
As you can see, it's still using the traditional templategroup/template ways of building URLs, it's just pulling data differently.
When using Stash and the template partials approach (which I don't use personally), the files you mention are all embedded. You still use the same template groups and template files as before.
The Stash-based approach is simply a different way of doing things within your existing templates - not a replacement for them.
Exactly as Derek says. The way to think about it is this - with the template partials approach, your templates contain mostly (if not only) the entries logic (channel entries loop, its parameters, what custom fields are in play for that channel, etc). The outcome of the logic gets stores as stash variables. The stash variables then get called upon by your embedded layout templates to display the content you've stashed. So your URL structure remains the same, but you have considerably less duplication of effort since the more you constrain your templates to logic (i.e. very little if any formatting/display markup) the cleaner they are and the easier it then is to manage your templates.
This article seems to suggest that there such things as include templates. I've made the obvious Google searches but didn't find any documentation.
What are they?
From the Express guide:
The Express view system has built-in support for partials and
collections, which are “mini” views representing a document fragment.
For example rather than iterating in a view to display comments, we
could use partial collection.
So when you have the same "view" for a user in multiple pages, it's more useful to have that view stored in a file and "include" it everywhere. (DRY - Don't Repeat Yourself)
Another example is when have the same layout everywhere and you want to include the rest of the page (for example you could include different headers, footers and body depending on the page).
Here's a good example with Jade, provided in the Express samples:
https://github.com/visionmedia/express/tree/master/examples/jade/views
https://github.com/visionmedia/jade
It's there in one of the H2 headings.