How to add features without overwritting a theme?

Using Themes
1

Hello,
For a personal blog project I’m using a hugo theme. However I would like to add the ability to click on an image to display it in full size using, for example, lightbox2 via :

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

{{ range .Resources.ByType "image" }}
    <a href="{{ .RelPermalink }}" data-lightbox="gallery">
        <img src="{{ .RelPermalink }}" alt="{{ .Title }}" style="width: 300px; height: auto;">
    </a>
{{ end }}

However, if I add layouts/partials/head.html and layouts/_default/single.html files, my theme is rewritten.
How can I avoid this?
Thanks in advance for your answers

2

your theme offers a method to add custom html to the head.

Add custom HTML to <head> section

To add custom HTML to the <head> section, create a partial named custom-head.html. The contents of this partial will be inserted at the end of the <head> section.

for the single.html it could be done by copying the themes single.html to your layouts folder and customize to your need.

in case the range was just an example you could also add a custom render hook which adds your needed attributes.

2 Likes
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.