Advice needed porting specific html/css based template

support
1
  • Project description, screen-shots and files found here: Github README.md
  • Questions found at the bottom of this topic.

DEVELOPMENT / SETUP

  • Ubuntu 16.04
hugo version
Hugo Static Site Generator v0.53/extended linux/amd64 BuildDate: 2018-12-24T12:58:46Z

BACKGROUND

I have been working with Hugo for a while now and experiment by starting projects from scratch and building test cases.
This is one such experiment.

My goal here is to integrate this Codyhouse Schedule Template into future Hugo projects. This is a free (MIT) Template that you can download and open index.html in a browser to see what it is suppose to look like. Select an event to get a pop-up that displays event-info.

APPROACH

First I created a new hugo project:

hugo new site cal

Then I parsed out Codyhouse-Template by putting all the HTML files under /layouts and the remaining files under /static.

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── layouts
│   ├── event-abs-circuit.html
│   ├── event-restorative-yoga.html
│   ├── event-rowing-workout.html
│   ├── event-yoga-1.html
│   └── index.html
├── README.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
└── static
    ├── css
    │   ├── reset.css
    │   └── style.css
    ├── js
    │   ├── jquery-3.0.0.min.js
    │   ├── main.js
    │   └── modernizr.js
    ├── partials
    │   ├── _layout.scss
    │   ├── _mixins.scss
    │   └── _variables.scss
    └── scss
        └── style.scss

RESULT OF MY ATTEMPT

This approach mostly works except the modal window will not display the "event-info".`

QUESTIONS

  1. Any general advice on how one would port this so you could essentially drop this into an existing Hugo project? I doubt my approach is optimal.

  2. If you download and run my Github project, you will quickly see my problem. I have tried to move those style sheets and javascript files around into other Hugo folders and also change path’s inside of the index.html. Can anyone offer advice as to why the event-info doesn’t show up in the modal box?

2

The original template you link to says:

When the user selects an event, the jQuery load() function is used to load the content of the event just selected (its data-content is used to determine the file content to be loaded).

Checking the browser console when you click on an event, it gives you a 404 on http://localhost:1313/event-...-.html.

You have your event-...-.html files under /layouts. You might try moving those under /content.

Have a read here (under the layouts section) about what goes in layouts: Directory structure | Hugo

2 Likes
3

Thanks for the input @pointyfar, you pulled me in the right direction.

  • [FIX] Moved all “event-*.html” files from /layouts to /static
  • Github repo updated.
  • Attribution to @pointyfar