I've recently set up a meteor website and am really loving how easy it is to build templates from data in my mongo db.
One part of my website I just want to render a static html file in my layout template I've setup. At the moment I have a layout file that looks like this
<template name="mainLayout">
{{> yield region="navBar"}}
{{> yield}}
{{> yield region="footer"}}
</template>
All I want to do is when I hit a specific route instead of finding a template and filling it with data from the db I just want to insert a static html page into that main part of my layout.
Is this possible or do you have any suggestions on other ways to solve this?
I can't think of a way to standardise what I have in these html files so they all fit one template so its much easier to just serve them as static pages.
Related
after a PC crash I was luckily able to recover data but not programs and settings. Now using VS Code + Prettier I'm not able to have multiple Handlebars partials to new lines. Eg:
{{> Partial_1}}
{{> Partial_2}}
on save it becomes:
{{> Partial_1}} {{> Partial_2}}
Can't find the solution (or maybe I'm not asking the right question to Google)...
There are some issues with Prettier & handlebar files. From your example, it seems that you are using HTML Language Features as the formatter.
Try setting this in your VS Code settings.json file
"html.format.indentHandlebars": true
You can however right-click the .hbs file and select the option Format Document With to choose Prettier. You can also set Prettier as the default formatter for handlebar files but currently, Prettier uses the Glimmer parser for handlebar files which does not support partials so your codes won't be formatted properly.
See the related issue on Github: https://github.com/prettier/prettier/issues/11834
Possible workaround: How to solve handlebar partials are not supported in VS Code?
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 read posts about meteor file loading order.
But if I wish to make sure a CSS snippet will override any other CSS (loaded later for another template) How can I make sure the CSS snippet has final word for a template?
(put it in a top folder non lib would anyway load it before the following templates. And using another template, the problem will be the same from the POV of that other template)
Some people suggest, and I like it, to have a CSS file for each template, so we know what CSS is used for that template and we do not build a big large CSS, even if, meteor consolidate them.
I like the convention of adding a unique class name to each template. Here's an example:
<template name="posts">
<div class="__posts">
{{#each posts}}
<p>{{text}}</P>
{{/each}}
</div>
</template>
Then in your css you can specifically target instances of the posts template like this:
.__posts p {
color: blue;
}
You don't, of course, have to use the double-underscore but I find that makes a convenient indicator that the class is unique to a template. Also note this technique solves another common problem: how to identify which template rendered which portion of the current DOM.
I'm creating a meteor package, very simple one like this
api.addFiles(['errors.js', 'errors_list.html', 'errors_list.js'], 'client');
I noticed that if I change above code to
api.addFiles(['errors.js', 'errors_list.js', 'errors_list.html'], 'client');
Meteor says: Template is not defined.
It is very hard to find out what caused this error. And why js file cannot go before html file in addFiles?
When you use Spacebars (the default templating engine), templates are defined in HTML files :
<template name="fooTemplate">
...
</template>
You can then access this template from everywhere else, be it HTML or JS:
<!-- HTML file -->
{{> fooTemplate}}
//JS file
Template.fooTemplate
If you try to do such an access before the template has been created, it will fail.
Meteor packages load files sequentially. This is how you control the load order.
If you try to use a template before it has been defined, it's undefined and will throw an exception when you try to access it (something along the lines of fooTemplate is undefined).
Thus, as in everything in programming, always initialize first and use later.
Put your HTML files before the JS, and you're good to go.
I want to develop a usual website with Meteor.js (not one-page web app) and I want to load only specific css files for every page. So not all pages share the same css code.
Is it possible?
First off if you are using Meteor you are not building a "usual" site, you are building a very powerful SPA (single page application). You can imitate a "usual" website with introducing routing, try IronRouter.
OK now about CSS. Once you deploy Meteor all your CSS and JS are merged and minified. So if you want to achieve what you are asking you will need to add a package like this one.
https://atmospherejs.com/mrt/external-file-loader
https://github.com/davidd8/meteor-external-file-loader
Then attach it to trigger once a template is created:
Template.myCustomTemplate.created = function() {
Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
I believe you could also load the CSS from the Meteor server through Meteor's Asset API. Read more here: https://docs.meteor.com/#/full/assets
I found a simple solution. In your meteor project folder create a folder named "public" (no quotes). In that folder create a folder called "css" (no quotes). Put the CSS file in that folder.
In the html file which you want the specific CSS file to apply to do the following:
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
Since the last part of your question says, "So not all pages share the same CSS code." you might consider using less and wrapping your template in a different div class.
For example
HTML file
<template name="page1">
<div class="page1css">
<p class="content">Page 1 content</p>
</div>
</template>
LESS File
.page1css {
.content {
font-size: 2em;
}
}
This way you can just wrap your pages and the corresponding css in the correct class.