I would like to create external Handlebars files using the following -
1. header- Contains html codes
2. footer- Contains html codes
3. nav- Contains html codes
4. search - Contains html codes
etc.
Is there a way with handlebars to do this, so that I can include each template if and when needed in a specific page. Not sure how to go about it.
Thanks!
Absolutely! You can use Handlebar partials to do this. Simply register your header, nav, etc files as partials and then you can use this in your main template by doing something like this:
{{> header }}
{{> nav activePage=(activePage) }}
Have you considered using ASP.NET?
If you wanted to add content from other html files, I would highly recommend using
#RenderPage()If you use this, then you could set up a layout such as:
#RenderPage("header.html")
Some random description
#RenderPage("navigationbar.html")
#RenderPage("searchbar.html")
- Insert some content here -
#RenderPage("footer.html")
I'm certain that if you use this kind of layout, you'd get the appearance you would want. Obviously this is just an example, so you'd probably want to add some kind of CSS layout to suit your taste, but this is how I would go about it in ASP.NET.
Related
I wanted to know if it was possible to put twig code in ckeditor and that it interprets correctly the code in order to generate the HTML code.
I've already seen some configurations (using "protectedSource") that allow to put twig code within ckeditor but when I do that, the twig code is still interpreted as a string.
My goal here is to create some twig functions that I could use inside CKEditor.
Example :
Let's say that the "my_complex_table_function" function return a complex table, i would like to be able to put
{{ my_complex_table_function }}
in CKEditor and that it returns the table in the front page.
Is that possible ?
Thanks guys
According to the FreeMarker include statement docs, you can make header- and footer- aware templates like so:
<#include "/header.ftl">
<!-- Content of my this page -->
<#include "/footer.ftl">
But if my web app has hundreds of pages/views, this is a lot of redundant copy pasta. It would be great if there was like a "layout" concept in FreeMarker, where I could say "Hey, here is a layout:"
<#include "/header.ftl">
<#import_FTL_Somehow>
<#include "/footer.ftl">
And then create separate templates for each view/page (index.ftl, contactUs.ftl, etc.) and then tell FreeMarkers which FTL files "use" the layout. That way I wouldn't have to keep specifying header/footer includes in each and every template file.
Does FreeMarker support this kind of concept?
It doesn't, though if you only need a footer or header it can be solved with some TemplateLoader hack (where the TemplateLoader inserts the header and footer snippets, as if was there in the template file). But the usual solution in FreeMarker is calling the layout code explicitly from each templates, but not with two #include-s directly, but like:
<#my.page>
<!-- Content of my this page -->
</#my.page>
where my is an auto-import (see Configuration.addAutoImport).
Update: Another approach is that you have a layout.ftl like:
Heading stuff here...
<#include bodyTemplate>
Footer stuff here...
And then from Java you always call layout.ftl, but also pass in the body template name using the bodyTemplate variable:
dataModel.put("bodyTemplate", "/foo.ftl");
cfg.getTemplate("layout.ftl").process(dataModel, out);
I would like to change the code before or after jade render HTML. I need to change the code to add some specific functions. For example
h4#headline Click to register
a(href="myLink", data-type="foo") Here
I would like to prepare all links or html tags with data-type by the value in the tag.
Is that possible or has anybody experience with that?
Thanks for help!
I would like to know the possibility to develop custom html tags or custom html attributes to node.js , rather in jade, html or another html template enginer. I was looking at PhantomJS and I don't realize any example that accomplish it, either Cheerio as well. My goal is to make some components to easily usage in any kind of popular html engines. Any direction will be very helpful. Thanks!
Node.js is just a webserver, You need something to parse the custom tags, so its either the template engine that will convert it to valid html, or client side with JavaScript (aka AngularJS directives)
You can write your own filter similar to the example
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
That would give you
<body>
<p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even
link to stuff
</p>
</body>
I want to be able to dynamically reference JavaScript and Stylesheets depending on which page a user is on in Express. I thinking the best way to do so (though I'm open to suggestions) is to pass the current view to the layout page.
For example;
Given the url http://example.com/trees
I would want to have some logic in layout.jade that said something to the effect of:
script(src="/javascripts/{view}.js")
Which would get rendered as:
<script src="/javascripts/trees.js"></script>
Any suggestions or best practices for doing this?
req.route is the matched route, so things like req.route.path etc are available, or of course req.url which may be parsed. With express 2x you can expose these values to views automatically using "dynamic helpers" or res.local()
There are no best practices for doing this, since Express doesn't provide Rails like url helpers, so I think you're approach is fine.
The easy answer is to just put ALL your javascript into a single file and be done with it. Ditto for CSS. See the Ruby on Rails asset pipeline for details. You are probably making your life more complicated than necessary and also less efficient by having different javascripts on different pages.
However, since you asked, the answer for javascripts is easy. Just put the extra <script> tags in the view, not the layout. Problem solved. CSS doesn't work as cleanly because the <link> tags need to be inside the <head>. In this case, I define the styles I need as an array of strings and loop over that in my layout template. So in my route I set up a local variable such as
locals.css = ['/css/one.css', '/css/two.css']
Then just loop over that in your template and generate one <link> tag for each.