tomfran / typo

A simple Hugo theme
https://tomfran.github.io/
MIT License
247 stars 76 forks source link

Moving social icons to about page #21

Closed wvirany closed 2 months ago

wvirany commented 2 months ago

Hi,

I am trying to move my social icons from my home page:

image

To my about page: (preferably just before the news section)

image

I tried moving this code:

{{ with site.Params.social }}
<div class="social-icons">
    {{- range . }}
    <a href="{{ trim .url " " | safeURL }}" target="_blank"
        rel="noopener noreferrer me"
        title="{{ (.title | default .name) | title }}">
        {{ partial "svg.html" . }}
    </a>
    {{- end }}
</div>
{{ end }}

from home.html in the layouts/ directory of the theme to the index.html file in my 'about' folder (located in contents/ at the top of my site. Evidently you can see the result. How can I achieve this? Thanks

(by the way, I love the theme! )

wvirany commented 2 months ago

Note: I achieved the result by doing something a bit hacky...

After the html was rendered in the public directory, I copied the code corresponding to the social icons into my about page. However, I'd like to do this the right way... by making it automatically include the socials I have in the config file

tomfran commented 2 months ago

Thank you for the kind comment about the theme!

Honestly, I was going to suggest your hacky solution. I believe you can't include Hugo constructs, such as that for loop, in a page content.

Perhaps your best bet would be to have a custom fork of the theme and modify layouts/_default/single.html to have something like:

if (about page) {
    render about.md content; 
    render social icons;
    render news part;
} else {
    ...
}

I don't think it's worth it in your case, as I believe your social icons would not change so frequently anyway.