frjo / hugo-theme-zen Goto Github PK

I have enabled searchform: true in the site config. And added following lines into the layouts/partial/sidebar.html partial in my site.
However when you search for a phrase, it doesn't show any results in the search page.

<section>
      <form id="search-form" class="search-form" action="/search" method="post" accept-charset="UTF-8" role="search">
        <label for="query" class="visually-hidden">{{ i18n "search_title" }}</label>
        <input type="search" id="query" name="query" class="search-text" placeholder="{{ i18n "search_placeholder" }}" maxlength="128">
        <button type="submit" name="submit" class="form-submit" >{{ i18n "search_title" }}</button>
      </form>
</section>

Hi there,

I would like to see the podcast feature in action, but couldn't find a live demo, even with a check on every sites of the section "Sites using the Hugo Zen theme"

(A showcase of the shortcodes would be useful too)

Thanks!

hugo server
Building sites … WARN 2020/07/14 23:26:47 .File.UniqueID on zero object. Wrap it in if or with: {{ with .File }}{{ .UniqueID }}{{ end }}
ERROR 2020/07/14 23:26:47 TOCSS: failed to transform "sass/print.scss" (text/x-scss): resource "scss/sass/print.scss_6f664080c634a8edb051ceda3df60601" not found in file cache
Built in 42 ms
Error: Error building site: TOCSS: failed to transform "sass/styles.scss" (text/x-scss): resource "scss/sass/styles.scss_c253c1450adff31bb2ccb2afd691b09e" not found in file cache

The idea is to show a back to top button only after scrolling with CSS.

This article shows some methods that only use CSS, no JS.

I especially like this method with a fading button.

What do you guys think?

Performance
Best Practices
Serves images with low resolution
SEO
Document does not have a meta description
SEO
Tap targets are not sized appropriately
Accessibility
Heading elements are not in a sequentially-descending order
Accessibility
Links do not have a discernible name

Loving the search engine feature, would love to get a better idea how to create a working search box in the menu? The search feature is outstanding, but going to a webpage to search isn't ideal. Is there a way to activate a search box instead of a dedicated page?

Thanks :)

If you enable the sidebar in the hugo config. The side displays all the published posts. I don't think there is way to limit the lists to latest 10 posts.

Using this theme as a submodule of mine, when deploying the site using AWS Amplify I often encountered build error as following.

[WARNING]: Error: "/codebuild/output/src721358463/src/SITENAME/themes/zen/layouts/shortcodes/figure.html:18:1": parse failed: template: shortcodes/figure.html:18: illegal number syntax: "-". And the error is followed by failure messages.
2020-06-15T12:01:21.770Z [ERROR]: !!! Build failed
2020-06-15T12:01:21.841Z [ERROR]: !!! Non-Zero Exit Code detected

In layouts/podcast/rss.xml is trying to stat the file even if a CDN is configured:

{{ with .Params.podcast.mp3 }}{{ $file_stat := os.Stat (add "/static" (. | relURL)) }}<enclosure url="{{ if $.Site.Params.Podcast.cdn }}{{ add $.Site.Params.Podcast.cdn (. | relURL) }}{{ else }}{{ . | absURL }}{{ end }}" length="{{ $file_stat.Size }}" type="audio/mpeg" />{{ end }}

error calling Stat: LStat content/static/ep1.mp3: file does not exist

If I remove the call to stat and the length attribute it works as intended.

Unfortunately, a directory named vendor causes problems for Hugo modules due to the way Go modules work. This was discussed on the forum in context of PHP, but I discovered it also affects this folder as well. In DFD-Zen I have renamed the folder and all works the way it should. See:

https://discourse.gohugo.io/t/is-it-still-true-due-to-the-way-go-works-that-one-should-not-use-a-vendor-folder-in-a-hugo-project/38899

First, thanks for this awesome theme, I have used for quite a while. There is one annoying issue with table display, the head part isn't aligned with body, see figure below

Could you fix this?

FYI, link below is my blog post with this issue

• https://emacstalk.github.io/post/017/

On Windows 10:

PS C:\Users\DanielDickinson\Build\hugo-dfd-sites\dfd-hugo-theme-zen> npm run lint-theme:js

> zen@1.0.0 lint-theme:js
> eslint "assets/js/**/*.js"

C:\Users\DanielDickinson\Build\hugo-dfd-sites\dfd-hugo-theme-zen\assets\js\search.js
  8:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

C:\Users\DanielDickinson\Build\hugo-dfd-sites\dfd-hugo-theme-zen\assets\js\tracking.js
  8:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

✖ 2 problems (2 errors, 0 warnings)

With node 16.19.1.

The line in question (in both cases) is:

import * as params from '@params';

Can i use it for comercial site?

The theme looks (and feels?) good and is minimal, sadly doesn't support google analytics; this is bummer since user demography plays an important role while blogging (also other analytical tools - page views etc.)

Is it possible to support google analytics out of the box? Please let me know if you'd be interested in such a pull request.

Note: There is a work around to it - by adding custom scripts. Would prefer if it supports google analytics "out of the box".

Is there a way to add cover image for page or post. Is this currently supported by hugo-theme-zen by default.

Would like to display the image in both listing pages and also single post pages.

If I write a text in an unordered list which has code in it like

* `Application` - in an unordered list

it will be rendered correctly to monospace, but the font size looks too large. If I do it in normal text, it looks good. See screenshot

Problems occurs under all browser in Mac OSX.

Could it be fixed? Maybe something like 0.9em or 0.8em for monospace?

• https://utteranc.es/

I created a Finnish translation for the i18n.

Can I submit a PR for it, or how do you want to proceed?

Please note that some of the translations I had to leave empty, since Finnish prepositions are actually postpositions suffixed to the words.

https://polymath.org/finnish_prepositions.php

Hello!

Complete noob here to designing things. :) Is there a possibility to have a dark mode? Or do you happened to have a CSS lying around somewhere maybe for that? Pretty please? :))

Thanks!

Hi,

My config.yaml:

baseurl: "https://gitte.one/"
title: "Gitte Kjærulff Møller"
theme: "zen"
languageCode: "sv-SE"

params:
  feedlinks: true
  podcast:
    title: "Gitte Kjærulff Møller"
    description: "Lydbøger."
    image: "images/podcast.jpg"
    category:
      name: "Books"

https://gitte.one/
The "Home" at the top and "Follow" is still English?

I can see that the language tag in the feeds has changed:
https://gitte.one/index.xml
https://gitte.one/podcast/index.xml
So something is in fact working.

What am I doing wrong?

/Morten

First, thanks for working on this theme!

I was looking for a way to center an image from markdown.
I'm not familiar with CSS, but I found that figure has something which seems like can be used for this: https://github.com/frjo/hugo-theme-zen/blob/2.x/assets/sass/_zen.scss#L169

Can you please explain how can I use figure to center the image?

Thank you!

I haven't looked deeply into hugo modules to get and install themes as I am still using Zen them as submodule. Is it possible to use this them using hugo module system?

https://gohugo.io/hugo-modules/use-modules/

Hello @frjo

Currently your theme's demo does not generate as mentioned in gohugoio/hugoThemes#669 (comment)

To fix you need to change line 8 of theme.toml to: min_version = "0.55.0"

The min_version needs to be a string.

Feel free to close this issue once you do the above

Also note that once gohugoio/hugoThemes#668 is addressed you will need to keep an eye on whether the Zen theme demo generates on the Hugo website.

We are a very small team and we just cannot keep up opening issues in the various theme repositories. Whenever a theme demo breaks and remains broken then at some point it will be removed from the list without prior warning.

Thank you.

cc: @digitalcraftsman

Site: https://antihashed.xyz
Repo: https://github.com/metasikander/antihashed

Cdn config line:
cdn: "https://antihashed.us-east-1.linodeobjects.com"

rss.xml result line in https://antihashed.xyz/podcast/index.xml:
<enclosure url="https:/antihashed.us-east-1.linodeobjects.com/episode_005.m4a" type="audio/mpeg"/>

The url in the xml is missing a / after https:, so some podcast players can't fetch the file (while others handles it apparently).
Updated to the latest version of the template, and hugo.

In my forked version of this theme I have a pre-commit configuration that enforces the existing linting on commit and adds more checks.

Would you be interested in a PR implementing a subset of this for this repo/theme?

Hi,

when formatting a code block with Hugo's standard syntax highlighting, some of the code is barely readable due to the foreground colour being too dark.

Example blog post demonstrating the issue

I guess, the issue stems from the fact that _reset.scss sets the foreground colour for code elements, but Hugo's syntax highlighting sets the foreground color on the surrounding pre element.

Is it possible to provide params for each language in a multilingual site. Am following the new config structure provide by HUGO Docs project

Am declaring Zen theme params in config/_default/params.toml

[en]
contact = "ACME"
copyright = "© ACME 2023"
description = "ACME Project"

[de]
contact = "ACME"
copyright = " © ACME 2023"
description = "ACME Projekt"

In commit 1d6e507 on assets/sass/styles.scss the following import references a file which does not exist:

@import 'components/tags/tags'

Please kindly provide any instructions in README to switch to version 3.x of hugo-theme-zen them. This would help early adopters to give early feedback.

Hi,

It seems my episode image is not showing in Apple Podcast:
https://podcasts.apple.com/us/podcast/regnormen-keld/id1608769069?i=1000550196773
It shows my shows image?
Same in app on iphone and ipad.

Works fine on Spotify:
https://open.spotify.com/episode/1l6UPdxDhZnSNxaXFCZuAV

Can anyone see if and what I did wrong?

https://gitlab.com/mortenkjarulff/gitte2
https://gitte.one/podcast/index.xml

/Morten

I installed your latest Zen theme update:

$ git submodule update --remote --merge

And I am now seeing a build error:

george@imac1:~/Hugo/apcom
$ hugo server
Start building sites … 
hugo v0.99.1+extended darwin/amd64 BuildDate=unknown
Error: Error building site: TOCSS: failed to transform "sass/styles.scss" (text/x-scss): "/Users/george/Hugo/apcom/themes/zen/assets/sass/reset/sections/_sections.scss:80:16": Undefined variable: "$max-line-width".
Built in 532 ms

I have been testing my Contact form to verify that it's working ok. I have noticed a minor issue in the message body. Roughly about every 69 characters, spaces between words are getting dropped. Here's one of my test messages:

"Ok, I saw something strange. It looked like there was spacing betweenwords after they wrapped around in the message box. This test messagestarted a 2nd line after "around" just before "in the". Let's see whathappened (after "Let's see")."

I thought that it may had been happening at the word wrap in the message box, but that wasn't the case. I was very careful to make sure there were spaces between each word.

I must confess that I have been experimenting with a couple of different themes, but I keep coming back to yours for the quality of the code and the contact form. I think that if I could learn how to add a "feature image," your theme would be my first choice. I'll keep researching and experimenting.

George

When you set 'submitted: true' dates are displayed on /tags/ page.

a5e759d#r110247012

For me, on Microsoft Edge 112 'tr:has(td)' doesn't work, but using 'tbody tr' does.

I also see on MDN that :has is not supported on Firefox without manual enablement by user and not at all on Firefox for Android.

Hi Fredrik,

Thank you for creating this theme

I tried changing the logo of my website but it doesn't seem to work. The default theme logo is still showing

I followed README.md instructions and have my logo relative path as static/images/logo.png. ( It's also present under public directory and has the following relative path public/images/logo.png.)

Though this shouldn't change anything, I also tried changing logo flag in config.toml to true, and that didn't work too

I don't think I changed anything in baseof.html, but here it is just for safety:

<!DOCTYPE html>
<html class="nojs" lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.LanguageDirection | default "ltr" }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
{{ partial "meta.html" . }}
{{ partialCached "styles.html" . }}
{{- block "head" . }}{{ end }}
{{ partial "meta_json_ld.html" . }}
{{ partial "scripts.html" . }}
{{ partialCached "tracking.html" . }}
</head>

<body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}">
<div class="page layout__page{{ if $.Param "sidebar" | default true }} layout__sidebar-second{{ end }}">
<header class="header layout__header">
{{ if $.Param "logo" | default true }}<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="header__logo"> <img src="{{ "/images/logo.png" | relURL }}" alt="Home" class="header__logo-image"></a>{{ end }}
<h1 class="header__site-name">
<a href="{{ "/" | relLangURL }}" title="Home" class="header__site-link" rel="home"><span>{{ .Site.Title }}</span></a>
</h1>
<div class="region header__region">
{{ if .Site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end -}}
</div>
</header>

{{ partial "menu.html" . }}

{{ block "main" . }}{{ end }}

{{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}

<footer class="footer layout__footer">
{{ if $.Param "feedlinks" }}{{ partial "feedlinks.html" . }}{{ end -}}
<p>{{ with $.Param "copyright" }}{{ . | markdownify }}{{ else }}<span>© {{ .Site.Title }}</span>{{ end }}</p>
{{ with $.Param "footer" }}<p>{{ . | markdownify }}</p>{{ end }}
{{ if $.Param "poweredby" }}<p>Powered by <a href="https://gohugo.io/">Hugo</a> and the <a href="https://github.com/frjo/hugo-theme-zen">Zen theme</a>.</p>{{ end }}
</footer>

</div>
{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
</body>
</html>

PS: Changing the value of logo.png in baseof.html to something other than logo.png (e.g. custom_logo.png), and having the same file name under static/images fixes it, but I don't think that's the right approach since it requires changing around the theme template

Looking forward to your response
Cheers,
Hakeem

Hi

I'm not sure it's the best place to ask/suggest this.
When using the figure shortcode in "plain" Hugo, the images can also come from the page bundles, i.e. they can be next to index.md file. With the figure shortcode from the Zen theme that's impossible, because: {{ with (imageConfig (add "/static/" (.Get "src"))) -}}, so the images are meant to be stored in static only.
Could this be relaxed somehow, so something like this: https://alison.rbind.io/post/2019-02-21-hugo-page-bundles/ works?

Thanks
P.

Say I have my home page generated using Hugo+Zen on foo.bar but for my blog I use Jekyll and GitHub pages + custom domain. In short I have my blog at blog.foo.bar. Now I would like to add a menu item to link to my blog but I cannot do this. When I add [[menu.main]] pointing to my blog the autogenerated entries no longer appear in the menu. On the other hand the syntax [[menu.shortcuts]] is also not supported.

My workaround for now is to hack menu.html (I added this after Site.Sections):

{{ if .Site.Menus.shortcuts -}}
{{ range .Site.Menus.shortcuts -}}
<li><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
{{ end -}}
{{ end -}}

And in config.toml:

[[menu.shortcuts]]
name = "Programming Blog"
identifier = "blog"
url = "https://marcin-chwedczuk.github.io/"
weight = 0

This will not generate a proper mobile menu - I guess I need to hack more...

It would be good to have support for shortcuts included out of the box. Even better if we could support it with weights field so that both shortcuts and autogenerated menu entries could be mixed.

RSS file generated from the rss link on the footer does not contain podcast tags for iTunes.
No example given on the exampleSite, so unsure if my implementation is correct.

The config.yaml is

params:
  contact: ...
  ...
  podcast:
    title: ...
    descriptions: ...
    ...

And each entry contains below as its markdown header

author: ...
title: ...
podcast: ...
  mp3: ...
  duration: ...
  image:
    src: ...

Please Add portfolio page for manage portfolio for Hugo.

It would be great if SCSS code was documented using Sassdoc, preferably with Herman theme. I will try to make a PR when I have time.

If one enables a 64x64 logo in params, then Lighthouse complains that the logo and and the mobile menu overlap (the warning is 'inappropriately sized tap targets' and details describe it as an overlap).

Is it possible to use KaTex with this theme? If so, would you show how to configure it?

Thank you,
Max

Tried to create a new static site with hugo today, following the quickstart guide. I followed the steps in that guide exactly, with the exception of choosing the zen theme.

When I got to Step 3: Add a Theme, I clicked through to themes.gohugo.io and saw the #2 theme in the list was Zen. It looked nice, so I installed it instead of the suggestion in the quick start guide, using the following commands:

cd quickstart
git init
git submodule add https://github.com/frjo/hugo-theme-zen.git themes/zen
echo 'theme = "zen"' >> config.toml

However, then Step 5: Start the Hugo server failed with the following error message:

$  hugo server -D
Start building sites …
WARN 2020/11/14 23:23:39 .File.UniqueID on zero object. Wrap it in if or with: {{ with .File }}{{ .UniqueID }}{{ end }}
ERROR 2020/11/14 23:23:39 TOCSS: failed to transform "sass/print.scss" (text/x-scss): resource "scss/sass/print.scss_6f664080c634a8edb051ceda3df60601" not found in file cache
Built in 11 ms
Error: Error building site: TOCSS: failed to transform "sass/styles.scss" (text/x-scss): resource "scss/sass/styles.scss_c253c1450adff31bb2ccb2afd691b09e" not found in file cache

I installed

$ hugo version
Hugo Static Site Generator v0.78.2-959724F0 linux/amd64 BuildDate: 2020-11-13T10:08:14Z

and I'm doing this on an Ubuntu 18.04 install on WSL2:

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.4 LTS
Release:        18.04
Codename:       bionic
$ uname -r
4.19.128-microsoft-standard

If, instead, I use the theme suggested in the quick start guide, the server starts successfully, so I suspect it was my choice of theme that was the issue.

This is probably my fault, but I have exhausted my Google-fu and imagination. :)

I can't get list-style-type to be honored. I have tried _custom.scss and even style attribute in HTML.

1. Allow unsafe HTML in config.yaml
2. Add an HTML list in about.md:

<ul>
<li style="list-style-type:none; color:green;">Foo</li>
<li>Bar</li>
</ul>

3. First list item is green, but the circle is visible. I had expected it to not show.

Is there some !important setting in the sass code making it impossible to override?

The search results doesn't seem to check if submitted = false. It will always show submitted dates in search results.

Am using following language specific settings in config/_default/languages.toml

[en]
languageCode = "en-US"
languageName = "English"
weight = 1
contact = "OFDN"
copyright = "© OFDN 2023"
description = "OFDN Library Project"
dateformat = "January 2, 2006"
feedlinks = false
realfavicongenerator = true
relatedposts = true
footer = "OFDN Library Prototype."
imageMaxWidth = 400
mobileMenu = true
poweredby = false
submitted = false
sidebar = true
pluralizelisttitles = false
removePathAccents = true
paginate = 10
paginatePath = "page"
rssLimit = 20
searchform = true
menuInHeader = false 

[or]
languageCode = "or"
languageName = "Odia"
weight = 2
title = "OFDN ଲାଇବ୍ରେରୀ ପ୍ରୋଟୋଟାଇପ୍ |"
description = "OFDN ଲାଇବ୍ରେରୀ ପ୍ରୋଜେକ୍ଟ |"
contact = "Odia OFDN"
copyright = "Odia © OFDN 2023"
dateformat = "January 2, 2006"
feedlinks = false
realfavicongenerator = true
relatedposts = true
footer = "OFDN ଲାଇବ୍ରେରୀ ପ୍ରୋଟୋଟାଇପ୍ |"
imageMaxWidth = 400
mobileMenu = true
poweredby = false
submitted = false
sidebar = true
pluralizelisttitles = false
removePathAccents = true
paginate = 10
paginatePath = "page"
rssLimit = 20
searchform = true
menuInHeader = false 

Hi,

I am running with sidebar: false, but there is stiil room for it on a big screen:

Is that how it should be?

/Morten

Hi,

I'm checking out this theme and I'm wondering what's the best way to customize things like fonts. For example I want to use a different font family for the body text.

Is there a way to customize the SASS variables on the project level? I tried copying _variables.scss to `assets/sass/, but that doesn't seem to work.

Thanks!

I have added the following code to top of sidebar partial in my layouts folder. I would like to post to /search page that contains search partial and show results.

  <section>
  <form id="search-form" class="search-form" action="/search" method="post" accept-charset="UTF-8" role="search">
    <label for="query" class="visually-hidden">{{ i18n "search_title" }}</label>
    <input type="search" id="query" name="query" class="search-text" placeholder="{{ i18n "search_placeholder" }}" maxlength="128">
    <button type="submit" name="submit" class="form-submit" >{{ i18n "search_title" }}</button>
  </form>
 </section>

The search.md page contains the following.

---
title: "Search"
searchform: true

---

{{< search >}}

There seems to be no way wrap text around images in hugo-theme-zen.

https://dancing-tulumba-c1f460.netlify.app/en

https://dancing-tulumba-c1f460.netlify.app/en/book/watersil-paikhanara-byabahar-o-rakshanabekshana-1991/

I have these settings in my config.yaml file:

imageMaxWidth: 600
sidebar: false

I have noticed that the max image width is not working when sidebar is set to false. It works fine when set to true. This is an example. I currently have sidebar set to false. The actual image width is 1280. I know that I can set the desired width in the figure short code. But I would have to do that for every image.

I have also installed a notice short code that is using an SVG image for the background color, and I noticed that it is also expanding the beyond the 600 width.