halogenica / beautifulhugo Goto Github PK

Hi

I am still quite new to Hugo and HTML and CSS generally. I'm seeking guidance on syntax highlighting. I would love to implement the github style using Highlight.js. Anyone to assist?

hello,

is it possible font awesome can be updated? or describe how to do it?

The comments in the head_custom.html and footer_custom.html say to add the corresponding file to the /layouts/ directory in order to add some extras to the head/footer. That's right for the head_custom.html. I tried the same for the footer_custom.html, but it didn't work. I figured out that moving the file to /layouts/partials fixes it. Both comments say the same, but it just works for one of the files. It would be nice if both files should be either in /layouts/ or in /layouts/partials/. I would have fixed it myself, but I think in the end you should decide where to put the files.

This is a odd one, and I hope I'm not doing anything wrong, but for some reason I cannot get the author Twitter social icon to show up in the footer.

I tried a bunch of other social icons (github, reddit, stackoverflow) and they all seem to work, but the twitter link has no icon.

In my config.toml:

[Author]
name = "Michael Erasmus"
github = "username"
twitter = "username"
reddit = "username"
stackoverflow = "users/XXXXXXX/username"

This is what I'm seeing on my footer though (when I run hugo server)

The <i> tag for the twitter link seems to be there, but it's just not showing an icon?

Hello @halogenica,

I'm sure you want to add your theme to Hugo's theme gallery. You can do this by adding this repository as submodule to the hugoThemes repository.

However, to make sure that the demo of you theme can be generated we need to add two things:

• within the exampleSite folder you need to have a directory named static, even if it's empty and not used. Since Git needs something to track inside that folder add an empty file like .gitkeep to this directory.
• we need some metadata about this theme. Those are defined in the theme.toml. You can find an example here

Hi there, I am using beatifulHugo theme for my website (https://goo.gl/S2xbn14). I want the visitor to be able to view all the posts that have the same tag in one page.
Can somebody please let me know how to define the number of posts showed on the list?

Thanks in advance beautiful Hugo - lovers.

The home page main title is the same the website title, I think we should define a parameter in config.toml to custom the main title.

When I look at the styles for subheadings on pages and posts it looks like they are inconsistent. After a bit of fiddling around the with the CSS I found that adding the following allows the font-weight: 300 to override the font-weight: 800 being applied to all the h* tags earlier in the file.

h2.posts-subheading {
  font-weight: 300;
}
h2.pages-subheading {
  font-weight: 300;
}

My best guess is that the following lines from the main.css are using the singular for page and post for the subheading. Or the reverse is true and the CSS is fine but a template is wrong.

.intro-header .page-heading .page-subheading,
.intro-header .post-heading .post-subheading {
  font-size: 27px;
  line-height: 1.1;
  display: block;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 10px 0 0;
}

I tried to see if this might be an issue with Hugo itself but I wasn't able to find subheading in that repo related to the templates or CSS.

Am I understanding this poorly or did I stumble on a bug? I'm unfamiliar with Go so I haven't dug too far into the source code yet.

Thanks for the wonderful theme! Minor issue just came up:

With the release of Hugo v0.21 the following warning is output when using this theme:

WARNING: calling IsSet with unsupported type "invalid" (<nil>) will always return false.

This is due to a change in IsSet (see Hugo issue #3092). I'm not sure where this is occurring exactly, and for now this is not an error (the original change to an error would break many themes, presumably including this one). However, the plan is to have this be an error in the future.

Started building sites ...
ERROR 2017/11/27 22:41:02 Error while rendering "page": template: /blog/layouts/_default/single.html:6:29: executing "header" at <partial "header.html...>: error calling partial: template: theme/partials/header.html:60:21: executing "theme/partials/header.html" at <partial "post_meta.h...>: error calling partial: template: partials/post_meta.html:7:22: executing "partials/post_meta.html" at <index $.Site.Data.co...>: error calling index: index of untyped nil
ERROR 2017/11/27 22:41:02 Error while rendering "home": template: /blog/themes/beautifulhugo/layouts/index.html:27:17: executing "main" at <partial "post_meta.h...>: error calling partial: template: partials/post_meta.html:7:22: executing "partials/post_meta.html" at <index $.Site.Data.co...>: error calling index:index of untyped nil

This can be fixed by wrapping the offending areas in some extra checks:

post_meta.html

{{ if .Site.Data.comments }}
  {{ $comments := index $.Site.Data.comments $slug }}
  {{ if $comments }}
    {{ if gt (len $comments) 1  }}
      {{ len $comments  }} {{ i18n "moreComment" }}
    {{ else }}
      {{ len $comments  }} {{ i18n "oneComment" }}
    {{ end }}
  {{ else }}
    0 {{ i18n "oneComment" }}
  {{ end }}
{{ else }}
  0 {{ i18n "oneComment" }}
{{ end }}

staticman-comments.html

{{ if .Site.Data.comments }}
  {{ $comments := index $.Site.Data.comments $slug }}
  {{ if $comments }}
    {{ if gt (len $comments) 1  }}
      <h3>{{ len $comments  }} {{ i18n "moreComment" }}</h3>
    {{ else }}
      <h3>{{ len $comments  }} {{ i18n "oneComment" }}</h3>
    {{ end }}
  {{ else }}
    <h3>{{ i18n "noComment" }}</h3>
  {{ end }}

  {{ $.Scratch.Set "hasComments" 0 }}
  {{ range $index, $comments := (index $.Site.Data.comments $slug ) }}
    {{ if not .parent }}
      {{ $.Scratch.Add "hasComments" 1 }}
      <article id="comment-{{ $.Scratch.Get "hasComments" }}" class="static-comment">
        <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=48">
        {{ if .website }}
        <h4 class="comment-author"><a rel="external nofollow" href="{{ .website }}">{{ .name }}</a></h4>
        {{ else }}
        <h4 class="comment-author">{{ .name }}</h4>
        {{ end }}
        <div class="comment-timestamp"><a href="#comment-{{ $.Scratch.Get "hasComments" }}" title="Permalink to this comment"><time datetime="{{ .date }}">{{ dateFormat (default (i18n "shortdateFormat") .Site.Params.dateformat) .date}}</time></a></div>
        <div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
      </article>
    {{ end }}
  {{ end }}
{{ end }}

I had some problems with the figure shortcode, since it doesn't support all the features of the original figure shortcode (I was either trying to resize or center a figure). I ended up removing it. Would it be better to rename it to something like beautifulfigure so that the original figure shortcode is accessible?

Hey there, thanks so much for your work on this theme 😄

I've further customised the CSS heavily and made a dark theme with Solarized Dark (ported from Octopress) for code blocks.

Thought you might want to give it a quick look: http://fgimian.github.io/

Please note that I'm colourblind, so forgive me if there are any bad colour choices 😄

Also, is there any easy way to make the width of posts wider? e.g. on a regular post like this one.

Any feedback is welcome
Fotis

The exampleSite config.toml includes this line:

pygmentCodeFences = true

But it should be:

pygmentsCodeFences = true
       ^note the s here

Suggestions:

• Please add useChroma (possibly commented out) to the [params] section
• Please make the README and this config.toml consistent w.r.t. [params] vs [Params]. It's confusing because I think some settings in Hugo are case sensitive.
• Maybe include some other Chroma/Pygments settings in this example config.toml, e.g. pygmentsOptions = "linenos=table" (probably commented out).

Thanks for such a nice theme!

Thank you for Beautiful Hugo. Having fought with CSS more than I'd like to recently, I appreciate even more the hard work that goes into maintaining a theme for Hugo. :)

I updated to the 5f274c8 commit the other day and noticed that codeblock.css has the following section that appears to cause an additional space on the first line - and only the first line - of any codeblock that uses the highlight shortcode.

pre code.hljs {
  padding: 9.5px;
}

I was a bit surprised since I'm not using HLJS (not intentionally at any rate).

This does not appear to impact the code fences since they do not end up with the hljs class like in this example from using a short code.

<code class="language-css hljs" data-lang="css">

For reference, this seems to be the case for the shortcode rendered code blocks with both Chroma and Pygments.

I'm not sure why I'm only seeing this behavior on the first line of a code block but I suspect that was not the intent.

If there is anything more I can provide related to this issue, don't hesitate to ask.

The previews on a localhost:1313/tags/sometag page are wider than most other pages since they are not wrapped in a

<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"></div>

Is this intentional? To me it looks inconsistent.

I can try to fix it, though I'm not very familiar with Go's template syntax.

Right now several (all?) languages in the i18n yaml files use the word "mots" for the translation of "words." Much as I love French, this should be updated.

Hi,

I wanted to use this awesome theme for my new blog but ran into the problem that the social media icons provided by Font Awesome arten renderendere strnge the RSS icon is rendered:

My config.toml looks something like this:

[Params]
author = "Norbert Fuhs"
dateform = "Jan 2, 2006"
dateformfull = "Mon Jan 2 2006 15:04:05 MST"
email = "[email protected]"
lang = "en"
pygmentsuseclasses = false
rss = true
comments = true

[Author]
name = "Norbert Fuhs"
email = "[email protected]"
#facebook = "username"
#googleplus = "+username" # or xxxxxxxxxxxxxxxxxxxxx
github = "norberfuhs"
#gitlab = "username"
twitter = "@NorbertFuhs"
#reddit = "username"
#linkedin = "username"
#xing = "username"
#stackoverflow = "users/XXXXXXX/username"
#snapchat = "username"
#instagram = "username"
#youtube = "user/username" # or channel/channelname
#soundcloud = "username"
#spotify = "username"
#bandcamp = "username"
#itchio = "username"

I left the social.toml like in the sample..

When I do hugo server --theme=beautifulhugo --buildDrafts I only see the rss button rendered..

The Demo Beautiful Hugo site includes a static "About" page that hides the next | previous post-> button that is associated with blog entries. [1] I'd like to hide the "post" button on my static pages as well but when I mimic the "About" page with my own "About" page the post button is displayed on it. How does one hide/exclude the next | previous post-> button on static pages?

My initial content directory

content
  page
    about.md
  post
    post1.md
   . . .

[1] https://themes.gohugo.io/theme/beautifulhugo/page/about/

Hello,

RSS icon always show (and wrong link) although I did not set it

Is there a way of choosing between post summaries and full content for RSS feeds?

When I include a bigimg on my site, it does not show up in Firefox 57. The title text CSS seems to work, as the title turns white with a drop shadow, but it's just sitting on a white background. This problem does not occur in Chromium.

I'm running Arch Linux, Firefox 57.0.4, and Chromium 63.0.3239.132.

In the Chroma section of the README, I think it would be useful to mention that if:

pygmentsUseClasses = false

then the syntax.css file is not needed.

It would probably be more accurate to use useChromaClasses rather than useChroma for that param name, but it might be too much of a pain to change it now.

I think it would be easier to understand highlighting if that part of the README had this structure:

• Syntax highlighting
  • Server side syntax highlighting with Chroma
  • Client side syntax highlighting with Chroma
  • Server side syntax highlighting with Pygments (deprecated)
  • Client side syntax highlighting with Pygments (deprecated)

I'm still figuring out all the weirdnesses of Chroma and don't feel like I know enough to actually write those sections yet.

Thank you for beautifulhugo!

See daattali/beautiful-jekyll@e6cb0a4 , you could copy exactly the same code

This will allow you to have a wide image in the header of a page

The math sample, big image sample and code sample on the demo site take up moro horizontal space than the viewport width and lead to horizontal scroll being needed. A better solution might be to scale the content to fit in the viewport width.

Tested on Samsung Galaxy S8 and One+ 5 in Chrome

ERROR 2017/03/14 16:06:38 theme/partials/head.html template: theme/partials/head.html:56:13: executing "theme/partials/head.html" at <isset .Params.bigimg...>: error calling isset: unsupported type "invalid"
ERROR 2017/03/14 16:06:38 theme/partials/header_wp.html template: theme/partials/header_wp.html:13:8: executing "theme/partials/header_wp.html" at <isset $bigimg 0>: error calling isset: unsupported type "invalid"

Hi,

I added myself wikipedia and soundcloud glyphicons, only the wikipedia-w glyph is available in font awesome 4.4 or higher. I noted the upstream author of the beautiful-jekyll theme and he fixed it. Maybe you also would like it. Adding wikipedia and soundcloud profiles with config.toml would also be usefull for other people. See the issue for more details (the extra footer info is also there pasted):

daattali/beautiful-jekyll#50

Thanks for your time and effort to have this theme ported to Hugo!

Kind regards,
Jerry

Hugo new user here.. Thanks for your theme.

Just wondering why this theme uses GIT_COMMIT_SHA environment variable instead of reusing information from hugo from enableGitInfo = "true". There is probably something I'm missing. Thanks for your time to explain it.

Hi! I'm trying to migrate my blog to this theme (thanks for your work!) and I've found an unexpected behaviour.

I've "rss = true" setting in config.toml, so in the main page I can see the rss icon pointing to the index.xml file. However, in the footer of the "about.md" page, the ".RSSLink" variable is empty, so the link is wrong.

Could you provide any hint on this? Is something I have to configure? Thanks for your time! 👍

This is a real edge case. But, I recently was made aware that my site wasn't responsive on mobile. Testing led me to articles with code blocks being the only ones breaking responsiveness. After checking my config.toml (using Chroma, seemed to be fine) I had to deep dive the code. After significant troubleshooting, I determined the codeblock.css file was to blame. Purging that file rendered the site immediately mobile friendly. Not sure if it's just my site with this issue or if others are experiencing it as well.

The footer is not always in the very bottom of the page. If the content is not "high" enough, the footer can appear in the middle of the screen. I know this is rather unlikely when used for a blog, but I encountered it during testing the theme.

It would be nice for Beautiful Hugo to be available in different languages. At the moment, only people writing in English have access to this wonderful theme. Doing i18n would involve a few different things:

1. Move all English text in the templates to i18n/en.yaml and reference it with {{ i18n }}
2. Alter URLs in the templates to be language-relative
3. Alter lang attributes in the templates to use the correct language
4. Add a language switcher to the navbar
5. Add links to translated content in posts, and maybe in pages

The first three are not so hard, but 4 and 5 require some design thought. I think the language selector could be implemented as a multi-level menu at the top-right, or if there are only two languages, a menu link displaying the name of the other language. The links to translations of posts could maybe go to the right of the hashtags. But I'm open to suggestions.

I have already done some of this work for my personal site, so if this looks like a good idea I can start adapting my work for use in this repo.

don't know where the problem is, but the demo site

http://themes.gohugo.io/theme/beautifulhugo/

isn't displaying this theme properly when you click on the green demo button (firefox 53.0/mac) . i think they just rebuilt their theme showcase, so maybe the problem is over there...
UPDATE next day: the example site here builds and runs just fine, so the problem may be entirely over at https://themes.gohugo.io/theme/beautifulhugo/

I create a change for baseurl, from domain.com into domain.com/dir, i try to change every link and work properly except the tags.

The main tag (i don't know what i called) that appears in the main page is work. but the Tag from list (in the tag menu) is not working. till using domain.com/tag/thetag that should be domain.com/dir/tag/thetag.

It maybe my bad who don't know how to configure it, but maybe you could give some help.

Thanks.

Hello @halogenica

Thanks for porting beautifulhugo, I have been playing around with it and I found there was no possibility to use bigimg in the homepage, by the way I checked pages functionality and it does, so reading a little from the jekyll version I found the way to have them in the frontpage as you can see here:

elcoliving.com

By the way reading the original beautiful-jekyll docs, there is a feature to add multiple images to the pages using a list variable in the TOML config part, but when I try to apply this to beautifulhugo it doesn't work as expected: I get this:

GET http://localhost:1313/coliving-space-bogota/[/img/1dj.jpg%20/img/1fireplace.jpg%20/img/1terraza.jpg] 404 (Not Found)

after setting the next list var at the TOML part:

bigimg = ["/img/1dj.jpg", "/img/1fireplace.jpg", "/img/1terraza.jpg"]

If I set the variable as a string pointing just one file, it works. finally, the question is, do you know if is it possible with the current version of beautifulhugo to use the multiple image option?

Thank you very much for taking the time reading this.

The about page stopped working in hugo 0.19, 404 error. Works correctly in hugo 0.18.1.

[nwatkins@sapporo nohaha]$ hugo new post/test-post.md
Error: error from marshal: unsupported value type map[interface {}]interface {}: map[]

the code highlight function doesn't work . even in DEMO

First of all, great work, this is the best hugo theme I have seen so far, thank you for migrating it from the Jekyll counterpart.

For the images on a site I'm creating, I would like them to not stretch at all. Perhaps the extra space on either side of the image can just be some sort of grey-fill? This is useful if the image has details at the top or bottom one does not want omitted, for example.

We get an error where there are no comments in staticman

executing "main" at <partial "staticman-c...>: error calling partial: template: theme/partials/staticman-comments.html:19:33: executing "theme/partials/staticman-comments.html" at <index $.Site.Data.co...>: error calling index: index of untyped nil

This can be reproduced with completely new site:

hugo new site testing

Post would be created successfully:

hugo new post/a.md
cat content/post/a.md
    +++
    date = "2017-03-01T16:36:09-08:00"
    title = "a"
    draft = true

    +++

But after install and setting the theme to beautifulhugo, new post become broken:

cd themes && git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo && cd ..
echo 'theme = "beautifulhugo"' >> config.toml
hugo new post/b.md
cat content/post/b.md
    +++
    title = ""
    bigimg = ""
    date = "2014-07-11T10:54:24+02:00"
    subtitle = ""

    +++

Notice the date is wrong, and also the title is empty, and missing the draft flag.

This works fine with hugo 0.16, but starts breaking on > 0.18. My temporary solution is to remove the theme variable in the configuration file, and set it on the command line for every hugo command:

hugo server -t beautifulhugo -wD

If someone can give me a pointer on what could go wrong, I can try to get to the bottom of this, and maybe submit an PR.

Firefox 51.0.1 (64-bit) Linux

It seems that every other social icon is hidden on Firefox, however works OK in Chromium. See attached.

Hi! Thanks for your theme! It is amazing! I would like to know if your theme supports basic tags ? Or, if it is gonna be supported in some near future.

Thanks!
Juan

First, the theme is awesome. Thank you for it. And for the recent update to use Chroma.

When I switched over to Chroma today, I ran into a situation where when I use pygmentOptions = "linenos=table" in config.toml I see a vertical line artifact on the right hand side of any code that doesn't run the full width or trigger the horizontal scrollbars.

Is there some other setting that I'm missing?

Hugo v0.30.2
beautifulhugo 7cdd0e0
Chroma style monokai
Chrome browser

I found out a small discrepancy in various taxonomy URLs, some of which produce an additional forward slash (resulting in a double forward slash) in links on the default page as well as in menu links.

The first problem is in the layouts/index.html file:

$ diff -u layouts/index-original.html layouts/index.html
--- layouts/index-original.html	2018-01-11 10:37:56.684475367 +1100
+++ layouts/index.html	2018-01-10 21:25:48.937303363 +1100
@@ -37,7 +37,7 @@
               {{ if .Params.tags }}
                 <span class="post-meta">
                 {{ range .Params.tags }}
-                  #<a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}/">{{ . }}</a>&nbsp;
+                  #<a href="{{ $.Site.LanguagePrefix | absURL }}tags/{{ . | urlize }}/">{{ . }}</a>&nbsp;
                 {{ end }}
                 </span>
               {{ end }}

This is quite interesting, as exactly the same code is present in layouts/_default/list.html where it does not contain the beginning forward slash in the /tags/ string (as expected).

A similar problem occurs in layouts/_default/terms.html file:

$ diff -u layouts/_default/terms-original.html layouts/_default/terms.html
--- layouts/_default/terms-original.html	2018-01-11 10:16:41.184693213 +1100
+++ layouts/_default/terms.html	2018-01-11 10:16:29.424604385 +1100
@@ -4,7 +4,7 @@
     <article class="post-preview">
       <div class="list-group col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
       {{ range $key, $value := .Data.Terms.ByCount }}
-      <a href="{{ $.Site.LanguagePrefix | absURL }}/{{ $data.Plural }}/{{ $value.Name | urlize }}/" class="list-group-item">
+      <a href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/" class="list-group-item">
           {{ $value.Name }}<span class="badge">{{ $value.Count }}</span></a>
       {{ end }}
       </div>

The last problem I found was in partials/nav.html file:

$ diff -u layouts/partials/nav-original.html layouts/partials/nav.html
--- layouts/partials/nav-original.html	2018-01-11 09:40:21.323002834 +1100
+++ layouts/partials/nav.html	2018-01-11 09:34:49.237422460 +1100
@@ -11,6 +11,7 @@
     </div>
 
     <div class="collapse navbar-collapse" id="main-navbar">
+      {{ $url := urls.Parse $.Site.BaseURL }}
       <ul class="nav navbar-nav navbar-right">
         {{ range .Site.Menus.main.ByWeight }}
           {{ if .HasChildren }}
@@ -18,13 +19,13 @@
               <a class="navlinks-parent" href="javascript:void(0)">{{ .Name }}</a>
               <div class="navlinks-children">
                 {{ range .Children }}
-                  <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+                  <a href="{{ replace .URL $url.Path "" | relLangURL }}">{{ .Name }}</a>
                 {{ end }}
               </div>
             </li>
           {{ else }}
             <li>
-              <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+              <a title="{{ .Name }}" href="{{ replace .URL $url.Path "" | relLangURL }}">{{ .Name }}</a>
             </li>
           {{ end }}
         {{ end }}

Here, the whole URL was injected two times with the same server path (taken from config files baseURL variable?). I mean, let's assume that: baseURL="https://www.domain.tld/blog/". After the compilation, it resulted in menu nav links to look like: https://www.domain.tld/blog/blog/tags/ or https://www.domain.tld/blog/blog/categories/, and that is undesirable.

Note: I do not use the Multilingual Mode. Hopefully, this will not break it.

Many thanks and regards!

In a post when I use a highlight javascript to insert a code it throws the following error while building:

error processing shortcode _internal/shortcodes/highlight.html

Hello,

I don't know how to add Search and Formspree/ Can you help me, please?
Thanks in advance!

Hey, I was wondering if you could shed some light on something that's confusing me about the disqus integration in this theme. Why is it that there are calls to {{ template "_internal/disqus.html" . }} in both single.html and page.html? I can see it's also called in post.html, but what I'm trying to do is adjust the templates so that comments only appear on posts, not pages. The documentation on gohugo.io seems to indicate that only one call to {{ template "_internal/disqus.html" . }} is necessary, so I was confused why it's used in multiple places in this theme.

Thanks in advance!

In the example site, these images are defined in post 2017-03-07-bigimg-sample.md:

bigimg: [{src: "/img/triangle.jpg", desc: "Triangle"}, {src: "/img/sphere.jpg", desc: "Sphere"}, {src: "/img/hexagon.jpg", desc: "Hexagon"}]

If the baseurl in the config file is not the root of a domain, but a subdir, those src paths need to be manually changed. For example, for baseurl = "/doc":

bigimg: [{src: "/doc/img/triangle.jpg", desc: "Triangle"}, {src: "/doc/img/sphere.jpg", desc: "Sphere"}, {src: "/doc/img/hexagon.jpg", desc: "Hexagon"}]

¿Could this be handled automatically in order to allow the relocation of the site without manually editing every post which uses big images?