Adding code in the HTML head

victoriadrake commented 2 years ago

Has anyone succesfully added a customer service chatbox? i am trying to get crisp working, but no luck so far.

Originally posted by @OnPointSM in https://github.com/victoriadrake/hugo-theme-introduction/issues/320

OnPointSM commented 2 years ago

Hi Victoria. Trouble is I don't understand where my HTML header is. Obviously in WP this is really easy. I am instructed to:

Paste the code below before the < / head > tag on every page...

I've tried in

content/home/fr/index.md & docs/fr/index.html

but nothing happens

victoriadrake commented 2 years ago

Gotcha. A static site generator like Hugo takes content files (what you'll find in your content/ directory) and marries them up with layout files (what you'll find in this theme) when it generates the site. So you won't find files that control the HTML layout in content/.

The docs/ folder is the generated site (or public/ by default) so changes you make there will just get overwritten when the site is generated from the source files next time.

To alter the HTML in this theme, you want to change the files in themes/hugo-theme-introduction/layouts/. The main ones are:

layouts
├── _default
│   ├── baseof.html   <--- base of list and single pages
│   ├── list.html     <--- inherits base: list pages, like lists of blog posts
│   └── single.html   <--- inherits base: single pages, like a blog post
└── index.html        <--- just your home page

So to answer your question, to add something "before the </head> tag on every page," you'd need to put it in two places:

In baseof.html because the list and single pages use the head from here
In index.html because the home page head is here

If you're thinking, "Won't that make my theme files different and mean that my version of the theme diverges from this one?" then yes, you're right. So instead of doing what I just suggested for illustration purposes (and surely not because I'm still working on my first cup of coffee) I recommend you replace one of the partials you see in the head.

Choose one (say hugo-theme-introduction/layouts/partials/head/css.html), copy it to you site's layout files (at OnPointSM/layouts/partials/head/css.html) and make your desired additions here. Because both the baseof.html and index.html layouts use this partial, you only need to replace the one file.

Any files in your site's layouts (OnPointSM/layouts/) with the same path and name as ones from this theme (themes/hugo-theme-introduction/layouts/) will take precedence when the site is rendered.

I'm also open to a PR that allows the theme to render arbitrary partial files placed in layouts/partials/ without needing to replace an existing one... in case anyone reading this wants to contribute!

How Hugo decides what template to use: https://gohugo.io/templates/lookup-order/
List page templates: https://gohugo.io/templates/lists/
Single page templates: https://gohugo.io/templates/single-page-templates/
Partials and overwriting partials: https://gohugo.io/templates/partials/#partial-template-lookup-order

OnPointSM commented 2 years ago

Thank you for taking the trouble to give such a detailed reply Victoria. I do feel a bit guilty because I have not contributed financially to the theme. Unfortunately I am cash-strapped, but I do like to support great stuff, so I hope in the future I can make a contribution. But perhaps you can also cultivate your following and become a nano-influencer?

Oh, just to add, I got the impression your theme build was unique, so I wasn't sure that learning about Hugo would help....my apologies.

OnPointSM commented 2 years ago

Hi Victoria. When I do what you suggest, it doesn't do anything. I created: SITE/layouts/partials/head/css.html

And made the additions, but to no avail.

<!DOCTYPE html>
<html>
<head>
  <script async type="text/javascript" src="https://userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/c243d1979b2b4f9ebaa2965e5c2197ad117918c03bce4f97a77f750fda079083.js"></script>
</head>
</html>
{{ $bundleRaw := resources.Get "sass/style.sass" | resources.ExecuteAsTemplate "css/main.tmp.css" . }}

{{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" "css/main.css" "enableSourceMap" true ) }}
{{ $bundle := $bundleRaw | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" media="screen">
{{ else }}
{{ $cssOpts := (dict "targetPath" "css/main.css" ) }}
{{ $postCSSOpts := (dict "use" "autoprefixer" ) }}
{{ $bundle := $bundleRaw | toCSS $cssOpts | postCSS $postCSSOpts | minify | fingerprint }}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}" crossorigin="anonymous" media="screen">
{{ end }}

<!-- Custom css -->
{{ range .Site.Params.customCSS -}}
    {{ $style := resources.Get . }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" media="screen">
{{- end }}

However adding the widget to: SITE/themes/introduction/layouts

works, but then generates a deploy error in Netlify:

1:04:01 PM: Build ready to start
1:04:03 PM: build-image version: 122b31996ccaffd45d820a452d6227f8312110cc (focal)
1:04:03 PM: build-image tag: v4.5.3
1:04:03 PM: buildbot version: 9bc48650b0551281ca8258d0c32d371dd2b6993b
1:04:03 PM: Building without cache
1:04:03 PM: Starting to prepare the repo for build
1:04:03 PM: No cached dependencies found. Cloning fresh repo
1:04:03 PM: git clone https://github.com/OnPointSM/OnPointSM
1:04:05 PM: Preparing Git Reference refs/heads/master
**1:04:07 PM: Error checking out submodules: Submodule 'themes/introduction' (https://github.com/victoriadrake/hugo-theme-introduction.git) registered for path 'themes/introduction'
Cloning into '/opt/build/repo/themes/introduction'...
fatal: remote error: upload-pack: not our ref 617bff81ea7884e46ff0a3a4a2e7495422d3c102
fatal: Fetched in submodule path 'themes/introduction', but it did not contain 617bff81ea7884e46ff0a3a4a2e7495422d3c102. Direct fetching of that commit failed.
fatal: 
1:04:08 PM: Creating deploy upload records
1:04:08 PM: Failing build: Failed to prepare repo
1:04:08 PM: Failed during stage 'preparing repo': Error checking out submodules: Submodule 'themes/introduction' (https://github.com/victoriadrake/hugo-theme-introduction.git) registered for path 'themes/introduction'
Cloning into '/opt/build/repo/themes/introduction'...
fatal: remote error: upload-pack: not our ref 617bff81ea7884e46ff0a3a4a2e7495422d3c102
fatal: Fetched in submodule path 'themes/introduction', but it did not contain 617bff81ea7884e46ff0a3a4a2e7495422d3c102. Direct fetching of that commit failed.
fatal: 
: exit status 128**
1:04:08 PM: Finished processing build request in 4.825107848s

victoriadrake commented 2 years ago

The css.html partial is not a full HTML page in itself. It's meant to be included in the full, rendered HTML page when Hugo builds the site. The way you have it now, you've created a separate HTML document inside the css.html partial. Try removing the !DOCTYPE, html, and head tags. You only need to add the script tag in order for the rendered site to call your script.

The output from Netlify appears to be a submodule error. If you made a commit to the submodule (which I suspect happened when you added the code for the widget to themes/introduction/layouts) then you'll need to undo it so that Git asks for the right ref. Here's instructions (and further explanation).

You're getting closer! Keep at it!

OnPointSM commented 2 years ago

Thank You Victoria. I realized that it was worth delving into the tools that come with Netlify.

In Site Settings / Build & Deploy is the facility to add snippets...but I am observing your help as well!

[Post processing](https://app.netlify.com/sites/nifty-bose-a6cf14/settings/deploys#post-processing)
Control the post processing and optimizations Netlify can do for you

[Snippet injection](https://app.netlify.com/sites/nifty-bose-a6cf14/settings/deploys#snippet-injection)
Inject analytics or other scripts into the HTML of your site.

before </body>

OnPointSM commented 2 years ago

I flipped to Render, and so I needed to use your instructions, which worked a treat. Thanks. It's cool to be able to get a chat widget working on the site. Here's a demo

https://balloons-4tht.onrender.com

github-actions[bot] commented 2 years ago

It looks like this has been idle a while, so I am marking it as stale. Remove the label or comment if this issue should remain open.

OnPointSM commented 2 years ago

Thanks. I don't have the authority to close this one

victoriadrake / hugo-theme-introduction

Adding code in the HTML head #321