🧱Sections Customization

The Reporter has 24 posts section variants for home page. Each section is pre-made partial, that can be inserted anywhere. They looks like this:

{{>layout/type1 tagName='news' themeSection="light-gray"}}
{{>layout/type2 tagName='events'}}

Each section has 2 options (props):

1. tagName - required props in which you pass the name of the tag you would like to display in this section

2. themeSection - optional props in which you can pass the additional color-variant for the section. If you don't pass it, section's background-color will be standard (the same as website's background-color). themeSection has 2 options:

   1. "light-gray"

      
   2. "black"

      

Here is the options for section layout:

1. {{>layout/featured-type1 tagName='news' }}

2. {{>layout/featured-type2 tagName='news' }}

3. {{>layout/featured-type3 tagName='news' }}

4. {{>layout/featured-type4 tagName='news' }}

5. {{>layout/featured-type5 tagName='news' }}

6. {{>layout/type1 tagName='news' }}

7. {{>layout/type2 tagName='news' }}

8. {{>layout/type3 tagName='news' }}

9. {{>layout/type4 tagName='news' }}

10. {{>layout/type5 tagName='news' }}

11. {{>layout/type6 tagName='news' }}

12. {{>layout/type7 tagName='news' }}

13. {{>layout/type8 tagName='news' }}

14. {{>layout/type9 tagName='news' }}

15. {{>layout/type10 tagName='news' }}

16. {{>layout/type11 tagName='news' }}

17. {{>layout/type12 tagName='news' }}

18. {{>layout/type13 tagName='news' }}

19. {{>layout/type14 tagName='news' }}

20. {{>layout/type15 tagName='news' }}

21. {{>layout/type16 tagName='news' }}

22. {{>layout/type17 tagName='news' }}

23. {{>layout/type18 tagName='news' }}

24. {{>layout/type19 tagName='news' }}

To customize home page sections:

• Open index.hbs file, it looks like this:

• Here you'll see commented examples of banners and layouts that The Reporter has

• Now, select the section variant, change tagName props value to your preferred tag slug and insert it inside {{!-- INSERT LAYOUTS HERE --}} {{!-- ------------------- --}} like this:

• Add more sections that you want, the order in which you insert sections coincides with the order in which sections are displayed on the home page:

• When you're done with the customization, we need to zip our theme to upload its customized version in Ghost. To do this, insert npm run zip command into the terminal, that we already opened, and press Enter.

• Then, check that Homepage tags setting inside Ghost Admin Panel has nothing inside it!

• Now, find new the-reporter.zip file and upload it in your Ghost Admin Panel.

• Thats it! Now you have customized home page layout!