Could Someone Help me with customize theme layout?

support
1

Hello there,

I am fairly new to Hugo and I am currently working on customizing a theme for my website. I’ve been able to make some changes using the documentation, but I’m struggling with customizing the layout of certain pages. Specifically, I want to adjust the layout of the single post page and the homepage.

For the single post page, I want to rearrange the elements and possibly add some new ones. I’ve looked through the theme’s layouts folder, but I am not sure which file I need to edit to make these changes.

Similarly, for the homepage, I want to change the order of the posts and maybe add a sidebar with some additional information.

Also, I have gone through this post: https://discourse.gohugo.io/t/help-with-customizing-beautifulhugo-theme/16371ccsp which definitely helped me out a lot.

Could someone please point me in the right direction? Any help would be greatly appreciated.

Thanks in advance.

2

With the Beautiful Hugo theme:

  • Single pages are rendered by themes/beautifulhugo/layouts/_default/single.html
  • The home page is rendered by themes/beautifulhugo/layouts/index.html

Both page kinds are wrapped by themes/beautifulhugo/layouts/_default/baseof.html.

To override these templates, create a template with the same path in the layouts directory in the root of your project. For example, to override themes/beautifulhugo/layouts/_default/single.html, create layouts/_default/single.html.

Do not edit files within the themes directory.

I suggest you experiment with the templates described above, then come back here with specific questions.