New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can different pages use different layouts? #959

Closed
linkarys opened this Issue Dec 17, 2014 · 11 comments

Comments

8 participants
@linkarys
Copy link

linkarys commented Dec 17, 2014

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

@xing5

This comment has been minimized.

Copy link

xing5 commented Dec 17, 2014

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

$ hexo new [layout] <title>
@nxfifteen

This comment has been minimized.

Copy link

nxfifteen commented Dec 17, 2014

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

@linkarys

This comment has been minimized.

Copy link

linkarys commented Dec 19, 2014

@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?

@nxfifteen

This comment has been minimized.

Copy link

nxfifteen commented Dec 19, 2014

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') %>
<% } %>
@linkarys

This comment has been minimized.

Copy link

linkarys commented Dec 19, 2014

@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 :).

@linkarys linkarys closed this Dec 19, 2014

@xing5

This comment has been minimized.

Copy link

xing5 commented Dec 19, 2014

@nxfifteen Nice solution! Thanks!

@jlVidal

This comment has been minimized.

Copy link

jlVidal commented Oct 18, 2015

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

@eventhough

This comment has been minimized.

Copy link

eventhough commented Feb 5, 2016

@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.

@me10zyl

This comment has been minimized.

Copy link

me10zyl commented May 10, 2017

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

@NoahDragon

This comment has been minimized.

Copy link
Member

NoahDragon commented May 10, 2017

@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.

@SourceCipher

This comment has been minimized.

Copy link

SourceCipher commented Oct 26, 2017

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment