Using a dir structure:
clients
main.css
main.html
main.js
server
main.js
imports
ui
partials
header
header.css
header.html
header.js
header.collection.js
body
body.css
body.html
body.js
body.collection.js
footer
footer.css
footer.html
footer.js
footer.collection.js
in the client/main.html (via main.js)
I would like to create something like: (simplified)
{{headercontent}}
{{bodycontent}}
{{footercontent}}
What is the import structure to add these partials in main.js?
Thanks all
You can create these partials by creating different templates for each of them.
I will give a short example. Let's say we want to create a page(finalTemplate) with four component- 1)header,2 )footer, 3)Sidebar and 4) Content.
The structure you have made is good for these. You just need to be careful with importing the required files while writing the codes.
Just as a caution, the collections has to be imported in both server and client startup.
To include the four components in the fial you just need to include those templates.
so my final page will look like
<template name="finalTemplate">
{{> header}} //Templates are imported by {{> TemplateName}} Not by {{TemplateName}}
{{> sidebar}}
{{> content}}
{{> footer}}
</template>
Example import structure for the example you asked for:
header.js
import './header.html'
import './header.css'
import '.header.collections.js'
In startup function for server, you should import all collections files as they are needed on server side.
Related
I've got a meteor project with a few different blaze layout templates and I'd like for them to each have their own LESS stylesheets. How do I import them on a per-layout basis, i.e. not importing them all in the main.less file?
The easiest approach is to literally import them from your template js files like so:
// File layout.html
<template name="layout">
<div class="layout-wrapper">
</div>
</template>
// File layout.less
.layout-wrapper {
display: flex;
justify-content: center;
}
// File layout.js
import './layout.html';
import './layout.less';
Template.layout.onCreated(function () {
// etc...
});
Now when you load the template's layout.js file, either by eager loading, imports, or dynamic imports, it will insert the compiled less to the page.
The problem is that in production, Meteor concatenates all the CSS into one big file, so you can't attach a specific file only to one template.
I got around this by basically defining an automatic wrapper div like so:
In your router, define a default layout e.g. in ironRouter:
Router.configure({
layoutTemplate: 'mainLayout',
});
In your mainLayout template, create a wrapping div something like this:
<div class="custom-page-wrapper-{{currentRouteName}}">
{{> yield}}
</div>
Define a global currentRouteName helper like this:
UI.registerHelper("currentRouteName",function(){
return Router.current() ? Router.current().route.getName() : "";
});
With that, every template that uses this layout template will automatically be wrapped in a div with a custom-page-wrapper-XXXX class that is unique to each template and based on the route's name (which is guaranteed to be unique or else ironRouter will raise an error).
After that, you can specify any template-specific styling within that class in any LESS file you want.
Although this isn't exactly the same as specifying a different file for each template, it functionally accomplishes the same thing with the only expense being an extra wrapper div.
is there a mechanism in the react ecosystem to import sass files only when a component is loaded? For example, I may have the following structure:
client/
main.scss
routes.jsx
main.html
imports/
components/
componentA/
ComponentA.jsx
ComponentA.scss
componentB/
ComponentB.jsx
ComponentB.scss
Let's say ComponentA is used only in the public area while ComponentB is used only in the admin area. If I #import both component stylesheets into the main.scss file, the public will be downloading extra data they will never use. Is there any solution to this problem in the sass world?
Since you are using meteor this is what you can do, use import in your jsx file
In your ComponentA.jsx file use:
/imports/components/componentA/ComponentA.scss
If you want to get the scss file only if you are rendering the component, then you can do a require of this file in the render method instead of using import in the file.
Here is the link :
https://guide.meteor.com/build-tool.html#css-importing
I hope someone can give me a hint.
I would like to import content from one file into my handlebar file. Is it possible?
In my case, it is an css/scss file (e.g. reset.css) which stylings I want to import into my handlebar file (styleReset.hbs).
The "styleReset.hbs" should looks kind of like this:
<style type="text/css">
<!-- import of reset.css content -->
</style>
P.S. I don't want use the -tag
Yes, it is possible to import the external css file into your handlebars .hbs file (i.e- Template engine).
Follow these steps :
First create a folder public under which place your css
folder, which content all your css files. For ex folder structure would be - public/css/style.css (Note: This public folder contains all your static files like css, images, etc)
Register your public folder to express in your .js file by app.use(express.static(__dirname + '/public'));
Now you can import external css file in handlerbars template file
by <link rel="stylesheet" href="../css/style.css">
You can't import files with handlebars, only partials. You could precompile your reset.css as if it was a handlebars partial and include that with {{> filename}}.
Without knowing your build setup I don't think I can go into more detail.
http://handlebarsjs.com/precompilation.html
(Personally I'd use sass to import my reset.css to some main stylesheet that I include in the page.)
It is also possible to have a 'main' layout too, that can include header and footer.
app.engine('.hbs', exphbs({
extname: '.hbs',
defaultLayout: 'main'
}))
app.set('view engine', '.hbs')
Also, if you are using the module, "express-handlebars"(not "hbs"). You can set your extension name too.
1)In order to use your .css file in handlebars, file should be registered for use in app.js/server.js file shown bellow.
app.use("/bootstrap",express.static(__dirname+"/node_modules/bootstrap/dist"))
2)import the file in your handlebar file as given bellow image(it works for both main layout and child layout.
i) In Main Layout File
ii) In Child Layout
index.js
public:
style.css
views:
index.hbs
Inside index.js
var express=require('express');
var app=express();
var hbs = require('hbs');
app.set('view engine', 'hbs');
app.use(express.static('.'));
Inside index.hbs
<head>
<link href="./public/style.css" rel="stylesheet">
</head>
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.
I would like to use the meteoric package to create a very simple app with meteor and the ionic framework. Using the guide, I created the following very simple app:
Router.js:
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', function () {
this.render('MyTemplate');
});
Templates.html:
<template name="layout">
{{#ionBody}}
{{> ionNavBar}}
{{#ionNavView}}
{{> yield}}
{{/ionNavView}}
{{/ionBody}}
</template>
<template name="myTemplate">
{{#ionContent}}
Hello World!
{{/ionContent}}
</template>
The app loads without errors, and shows the content "Hello World!" without any styling at all. For example, why is the iosNavBar not being shown?
Look at the installation instructions for ionic-sass:
https://github.com/meteoric/ionic-sass
It says:
in your app's .scss file:
#import
'.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';
So in your meteor application, create a style.scss file with the above import statement. Now you should see the styles applied correctly.
for those who still find the icons missing add the second line to import ionicons
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/ionicons';
sample app referrence link
https://github.com/meteoric/contacts/blob/master/client/stylesheets/app.scss