I have a header.html file that is included by grunt-processhtml in all others html files.
My header file contains the tags "<head>" and "</head>", the others html's files (for example, index.html) include the header calling the following command:
<!-- build:include layout/header.html --><!-- /build -->
I would like to have a metadata (for example <meta name='x'content='y'>) generated dynamically for my application for each page. It's easily read from the all html files. But, I wonder if is possible to "header.html" include the metadata from "index.html" or any other html file.
Remembering that header.html is in the top of the hierarchy, so a "son" file should be include in his "parent".
Or... Have some better way to do that?
Thanks,
It seems to me you're at the point when it becomes worth it to look at a fully fledged template system (Zetzer, Mustache, Handlebars, Jade,...) - or even a full-blown site generator maybe (assemble, metalsmith,..), depending on your context. They all have grunt plugins afaik.
This would let you do your requirement easily, and open further possibilities, like generating more of your html from your data.
Related
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
How to use a free bootstrap template (e.g., from startbootstrap.com) in meteor. I mean where the resources- html file, css folders and js folders of the free template should be put and what packages are needed to add/remove in meteor project file? I have tried it several times but got errors and the program crashes each time. I also transfer the script and link tags from section to section, but it did not work.
Just add the css of the template to the client of your Meteor project. Also, try using the nemo64:bootstrap package for Bootstrap. This will add some files to your project automatically, one of which will say is editable at the top. You can put your custom css in that file.
You can put the relevant html, css, and js files anywhere on the client. (Sticking it inside a folder called client will do that).
Image and font files should go in a folder called public.
You will need to make meteor templates from the HTML files. As is they will be missing any <template name="foo"> tags.
The css files can go anywhere under /client and they will automatically be added to the project. These are the easy ones.
The js files are the harder ones. If you put these under /client they will be wrapped by Meteor and will not have global scope. In all probability they won't work at all. You can put them under /public and modify your head.html file to include them to get around that problem. Odds are there won't be very many js functions in the free template anyway so you might want to read through them and see which ones you really need and then convert those to be proper template helpers or global functions on the client.
I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
Let's say I have a website with following pages:
www.server.com/index.php
www.server.com/anotherPage.php
www.server.com/css/style_for_index.css
www.server.com/css/style_for_anotherPage.css
Assuming, I am visiting www.server.com/index.php:
When using .appcache manifest in the <HTML> tag, I understand that every associated file of this page is automatically cached anyway.
But if I wanted to load, at the same time, www.server.com/anotherPage.php, then I would also have to load www.server.com/css/style_for_anotherPage.css in the CACHE section of the manifest.appcache file.
What I don't understand is if I would also have to include the background-images from www.server.com/css/style_for_anotherPage.css into the manifest.appcache file.
I understand that every associated file of this page is automatically cached anyway.
This is incorrect.
You need to explicitly mention any resource you want to be cached, except for the so-called master entries. Master entries are the HTML files that include a manifest attribute in their <html> element. So also any images, scripts, stylesheets referenced by these files.
Obviously, you need to also include any files referenced by your css or javascript files, if you want them to be available offline.
I have this:
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include("~/Content/Styles/Default/Site.css"));
On my sites i have this:
#section Styles
{
#Styles.Render("~/Content/Styles/Default"))
}
My _Layout.cshtml looks like this:
#RenderSection("Styles", true)
Everything looks good, eh? Well, not really. When i compiled my application in release mode, decided to publish it, this is what it renders:
<link href="/Content/Styles/Default?v=78dkNySP_xsiuzsgxCx_GGnnHzYS-B8nNdnXqcl47XI1" rel="stylesheet">
Instead of generating href to a file, it generates some kind of id? Guid? Why? O.o
This is how bundles work. It's main purpose is for you to combine multiple CSS (and JS files for that matter) files into one package. e.g. you no longer have to put all your css (and js) into one huge file. Just split it up into sections, then add it into your bundles, and it packages it up into one item. Less web requests, the faster your page load time.
e.g. Lets say you had 2 css files. One's the main, but you had one for your menu system.
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include(
"~/Content/Styles/Default/Site.css",
"~/Content/Styles/Default/Menu.css"));
This would show up as a single call with the GUID type code (to prevent caching on file changes) on the URL. This URL will link to a minified and bundled css.
But my browser cannot read that! There is no physical path to a file!
It's a sort of virtual file. MVC's bundling uses the routing engine to point it to a combined and minified version of a particle bundle.