Get content of different pages on Homepage

Support Themes & Styling
1

I need to create a one-page website but I also need to have every section on the “one-page” as a separate page (for SEO reasons).

e.g.
I’ve on my Homepage these sections: “Intro, Some info, About, Contact”.
I also want the content of these sections to be available on
example.com/about/
example.com/contact/
etc.

I was thinking let’s say for the About page, to create a page and extract its content on the homepage. But this seems to have some limitations in styling.

Do you think it’s doable or there’s a better way in doing it?!

thank you in advance.

2

I thought about “Modular pages” but it states:

[…] is inherently not a page you can reach directly via a URL. Because of this, all modular pages are by default set as non-routable .

3

@ramez, Although I’m not a fan of one-page website, I did some playing…

Note: The quote you mention is from the overview of page types. That’s only part of the story. There is more information to be found at Modular Pages.

Also of interest is the documentation on Page Collections.

I played with a combination of both above technologies.

The following is based on the One-Page Site skeleton. That skeleton comes with the following pages:

01.home/
   01._hero/
      hero.md
   02._highlights/
      features.md
   03._callout/
      text.md
   04._features/
      features.md
   modular.md

A modular page is made up by a collection of other pages. In this case the page 01.home/modular.md uses a collection based on its child modular pages.

content:
    items: @self.modular

However, a collection can also be based on taxonomies. E.g.:

content:
    items:
        '@taxonomy.tag': features

Reusing the ‘features’ child modular from ‘home’ can be achieved as follows:

  1. Add a taxonomy tag to the modular page /01.home/04._features/features.md:
    taxonomy:
  tag: features
  2. Create a new modular page below /pages/:
    02.features/
    modular.md
  3. Add the following content to 02.features/modular.md:
    content:
    items:
        '@taxonomy.tag': features
  4. Point your browser to localhost/my-site/features…

You have now created a new modular page, that uses a collection of pages with taxonomy tag 'features`.

Note: Although this gives you an idea to solve your question about reusing content, I’m not sure if this is the way to go…

Here is some more info on SEO and one-pages websites: Optimizing a single page: One page website SEO

Hope this helps…

1 Like
4

Whoa! Thank you very much! I’ll try to implement it and see how it goes.

I agree on that. Unfortunately I’ve no saying in this since they sent me a design and I’ve to just code and implement it in Grav. :man_shrugging:

From what I can see they did it this way because it’s a restaurant website, and they put all the info people are looking for few scrolls away. It’s not much content tbh. At the end of the site they have a section that explains every dish… (perhaps that could be moved on a different page).