zjedi / hugo-scroll

Clean, responsive, single-page Hugo website theme.
https://themes.gohugo.io/hugo-scroll/
MIT License
271 stars 193 forks source link

Add start item to navigation menu to go back to top cover image #154

Closed spi43984 closed 12 months ago

spi43984 commented 1 year ago

Is there an easy way to add a 'Start' item to the nav menu to get back to top to the cover image landing page?

zjedi commented 1 year ago

No, you would need to add this option. So far nobody wanted that :) But I guess it could be quite easy to do.

spi43984 commented 1 year ago

No, you would need to add this option. So far nobody wanted that :) But I guess it could be quite easy to do.

Would like to dig in - is there something I can use to get familiar with hugo-scroll's architecture (apart from searching the code what I am currently doing :-)?

zjedi commented 1 year ago

There's what you see - the exampleSite for demo purposes. Maybe I could draw some diagrams to give an overview of what goes where. On the other hand, such diagrams could grow old quite fast, not sure it's worth the hassle. I'll try to have a look at it later on today to give some kick-off instructions. A good way of getting familiar is inspecting the example site via developer tools and seeing which div gets placed.

spi43984 commented 1 year ago

There's what you see - the exampleSite for demo purposes. Maybe I could draw some diagrams to give an overview of what goes where. On the other hand, such diagrams could grow old quite fast, not sure it's worth the hassle. I'll try to have a look at it later on today to give some kick-off instructions. A good way of getting familiar is inspecting the example site via developer tools and seeing which div gets placed.

yeah, I think you're right regarding the diagrams. Am currently looking into the code and have already started to add something for the menu. Currently I am doing the following:

in _index.html

# When set to true add a 'Go back to top' item to the navigation menu
# Title = name of navigation menu entry
# Weight (i. e. position in menu): 1 = first, 99 = last
header_gbtt: true
header_gbtt_title: "Return To Top"
header_gbtt_weight: 1

in themes/hugo-scroll/layouts/index.html adding right after line 52 <div class='fixed-nav'>

        {{ if .Params.header_gbtt }}
            {{ $fnav_title := "Start" }}{{ with .Params.header_gbtt_title }}{{ $fnav_title = . }}{{ end }}
            {{ $index_val := "1" }}{{ with .Params.header_gbtt_weight }}{{ $index_val := . }}
                <a class='fn-item' item_index='{{ (add $index_val 1) }}' href='/'>{{ $fnav_title | safeHTML }}</a>
            {{ end }}
        {{ end }}

It gets me already the navigation menu entry. But I need to polish the code as it gets the navigation menu entry, but the item_index and the position are still wrong.

Is the item_index important in the rendered public/index.html? Or is just the position of the menu entry in the rendered index.html relevant?

spi43984 commented 1 year ago

Another quick idea - I might use a homepage returnToTop.md and set a parameter there to not render the page but show a navigation menu entry...

zjedi commented 1 year ago

I think it would be cleaner to link directly to the landing area rather than creating a dummy section - it could affect altering of section colors (backwards compatibility with existing users)

spi43984 commented 1 year ago

I think it would be cleaner to link directly to the landing area rather than creating a dummy section - it could affect altering of section colors (backwards compatibility with existing users)

yep, that's what I just stumbled across. But when I just create a direct link I'd need to duplicate the code to either first add the returnToTop or add it as the last item. Is the item_index number relevant in the rendered index.html file or just the position of the menu item?

spi43984 commented 1 year ago

I added some code to add a ReturnToTop menu item, but:

if it is added in first position the wrong menu item gets highlighted while scrolling through the different sections of the homepage. Need to understand that first to fix it.

Setting the ReturnToTop as menu item as the last one or none at all seems to work.

Any hint how to fix the wrong highlighting?

spi43984 commented 1 year ago

Ok, fixed it. Was easier than expected. Updated the pull request.

And yes, item_index number is important to highlight the right menu item ;-) That was the key to fix it...

zjedi commented 12 months ago

Looks ok.