Hexo: Can different pages use different layouts?

Created on 17 Dec 2014  ·  11Comments  ·  Source: hexojs/hexo

Sorry for this stupid question, but I am new to hexo.
I'd appreciate if anyone can provide any infomation.

Most helpful comment

@linkarys @jlVidal @nxfifteen I just tried this out with the latest hexo version and it seems to work.

First I create a new page:

$ hexo new page foobar

By default /foobar will use the page layout, but then I added layout: to front matter.

---
layout: foobar
title: foobar
date: 2016-02-05 14:42:23
---

This loads my custom template instead of using the default page layout.

All 11 comments

Yes, there are 2 default layout, you can set layout through the following cmd:

$ hexo new [layout] <title>

You can also create new layouts by adding a template file under the scaffolds folder

@xing5 @nxfifteen , thank you very much for your help, but i still hadn't get what I want.
This is my _config.yml under webroot/themes/landscape

menu:
  Home: /
  Archives: /archives
  Contact: /contact
  About: /about
rss: false
...

And what I want is all files under folder Contact use a layout file (maybe called contactLayout.ejs), all files under Archives use another layout file, etc. can I achieve this?

Agh right I understand. What you want to look at is partial.

For example my page.ejs file looks liks:

<% if (page.source == 'search/index.md') { %>
<%- partial('search') %>
<% } else { %>
<%- partial('pages') %>
<% } %>

Then I just created search.ejs and pages.ejs. The first being used only on the search page the second for all others.

You can expand your use of partial to look a page variables too. My post.ejs file is:

<%- partial('_partial/_' + page.layout + '/content_title') %>

So each of my layout types uses a different content_tile.ejs file

In your situation you would probablly want to look at the varible page.path, so in your layout.ejs file have something like:

<% if (page.path.indexOf('archives') > -1) { %>
<%- partial('archivesLayout') %>
<% } else if (page.path.indexOf('contact') > -1) { %>
<%- partial('contactLayout') %>
<% } else if (page.path.indexOf('about') > -1) { %>
<%- partial('aboutLayout') %>
<% } else { %>
<%- partial('layout') %>
<% } %>

@nxfifteen thank you so much. This is exactly what I want. I expected there is a configure property I could use. but your solution is fine for me.
Thanks again :).

@nxfifteen Nice solution! Thanks!

@nxfifteen for me it's a pretty nasty solution, the hexo should have better ways to include new pages with different layouts.

@linkarys @jlVidal @nxfifteen I just tried this out with the latest hexo version and it seems to work.

First I create a new page:

$ hexo new page foobar

By default /foobar will use the page layout, but then I added layout: to front matter.

---
layout: foobar
title: foobar
date: 2016-02-05 14:42:23
---

This loads my custom template instead of using the default page layout.

@eventhough how to add custom template ? layout foobar represent foobar.ejs in theme source directory?

@me10zyl Yes, in the theme layout folder, there should have one file name match the layout. You could refer http://www.codeblocq.com/2016/03/Create-an-Hexo-Theme-Part-2-Other-Pages/ for more details.

@eventhough yes but that means you have to add manually pages and link them all together which is really messy. Sad that Hexo is doint nothing to make easy way to create multiple _Post like pages

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bearpaw picture bearpaw  ·  3Comments

leoli-dev picture leoli-dev  ·  3Comments

jo4x962k7JL picture jo4x962k7JL  ·  3Comments

ghost picture ghost  ·  3Comments

Helihua1992 picture Helihua1992  ·  3Comments