I am using the layout taglib to extend a page to its template but i don't know how to pass a variable to the main layout and apply a conditional class.
Considering this is my main-layout.marko
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="#### (TITLE === 'REGISTER')?'ACTIVE':'INACTIVE' ####">
<layout-placeholder name="title"/>
<layout-placeholder name="body"/>
</body>
</html>
this is my registration.marko
<layout-use template="./layout.marko">
<layout-put into="title">
$data.title
</layout-put>
<layout-put into="body">
some content
</layout-put>
</layout-use>
and finally this is the code I use to render the page and pass the title data
router.get('/register', function(req, res, next) {
registration.render({
title: 'register'
}, res);
});
How can I create a conditional class on the main-layout.marko file that switches between active or inactive depending on the page title?
Thanks
You can pass data to a layout by adding additional attributes to your <layout-use> tag. See: marko-layout » Layout Data
For your example, the following will work:
In main-layout.marko:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="#### ${data.title === 'REGISTER' ? 'ACTIVE' : 'INACTIVE' } ####">
<layout-placeholder name="title">
${data.title}
</layout-placeholder>
<layout-placeholder name="body"/>
</body>
</html>
In registration.marko:
<layout-use template="./layout.marko" title="${data.title}">
<layout-put into="body">
some content
</layout-put>
</layout-use>
That should solve your problem, but let me know if you are still stuck.
there is another way of passing data t all of its template that is using $global in which you are passing your data .
and after using global you dont need to add attribute to any tag . you can access it by using like
out.global.username
Related
I am following https://help.twitter.com/en/using-twitter/embed-twitter-feed for embedding timeline in the angular page. Only button renders but not the actual timeline.
The index.html looks like:
<body style="margin:0">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<app-root></app-root>
</body>
app.component.html looks like below:
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
A Twitter List by TwitterDev
</a>
Also tried things like app.component.ts:
ngOnInit(){
if ((<any>window).twttr.ready())
(<any>window).twttr.widgets.load();
}
But no luck
you need to load widgets.js script after twitter-timeline element is been render so if you place the script in index.html it is will load and the element hasn't render yet.
🌟 the best way around it is to create a script tag dynamically after the element is rendered.
twitter component
export class TwitterComponent {
#Input() user:string;
constructor(private renderer2: Renderer2,private el: ElementRef) {}
ngAfterViewInit() {
let scriptEl = document.createElement('script');
scriptEl.src = "https://platform.twitter.com/widgets.js"
this.renderer2.appendChild(this.el.nativeElement, scriptEl);
}
}
template
<a class="twitter-timeline" href="https://twitter.com/{{user}}">Tweets by {{user}}</a>
app componenet template
<app-twitter [user]="name"></app-twitter>
angular twitter widgets ⚡⚡
ngAfterViewInit() a lifecycle hook that is called after Angular has fully initialized a component's view.
Updated 🔥🔥
a simple soulution mention in this answer before by user named Bernardo Baumblatt
put the script link in the index.html
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
load the twitter widgets when ngAfterViewInit method call
ngAfterViewInit() {
// #ts-ignore
twttr.widgets.load();
}
in any case the script has not loaded yet you will got an error like 🆘 twttr is not defined 👉 so download the widgets.js script and include it to your project by using import
main.ts
import './app/widgets.js'
demo 💥💥
I had a requirement of dynamically rendering timelines based on different twitter timelines.
I found a workaround by creating a variable in the constructor that stores the href based on the twitter username .
So for example if your link is "https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw"
, you just put this in the constructor in a previously defined global variable , say "embedLink"
such as in your ts component:
#Component({
selector: 'app-tree-dashboard',
templateUrl: './tree-dashboard.component.html',
styleUrls: ['./tree-dashboard.component.css']
})
export class TreeDashboardComponent implements OnInit,AfterViewInit {
embedLink='';
constructor(private matIconRegistry: MatIconRegistry,
) {
this.embedLink= "https://twitter.com/TwitterDev/lists/national-parksref_src=twsrc%5Etfw"
}};
and then in your HTML :
<a class="twitter-timeline" href={{embedLink}}></a>
And lastly you only need to add the script in index.html which you have done already.
So you're good to go!
Below is my code. I'm creating blank website so I think it's should not be a problem. What I think is maybe the order of the script in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
</html>
In my app.component.html
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
A Twitter List by TwitterDev
</a>
You can view my code here
I use hbs to render my pages with partials for navigation and footers.
router.get('/test', function (req, res) {
return res.render('test');
});
On one page I have template that uses mustache.js. This template doesn't work as it should as the {{}} seems to be picked up on the hbs render. Below is a basic example that illustrates the error. If I load this as a static page with express I get "Joe is a Web Developer", if I render it with hbs I get "is a".
Are there any work arounds that wont involve me changing how all my pages are rendered?
<!doctype html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<script type="text/javascript" src="js/libs/mustache.js" ></script>
<script>
var view = {
name : "Joe",
occupation : "Web Developer"
};
function loadtemp(){
var output = Mustache.render("{{name}} is a {{occupation}}", view);
document.getElementById('person').innerHTML = output;
}
</script>
</head>
<body onload="loadtemp()" >
<p id="person"></p>
</body>
</html>
It was simple enough. I just had to escape the brackets with a \
So all it took was
\{{name}}
I'm new on Thymeleaf template engine, and I'm making an application with Spring Boot and Spring MVC. I'm working just with application.properties for the configuration.
I want to know how I can write only ONE layout but the contents in many files: for example content1.html, content2.html, etc. and use the layout that already have the header, the footer.
If it is possible, how can I send from the controller the content file that will be replaced in the layout?
You could do something like this. Let's say you create a page where all other content will be embedded - main.html. It will look something like this:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/xhtml">
<div th:fragment="mainPage(page, fragment)">
<h4>Some header</h4>
<div th:include="${page} :: ${fragment}"></div>
<h4>Some footer</h4>
</div>
</html>
Then you want to create some page which will be embedded in your main.html page - some-page.html:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/xhtml">
<div th:fragment="somePage">
<h1>${title}</h1>
</div>
</html>
The goal is to replace <div th:include="${page} :: ${fragment}"></div> within main.html with the content from some-page.html. In controller, that will look like this:
#Controller
public class DemoController {
#RequestMapping
public String somePage(Model model) {
// Note that you can easy pass parameters to your "somePage" fragment
model.addAttribute("title", "Woa this works!");
return "main :: mainPage(page='some-page', fragment='somePage')";
}
}
And there you go! Every time when you want to swap content in main.html, you just change page and fragment parameters within string in your controller.
I am using following code to create a html element in the page body with using YUI.
This code doesn't produce any error.
The issue is, the paragraph element is not created in the html page.
<html>
<head>
<title>YUI Test</title>
<meta charset="UTF-8">
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<script>
// Create a YUI sandbox on your page.
YUI().use('node', function(Y) {
// Create DOM nodes.
var contentNode = Y.Node.create('<p>');
contentNode.setHTML('This is a para created by YUI...');
});
</script>
</head>
<body>
<h1>Page body section...</h1>
</body>
</html>
The node is created, but it is also detached from the DOM. You have to attach it to the DOM by using either
Y.one('body').append(contentNode);
or
contentNode.appendTo(Y.one('body'));
or
Y.one('nav.main-navigation').insert(contentNode, 'before');
or any of the other methods for manipulating dom in YUI.
I trying to create main page (part of node.js and mongoDB application) that includes login form.
To add view part I included js files with function that returns HTML, but as I can see much better is using template engine.
Everything is OK until I including one compiled swig part inside another one.
The output of main page is OK, but login part outputs like text on the page.
How is possible to output the login HTML as HTML instead of plain text?
Does more information needed to understand the issue?
Thank you in advance.
var swig = require('swig');
var mainPage_tpl = swig.compileFile(__dirname+'/../views/mainpage_tpl.html');
var formLogin_tpl = swig.compileFile(__dirname+'/../views/login_tpl.html');
var loginOutput = formLogin_tpl();
var mainPageOutput = mainPage_tpl({
title: 'Sometitle',
pagetitle: 'Somepagetitle',
content: loginOutput
});
exports.get = function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(mainPageOutput);
res.end();
}
mainpage_tpl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/assets/reset.css" />
<link rel="stylesheet" href="/assets/style.css" />
<script type="text/javascript" src="/assets/jquery-2.0.0.js"></script>
<script type="text/javascript" src="/assets/script.js"></script>
</head>
<body id="login_page">
<h1>{{pagetitle}}</h1>
<div id="content">{{content}}</div>
</body>
</html>
If you want to include literal HTML, you need to tell Swig to not escape it using the safe filter:
...
<div id="content">{{ content|safe }}</div>
...