Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed broken resources #23

merged 5 commits into from Aug 6, 2019


Copy link

commented Aug 6, 2019

I apologize to all users who have their resources (images, scripts, etc) broken affected by #22. This is due to the subpath in baseURL not being rendered by relURL and relLangURL. Since I've no luck with that, to get things working, I've reverted back to their absolute versions.

I've created scss and js folders in assets to sort out the files there by type. I've moved static/js/index.js to assets/js/index.js so that the icon.path can be constructed by Hugo. This same applies for other SVG files.

See also:

Make sure not to use a forward slash / in the beginning of a URL , because it will point to the host root and Hugo will not generate the correct URL for the demo’s assets.

@VincentTam VincentTam self-assigned this Aug 6, 2019


This comment has been minimized.

Copy link
Collaborator Author

commented Aug 6, 2019

I'm resolving conflicts.

Update: conflicts fixed. I'm explaining some changes done in this PR. For a demo: see (source)

@onweru onweru merged commit 857f51c into onweru:master Aug 6, 2019


This comment has been minimized.

Copy link
Collaborator Author

commented Aug 7, 2019

Fixed SVG loading path

icon.src = '/images/icons/link.svg';

background-image: url(/images/icons/copy.svg);

has to be changed due to the above direct quote from Hugo Discourse's moderator.
Since a static/ file can't contain Hugo code, we have to put it inside assets/. To avoid mixing SCSS & JS files at the same directory level, they have to separated by subfolders sass/ and js/.

To simplify things, only one SCSS files (assets/scss/main.scss) is executeAsTemplate.

{{- $options := (dict "targetPath" "css/main.css" "outputStyle" "expanded" "enableSourceMap" "true") -}}
{{- $styles := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "scss/main.scss" . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
<link rel = 'stylesheet' href = '{{ $styles.Permalink }}' integrity = '{{ $styles.Data.Integrity }}'>

To use the Hugo generated stuff in another SCSS files (assets/scss/_components.scss), some SCSS variables have been declared in the main SCSS file
$font-path: '{{ "fonts" | absURL }}';
$copy-icon-path: '{{ "images/icons/copy.svg" | absURL }}';
$prev-icon-path: '{{ "images/icons/previous.svg" | absURL }}';
$next-icon-path: '{{ "images/icons/next.svg" | absURL }}';

so that other SCSS files can use the value.
background-image: url(#{$copy-icon-path});

Fixed post thumbnail

Here's a more detailed response to your question in #22 (comment).

First, I'm not a fan of inline CSS. I've tried my best to keep them apart. Nonetheless, it's really difficult in this case, because the background-image-url changes with the post_card element, whereas a SCSS variable is only evaluated once for the whole page containing multiple post_card elements. Solving this problem took me a while. That's why you had fixed the missing subpath in baseURL quicker than I did at 1d21cf8. To solve this problem, I viewed the Hugo theme Introduction, which stuff the <a> tag with the thumbnail <img>.

<li class = 'post_item'>
<a class = 'post_card' href='{{ .RelPermalink }}' title = '{{ .Title }}'>
<img class = 'post_thumbnail' src='{{ path.Join "images" .Params.image | absLangURL }}'>
<div class = 'excerpt'>

Unluckily, you're also editing on the file. To resolve the conflict,

  1. I kept your class name post_card.
  2. I discarded your inline CSS, in favor of Introduction's approach.
  3. I left your CSS rules about post_card untouched.
  4. I added an <img class="thumbnail"> and the corresponding CSS rules:
  5. Note that we need absLangURL here since a post might not be written in all languages.

Fixed navbar menu

Again, same principle of removing leading slash.

Reimplement fix for #7

Your commit def0e22 worked, but I dunno why it's reverted at commit bb52814#diff-a70439496a6ae6b90fd42ddc8aafec33. I've reimplemented this at


This comment has been minimized.

Copy link

commented Aug 7, 2019

To solve this problem, I viewed the Hugo theme Introduction, which stuff the tag with the thumbnail .

The reason I initially went with the background image is because I wanted to show the center part of the image. That said, seeing that it's merely a preview, using an image probably doesn't hurt.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.