Hexo: Can we create new "layout types"?

[johot]

Is it possible to create new layout types? Today we have for example post, page, draft etc. Say I have two pages, an about page and a products page. Now I might want to use totally different layouts for these two pages. I can't find any documentation about creating a new layout type. Is it possible?

My initial reaction was to create a file named "products.ejs" or something in the themes\themename\layout folder but it seems all routes to /products would be considered a page. Is this by design?

[NoahDragon]

Yes, you could create your own post layout definitely. However, it does not like the theme layout, not using the ejs file. You could add your own scaffolds under the scaffolds folder, you also could find samples for post, page, and draft there.

[johot]

Yes but as you mention it will only create a new post with some prefilled content in it. There doesn't seem to be a way to create an entire new layout type called for example product. Hexo seem to be built around the concept of post, page archive (and some more) isn't that right?

For example say I wanted to have a products page, could I do that? Could I have a new layout type called product that would be added to a source\_products\ folder? Just like for _posts?

[NoahDragon]

I see. Sorry, I misunderstood the question.

After you create the products.ejs, you have also set the post type to product.

---
layout: product
---

Then modify the layout.ejs, to add the following code:

<% if (page.layout==='product')  {%>
    <%- partial('path_to_products.ejs') %>
<% } %>

Then any post, page, or draft with the type product will use the product.ejs to render the layout.

[johot]

Thank you @NoahDragon good explanation. Have you been thinking about updating the documentation regarding these topics? The documentation about custom layout, the difference between pages and posts etc is in my opinion a bit short or missing.

And while mentioning documentation I also wish documentation for the index_generator config section where you can override the base path would be added :)

When I started looking at hexo I wanted to create a webpage where I could have a custom index page, a custom blog section and create my own pages with different layout but still content in markdown format. This can be done with hexo it seems that unless you follow the traditional blog model where the start page is the blog, some pages (all with the same layout) exist, archives etc it's hard to understand how to do the kind of setup I am looking for without digging into the github repo, reading issues etc.

Thanks!

[NoahDragon]

We should thank you for point this out, and this is really helping us to improve. I have answered your question about the documentation for index_generator in reference issue.

[johot]

Nice @NoahDragon! Would be nice to see it in the docs for the official webpage in the future also :+1: !

[kid1412621]

Hey there，newbie for hexo.
I'm quite confused about the concept--layout which is not self-interpretation well.
There is no detail about what's the difference between hexo new post and hexo new page in official site.
And the disparity between layout in scaffolds and layout in templates is not available.What is their relationship?How can I manage to create one by mine owe?
I really messed them up.
I know less is more and you guys pursuit for minimalism,but I think it's better to tell users,especially rookies, the most misleading point more specifically.

[sujays1]

So I am trying to do the same and it partially works.

My three files are
1) layout.ejs
2) homepage.ejs
3) index.md

Here is my layout.ejs

<section class="section">
        <div class=" <%- is_home() ? 'container ss-container-home' : 'container' %>">
            <div class="columns is-mobile">
                <% if (page.layout==='homepage')  {%>
                    <%- partial('homepage.ejs') %> Text 1
                <% } else { %>
                <div class="column <%= main_column_class() %> has-order-2 column-main <%- is_home() ? 'ss-column' : '' %>">
                    <%- body %>
                </div>
                <%- partial('common/widget', { position: 'left' }) %>
                <%- partial('common/widget', { position: 'right' }) %>
                <% } %>
            </div>
        </div>
    </section>

Here is my homepage.ejs

<div class="foo-bar">
Text 2
</div>

And here is the index.md file

title: Blah
layout: homepage
---

Text 3

Now here, the Title 1 and Title 2 show up on the page, but the Title 3 from the index.md file is not rendered.
When I remove 'layout: homepage' from the front matter of index.md, the Title 3 appears.

What can be the issue?

@NoahDragon would love your eyes go through this problem I am facing.

Thanks