0

layout

I want to create an alternating layout using the static site generator hexo – the text of every second post on an overview page should be on the right.

The partial I’m using needs to pass on a custom variable like textOrientation = "left" to the partial function.

<%site.tags.findOne({name: 'featured'}).posts.sort('date', -1).limit(5).each(function(post, index) {%>
    <%- partial('_partial/project-excerpt', {item: post}) %>
<% })%>

The template project_excerp.ejs then needs to generate the according classes bases on the passed variable.

My template (project_excerp.ejs):

<a class="???" href="/project/<%= item.slug %>"><%= item.title %></a>

So the questions are:

  1. How can I extend the post variable with my own variable textOrientation and
  2. How can I use an if then else in my project_excerp.ejs-template?
Pwdr
  • 3,712
  • 4
  • 28
  • 38

1 Answers1

0

Okay, found a solution myself.

index.js:

<%site.tags.findOne({name: 'featured'}).posts.sort('date', -1).limit(5).each(function(post, index) {%>
      <% if(index % 2 === 0) { %>
            <% post.textOrientation = "left"; %>
      <% } else { %>
            <% post.textOrientation = "right"; %>
      <% } %>
  <%- partial('_partial/project-excerpt', {item: post}) %>

project_excerp.ejs:

<% var projectInfoClass = "ta-right"; %>
<% if(item.textOrientation === "right") {%>
  <% projectInfoClass = "ta-left"; %>
<% } %>

<a class="<%= projectInfoClass %>" href="/project/<%= item.slug %>"><%= item.title %></a>

Also helpful to read the EJS-docs.

Pwdr
  • 3,712
  • 4
  • 28
  • 38