I have created a simple Bootstrap3 layout and want to use blaze templates in meteor but the content from my template is always rendered after my HTML structure.
Here is the code:
<head>
<title>demo app</title>
</head>
<body>
{{#Layout template="mainLayout"}}
{{#contentFor region="main-content"}}
This is the main content area
{{/contentFor}}
{{/Layout}}
</body>
<template name="home">
{{welcomeText}}
</template>
<template name="mainLayout">
<div class="container">
<div class="row">
<div class="col-sm-6">LOGO</div>
<div class="col-sm-6">LOGIN BUTTONS</div>
</div><!-- /header row -->
<div class="row">
<div class="col-sm-12">
<!-- navigation -->
</div>
</div><!-- /nav row -->
<div class="row">
<div class="col-sm-12">
{{> yield region="main-content"}}
</div>
</div><!-- /content row -->
</div><!-- /container -->
</template>
The JavaScript:
if (Meteor.isClient) {
Template.home.welcomeText = function () {
return "Welcome to my site.";
};
}
When I run this, the Bootstrap3 structure works fine but welcomeText is rendered underneath the container.
It seems that I overlooked to pass layoutTemplate option to my iron router route - now it works.
Related
I know my question seems weird but since I'm new when using ghost with handlebars language, I'm quite confused as to where I can find some of this data bind such as title, #site.logo, etc. I try to find it inside casper template but I still not find it, this is the example of the code image inside casper theme
if you ask why I try to find it, I want to try add some of the content inside it or at least I want to take a look what kind of data bind that casper have or provided.
for example in this post.hbs you can see that there is a lot of data bind in here, but I just can't find what else the data bind they provided,
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<header class="site-header">
{{> site-header}}
</header>
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<main id="site-main" class="site-main outer">
<div class="inner">
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header">
{{#if primary_tag}}
<section class="post-full-tags">
{{#primary_tag}}
{{name}}
{{/primary_tag}}
</section>
{{/if}}
<h1 class="post-full-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
{{/if}}
<div class="post-full-byline">
<section class="post-full-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
<div class="author-card">
{{#if profile_image}}
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
{{else}}
<div class="author-profile-image">{{> "icons/avatar"}}</div>
{{/if}}
<div class="author-info">
{{#if bio}}
<div class="bio">
<h2>{{name}}</h2>
<p>{{bio}}</p>
<p>More posts by {{name}}.</p>
</div>
{{else}}
<h2>{{name}}</h2>
<p>Read more posts by this author.</p>
{{/if}}
</div>
</div>
{{#if profile_image}}
<a href="{{url}}" class="author-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
{{else}}
{{> "icons/avatar"}}
{{/if}}
</li>
{{/foreach}}
</ul>
<section class="post-full-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
</div>
</section>
</section>
</div>
</header>
{{#if feature_image}}
<figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
2000px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}
<section class="post-full-content">
<div class="post-content">
{{content}}
</div>
</section>
{{!-- Email subscribe form at the bottom of the page --}}
{{#if #labs.members}}
{{> subscribe-form}}
{{/if}}
{{!--
<section class="post-full-comments">
If you want to embed comments, this is a good place to do it!
</section>
--}}
</article>
</div>
</main>
{{!-- Links to Previous/Next posts --}}
<aside class="read-next outer">
<div class="inner">
<div class="read-next-feed">
{{#if primary_tag}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
{{#if related_posts}}
<article class="read-next-card">
<header class="read-next-card-header">
{{#../primary_tag}}
<h3><span>More in</span> {{name}}</h3>
{{/../primary_tag}}
</header>
<div class="read-next-card-content">
<ul>
{{#foreach related_posts}}
<li>
<h4>{{title}}</h4>
<div class="read-next-card-meta">
<p><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> –
{{reading_time}}</p>
</div>
</li>
{{/foreach}}
</ul>
</div>
<footer class="read-next-card-footer">
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}}
→</a>
</footer>
</article>
{{/if}}
{{/get}}
{{/if}}
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
{{#next_post}}
{{> "post-card"}}
{{/next_post}}
{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
{{#prev_post}}
{{> "post-card"}}
{{/prev_post}}
</div>
</div>
</aside>
{{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
// FitVids - start
var $postContent = $(".post-full-content");
$postContent.fitVids();
// FitVids - end
// Replace nav with title on scroll - start
Casper.stickyNavTitle({
navSelector: '.site-nav-main',
titleSelector: '.post-full-title',
activeClass: 'nav-post-title-active'
});
// Replace nav with title on scroll - end
// Hover on avatar
var hoverTimeout;
$('.author-list-item').hover(function () {
var $this = $(this);
clearTimeout(hoverTimeout);
$('.author-card').removeClass('hovered');
$(this).children('.author-card').addClass('hovered');
}, function () {
var $this = $(this);
hoverTimeout = setTimeout(function () {
$this.children('.author-card').removeClass('hovered');
}, 800);
});
});
</script>
{{/contentFor}}
can someone help me to point it out where I can find a list of data bind they provided? I'm quite confused to understand it
they call that Helpers and you can find the full list here:
Themes documentation
There is several categories: Functionnal, Data, Utility, Extra... And you find several inside with a description for each.
Regards
Are you looking for a particular piece of data that you've put into Ghost admin? {{#site.logo}} and {{#site.title}} is how you out put those data values 😊
I've tried half a dozen different ways to do this but i'm not sure what the issue is.
To start, here is a quick drawing of what im trying to accomplish:
What I want:
http://prntscr.com/br8xh6
whats happening:
http://prntscr.com/br8z8p
What seems to be happening is that my .row .full-row is being rendered twice, and the dynamic template is not being loaded into my <div class="col-md-10> as defined. Why would this be?
Heres my current code:
<body>
<div class="container full-container">
{{> navbar}}
{{> middle}}
</div>
</body>
<template name="navbar">
...
</template>
<template name="middle">
<div class="row full-row">
<div class="col-md-2 left-bar" style="background:#800000;">
{{> Template.dynamic template=sidebar}}
</div>
<div class="col-md-10">
{{> Template.dynamic template=content}}
</div>
</div>
<!-- </div> -->
</template>
<template name="leftbar">
<div class="row">
<div class="col-md-12">
{{> avatar size="large" shape="circle"}}
</div>
</div>
</template>
<template name="usercard">
<div class="col-md-4">
<div class="thumbnail thumb-dark">
<img src="default.png" alt="...">
<div class="caption">
<h3>Player name</h3>
<p>...</p>
Join
</div>
</div>
</div>
</template>
<template name="home">
<div class="row">
{{#each playerslooking}}
{{> usercard}}
{{/each}}
</div>
</template>
<template name="find_page">
<div style="height:150px;width:150px;background:blue;">hello</div>
</template>
JS:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("middle", {sidebar: 'leftbar', content: "home"});
}
});
FlowRouter.route('/find/:_id', {
name: 'postfind.show',
action: function() {
BlazeLayout.render('middle', {sidebar: 'leftbar', content: "find_page"});
}
});
I've refactored my code several times trying to debug this, as I'm not sure how BlazeLayout is suppose to work with nested templates.
All input appreciated, thanks.
Just in case, did you have a try at Blaze Layout root modification?
See: https://github.com/kadirahq/blaze-layout#set-different-root-node
Is there a way to call a template on other template, but excluding it from the CSS selectors and all?
This does not work, the {{> map_template}} looks weird:
<template name="main">
<div class="containerMain">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box">
<img src="images/logo.png">
</div>
<div class="bl-content">
<h2>Pa' Donde Menu</h2>
{{#each mostrarEvento}}
{{> Evento}}
{{/each}}
{{> map_template}}
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
</template>
This works:
<template name="main">
{{> map_template}}
<div class="containerMain">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box">
<img src="images/logo.png">
</div>
<div class="bl-content">
<h2>Pa' Donde Menu</h2>
{{#each mostrarEvento}}
{{> Evento}}
{{/each}}
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
</template>
So is there a way to use {{> map_Template}} inside the <div class="containerMain">, but without applying the CSS and all that stuff?
I'm not a web whiz, but off the top of my head, you need to create a new template for the {{> map_template}}. Make sure to name the class inside map_template and then create a css template inside your style.css or wherever you are getting your CSS from.
Your CSS should end up something like:
.map-template{
//style stuff
}
Where {map-template} matches your class name.
I used this question to try to piece together a solution: How to prevent child element from inheriting CSS styles
Sorry if that isn't quite what you are looking for.
Probably not going about this correctly, but I have an ASP page using Razor and I'm trying to figure out how I can make it so when a user clicks a link in my navigation bar it only changes the main section... I've tried using helpers with the target="mainSection" parameter, but it gives me an error on the Click but that just gives me a runtime error saying " Cannot find '/' application"
Probly missing something stupid...
my _Layout:
<div id="content">
<!-- BANNER -->
<div id="banner">
#RenderSection("Banner")
</div>
<!-- NAVIGATION -->
<div id="navigation">
#RenderSection("Navigation")
</div>
<!-- MAIN DISPLAY -->
<div id="main">
#RenderBody()
</div>
<!-- FOOTER -->
<div id="footer">
#RenderSection("Footer")
</div>
I just want to change the "main" div to whatever page cooresponds with whatever link is clicked.
I was trying to include an HTML file in another HTML File div like follows,
<body>
<form action="#" method="post">
<div class="container">
<div class="sidebar">
<!-- Do not insert any tags here -->
</div>
<div class="contentbody">
<div class="titlearea">
<div class="userprofile"></div>
<div class="pageheading">
<h1>Page Heading</h1>
</div>
</div>
<div class="formarea">
<!-- This is where I have to put the html page which contains a navigatin menu-->
<!--#include virtual="menuset1.html" -->
</div>
</div>
</div>
</form>
But when I run it on chrome it doesn't show up (menuset1), when I test it on dreamweaver it appears from behind of all elements and not in the correct position, Please guide me on this.
I think you should use jquery like,
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
....
....
<script>
$(function(){
$(".formarea").load("menuset1.html");
});
</script>
Or use PHP like,
<div class="formarea">
<?php
include('menuset1.html');
?>
</div>
Read php inclusion of files