Another newb question

support
1

So in my practice i’m using html and in the layout pages. Figured out that pics go in the static file, and figured out how to call and set them as a background-image and so on using the html I know but is that best practice? From looking at themes it does seem to be at least somewhat right but to be honest I’m not sure what all I’m looking at when I look over the files. I’m still not sure where to put a css file or how to call it for a layout template accordingly. What I did worked but I have a feeling I’m not doing things the way it was meant to be done in hugo.[github]: https://github.com/prophoss/hugo_four is where the files are. feel free to tell me what you think.

2

Your /static folder gets merged by Hugo into the root of your site.

So /static/css/mycss.css becomes http://mysite.com/css/mycss.css.

A basic usage is to put whatever static assets you need there, like css, js, images etc.

Regards

3

is there a way to call the css file. How does it know where and how to apply the css to the appropriate file?

4

In addition to @RickCogley’s info on the static/ folder, some additional feedback below.

You specified a main block in your baseof.html (which is good), but then you duplicated your base HTML in your single.html and index.html templates. The idea is that your base HTML has elements common to all templates, then whatever is defined inside the main block is unique to a given template. For example, given your current setup, your index.html should look something like this:

{{ define "main" }}
  {{ range .Pages }}
    <ul>
      <li><a href="{{ .URL }}" >{{ .Title }}</a></li>
    </ul>
  {{ end }}
{{ end }}

You have a <style> element in your <body>, but that belongs in your <head>.

5

Generally speaking, you call css files from whatever template you define your “head” in.

6

I went back and cleaned up the code in the index file to keep the styling not sure what you mean by duplicating the baseof.html in the other layouts though.

7

that would be like in a regular html file. It calls the css for that file in the head tag by calling main.css?

8

For another example, see the Hyde theme’s baseof.html

Then its single.html

9

Yeah, it’s just like a regular html file.

Your baseof defines where the block will go.
Then in your index or single files, you do as @zwbetz mentions and define main, so Hugo will “inject” it when it builds. This is really flexible.

The way you have it, though, you’re going to have weird html with repeats of the main elements of a standard html file.

10

and that why I’m asking all these questions, lol :slight_smile:

11

ok so in the baseof.html you tell it what the base layout is for all layouts, and in the index and single html files you define “main” then add what you want in that page. OK I get that.
now in the single.html they add h1 title, date and ,content to the single.html pages. The rest I’m not following. Is that footer stuff?
In my code I defined main in baseof.html but might as well not have since I did’t do anything with it. I did all the work in the index and single files. The only thing I have in common with both files is the title. All the rest of my code is specific for that file. I could use a css file and cut out the style tag stuff in the files which I think is the point looking at it. Am I right so far? BTW thanks for letting me think out loud here. Will be heading to bed but will be checking it again come morning. Awesome stuff! thanks y’all.

12

So, defining a footer partial (or any other partial) is optional. The main advantage of doing so is that it allows users of your theme to easily override only the “piece” that they wish to customize.

Edit: looking back at that template, I think what you are referring to is the disqus internal template. If the user specifies a disqusShortname value in their config file, then disqus comments will show on that page.

Well, all your templates have more in common than just the title element. They share html element, head element (and anything within head element), and starting/ending body tags.

13

Ok I see that now but didn’t realize that was how it worked. Now that you said that I can see the layout from html and so on with main in the body tag. I’m not seeing the beginning html tag is that what the partial html is?

14

Ah yes, so in this case, the theme author decided to extract out the beginning html tag and the head element into a head partial.