How can I use If statement to specific a variable that is defined in the docpad.coffee file.
I want to do something like this:
<% if sponsor.type == 'Gold': %>
<li class="sponsor-item gold" itemscope itemtype="http://schema.org/Organization">
<a href="<%= sponsor.url %>" class="sponsor-logo sponsor-link" itemprop="url">
<img src="<%= sponsor.logo %>" alt="<%= sponsor.name %>" class="photo" itemprop="image">
</a>
<% else: %>
<li class="sponsor-item" itemscope itemtype="http://schema.org/Organization">
<a href="<%= sponsor.url %>" class="sponsor-logo sponsor-link" itemprop="url">
<img src="<%= sponsor.logo %>" alt="<%= sponsor.name %>" class="photo" itemprop="image">
</a>
<% end %>
This is a code I've made, but he find the string but doesn't add the class "gold" (defined in the li) in the gold sponsor type.
To get variables defined in your template data you must prefix them with the # character, like so #sponsor -> this translates to this.sponsor in javascript.
This is because template data variables are assigned to the this scope in eco. You can read more about this here: https://github.com/sstephenson/eco#the-context-object
Related
I want to display only those pages in the header which have child pages inside them. Using the following code
<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list" >
<li aria-haspopup="true" data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
<a class="" href="javascript:void(0);" data-sly-test="!${item.hasChild}">${item.title}</a>
<div class="wsmegamenu clearfix ">
<div class="container paddingmenu">
<div class="row">
<div class="menuimgdiv" data-sly-repeat.subcategory="${item.listChildren}">
<h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
<ul>
<li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path # extension='html'}">${page.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li aria-haspopup="true"> Dept of Tourism</li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>
gives the following output
But this code -
<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list" >
<li aria-haspopup="true" data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
<div class="wsmegamenu clearfix ">
<div class="container paddingmenu">
<div class="row">
<div class="menuimgdiv" data-sly-repeat.subcategory="${item.listChildren}">
<h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
<ul>
<li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path # extension='html'}">${page.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li aria-haspopup="true"> Dept of Tourism</li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>
gives the output as shown below
The code
<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
is not working properly.
My site structure is as shown below
And the actual desired output is
You cannot use ${item.hasChild} in your test condition as the hasChild() method of the Page API requires you to pass a parameter. AFAIK, HTL doesn't support invocation of parameterized methods.
Since there is no direct API available to check if a page has child pages or not, you may need to do the following to validate if the page has child pages
<a class="" href="javascript:void(0);" data-sly-test="${item.listChildren && item.listChildren.hasNext}">${item.title}</a>
However, I would prefer building the entire navigation tree using Sling models or WCM Use API and not invoking so many methods in the HTL. That would make the code easier to maintain, change and test. YMMV
I tried a simple example, but the SiteNavigationElement is not working when I test it using the Google Structured Data Testing Tool. It gives the error:
SiteNavigationElement is not a known valid target type for the additionalType property.
The Microdata:
<div itemscope itemtype="http://schema.org/WebPageElement">
<link itemprop="additionalType" href="http://schema.org/ItemList" />
<meta itemprop="name" content="navigation_menu" />
<ul>
<li itemprop="additionalType" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<span itemprop="itemListElement">
<a href="http://www.example.com/link_1" itemprop="url">
<span itemprop="name">Link 1</span>
</a>
</span>
</li>
<li itemprop="additionalType" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<span itemprop="itemListElement">
<a href="http://www.example.com/link_2" itemprop="url">
<span itemprop="name">Link 2</span>
</a>
</span>
</li>
</ul>
</div>
The additionalType property should not be used to create another item (which you are doing with itemscope+itemtype). Its job is to provide the URI of additional types, so the URI itself is the value here.
It seems that you want to mark up each link in your navigation. This is not possible with SiteNavigationElement (it can only be used to mark up the whole navigation, so it’s typically useless).
It would be possible with ItemList, and you could provide SiteNavigationElement as additionalType (but I wouldn’t expect any consumer to make use of this):
<div itemscope itemtype="http://schema.org/ItemList">
<link itemprop="additionalType" href="http://schema.org/SiteNavigationElement" />
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">Link 1</span>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">Link 2</span>
</li>
</ul>
</div>
Or as an actual MTE (without additionalType):
<div itemscope itemtype="http://schema.org/ItemList http://schema.org/SiteNavigationElement">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">Link 1</span>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">Link 2</span>
</li>
</ul>
</div>
Same as the MTE example above by #unor, except in JSON-LD.
(If your list has id's it makes sense to use them.)
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":["ItemList", "SiteNavigationElement"],
"#id": "https://example.com/#nav",
"url":"https://example.com/#nav",
"itemListElement":[
{
"#type":"WebPage",
"position":1,
"name": "home",
"#id": "https://example.com/#home",
"url":"https://example.com/home.html"
},
{
"#type":"WebPage",
"position":2,
"name": "Core Solutions",
"#id": "https://example.com/#core",
"url":"https://example.com/core.html"
}
]
}
</script>
I have a markdown file in Hexo with the following in the front matter:
---
title: something blog post
tags:
- local
- world
categories:
- news
date: 2016-07-27 15:08:51
twitter: twittername
facebook:
---
I have added two test variables (twitter and facebook) but is there a way to not output the content from the variable if the variable has not been set?
This is what is outputted from the HTML:
<ul id="social-links">
<li class="twitter">twittername</li>
<li class="facebook"></li>
</ul>
Since the facebook variable was not filled you see nothing, this is breaking my layout since some posts will not have facebook or twitter and so on.
Thanks in advance
with multiple if statements :
<% if (page.twitter || page.facebook) { %>
<ul id="social-links">
<% if (page.twitter) { %>
<li class="twitter">
<a href="http://twitter.com/<%= page.twitter %>" target="_blank">
<%= page.twitter %>
</a>
</li>
<% } %>
<% if (page.facebook) { %>
<li class="facebook">
<a href="http://facebook.com/<%= page.facebook %>" target="_blank">
<%= page.facebook %>
</a>
</li>
<% } %>
</ul>
<% } %>
I was trying use nested if in eco template. Here is my code
<% for document in #getCollection('posts').toJSON()[#document.page.startIdx...#document.page.endIdx]: %>
<% if true %>
<p> <%= new Date(document.date.toDateString()).getTime() <= new Date(new Date().toDateString()).getTime() %> </p>
<div class='row-fluid'>
<div class='span12 blogShadow'>
<div class="row-fluid">
<div class='span12 archiverow'>
<span>(<%= document.date.toDateString() %>) => </span>
<span>
<%= document.title %>
</span>
</div>
</div>
<div class="row-fluid archiverow">
<% if document.img:%>
<img class="span1" src="<%= document.img %>" width=100 height=100 />
<span class="span11"><%= document.description %></span>
<% else: %>
<span class="span12"><%= document.description %></span>
<% end %>
</div>
</div>
</div>
<% end %>
<br/>
<br/>
<% end %>
if I remove first if with its corresponding end statement things working fine, but if I put that it is giving parsing error with message unexpected dedent.
for the else statement down there
<% else: %>
<span class="span12"><%= document.description %></span>
<% end %>
I am new to eco and I don't understand the message. Is this kind of nested if is possible and if not what is the work around for this.
As, I am using docpad and eco I am using as template engine.
Please let me know if any further details is required.
I able to solve the issue by following code. I was missing : to evaluate expression.
<% for document in #getCollection('posts').toJSON()[#document.page.startIdx...#document.page.endIdx]: %>
<% if (new Date(document.date.toDateString()).getTime() <= new Date(new Date().toDateString()).getTime()): %>
<div class='row-fluid'>
<div class='span12 blogShadow'>
<div class="row-fluid">
<div class='span12 archiverow'>
<span>(<%= document.date.toDateString() %>) => </span>
<span>
<%= document.title %>
</span>
</div>
</div>
<div class="row-fluid archiverow">
<% if document.img:%>
<img class="span1" src="<%= document.img %>" width=100 height=100 />
<span class="span11"><%= document.description %></span>
<% else: %>
<span class="span12"><%= document.description %></span>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
both if is working without any issue.
Why lists all the tags?
I use:
<div class="tags">
<ul>
<% for tag, item of #getTagCloud(): %>
<li><a class="tag_item" href="<%= item.url %>" data-tag-count="<%= item.count %>" data-tag-weight="<%= item.weight %>"><%= item.tag %> (<%= item.count %>)</a></li>
<% end %>
</ul>
</div>
How to display a specific page tags?
<div class="tags">
<ul>
<% for tag in #document.tags: %>
<li><a class="tag_item" href="<%= #getTagUrl(tag) %>"><%= tag %></a></li>
<% end %>
</ul>
</div>