datacobra / hugo-vitae

Vitae is a blog theme for Hugo that focuses on your content.

Vitae

... is a feature-rich blog theme for Hugo that focuses on your content.

📣 Version 3 is finally released!

The development of version 3 is finished. Currently I'm in the process of planning how to proceed with the development of the theme. For the moment I'll mainly fix bugs and refactor program code.

Donations

If you like my work and want to support me you now have the possibility to donate via Liberapay.

Screenshot

Installation

Download the latest stable release. It's available as .zip or .tar.gz. Decompress it into your themes/ folder.

For more information about installation read the official setup guide of Hugo.

Features

I'm currently elaborating a plan to provide good documentation of the theme in the future. Until the documentation is ready, here is a brief overview of the features that the theme offers: FEATURES.md

Credits

• freepik for the avatar
• google for the roboto fonts
• fontawesome for providing amazing icons
• KaTeX for providing math typesetting for the web

Licensed under the GPL-3.0-or-later.

hugo-vitae's Issues

The tags for a specific post are not shown below the post

I found out, that the tags that a post can have a not visible below this post.
But there should be visible above the footer.

• Review the code
• Create a working prototype
• Commit a fix for master
• Release new minor fixup for Vitae

In-line code blocks are not very obvious

Hi, Thanks for creating this great theme!

I am really liking this theme and using it for my personal website.

I noticed that - compared to many other themes - this one doesn't make in-line code fragments stand out.

For example, in the following rendered text, it's hard to tell if the comma (",") in the second line is part of the code or not:

I have seen several websites that adjust the foreground/background colours to make it more obvious when inline-code fragements start and end:

Would it be possible to take such an approach for this theme? Thanks!

Desactivate comments disqus for specific page

Hello @dataCobra

Maybe i'm doing something wrong, but IDK... The comments are not disabling for specific pages. My page is in /content/contato.md and /content/homepage.md

The parameters in config.toml:

# Comments
[params.comments]

# Enable Comments with "true"
enabled = true

# Comment provider:
engine = "disqus"

# Desactivate comments for specific page types
disableOnTypes = ["contato","homepage"]

[params.comments.disqus]
shortname = "lmbtic"

Home page to get data from a page file?

Hi,
Is it possible for the home page to get its content from a file instead of listing posts or pages.?

Example:

content/
    posts/
        post1.md
        post2.md
   pages/
       about.md
       home.md

I would like home page to show content from content/pages/home.md

Possibility to align images

I know that some of the Hugo themes (such as Icarus and Hermit) offer a way to align images (included thanks to the figure shortcode) to be aligned left or right.

I basically know nothing about css but understood that they used the class attribute to invoke a css style:
{{< figure src="/img/my_image.png" width=200 class=alignleft >}}

.left,
.alignleft {
  float: left;
}
.right,
.alignright {
  float: right;
}

I tried to manually edit the /static/css/main.css file of the vitae theme but did not succeed to get any result.
Could that be possible to achieve ?

I mistakenly added a file "netlify.toml" to the main repo, please delete it.

I mistakenly added a file "netlify.toml", please delete it.

Maybe allow the possibility of adding cover images for posts?

The idea has not yet been further thought through.

Theme is missing .woff2 font-files for FontAwesome (solved) -> Still open as a reminder

The theme makes a request for fa-brands-400.woff2 but that isn't present.

Add the possibility to display information texts in specific parts.

I want to be able to add information texts in specific parts on the website.
Sometimes it might be necessary to give some information to the visitor.

Add customjs to header partial

There is a customcss option, a customjs is missing.
Adding functionality such as Lightboxes becomes harder and sometimes impossible without touching the Theme itself.

href link in terms.html doesn't work

I was having an issue in the terms.html file.

The Tag Cloud was generated but the absolute link (absURL) wasn't creating the last "/", so, for example, my links were
"https://www.giovanialtelino.comtags/clojure/" instead of "https://www.giovanialtelino.com/tags/clojure/". And it only happened after I generated the static files with hugo, while I was running on my machine with hugo server everything worked fine.

To solve it I just changed:

<a href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}<sup>{{ $value.Count }}</sup></a>

to

<a href="{{ $.Site.LanguagePrefix }}/{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}<sup>{{ $value.Count }}</sup></a>.

I'm not sure if this could be a breaking change since I don't know much of Hugo internals.

How to enable search bar

Vitae is a very good theme, and I believe that it would not lag behind the other themes, so ... Is there a search bar? And if so, how to enable?

Absence of favicon

I couldn't find the option to set up favicon. Could you let me know how to proceed?

Custom css is not applied by example config.toml

I found an incorrect example in config.toml.
I set custom css option as referenced in example exampleSite/config.toml, but it was not be applied.

[params]
	# Custom CSS applied to default styles.
	customCSS = "css/custom.css"

css is here.

$ ls -lR ./static 
static/css:
total 8
-rw-r--r--  1 jlandowner  staff  203  5 19 21:06 custom.css <- not applied

I found the generated link tag href is incorrect.

<link rel="stylesheet" type="text/css" media="screen" href="http://localhost:1313/css/css/custom.css">

This is because layouts/partials/head.html already specifies "css" in fixed path.

<!-- Use customcss if you like -->
  {{- if isset .Site.Params "customcss" -}}
  <link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/{{ .Site.Params.customCSS }}" />
  {{- end -}}

I got 2 options.

1. remove "css" from exampleSite/config.toml
2. remove "css" from layouts/partials/head.html

I feel 2 is good but 1 is better for compatibility.
What do you think?

dark theme

Hello !

Is it planned to add support for a dark theme ?
I don't think it is absolutely necessary but it might look pretty nice on Vitae !

Definition of the target URL in the title

Hi,

First of all, thanks for the great theme!

I have come across an issue when deploying the website that wasn't apparent when testing the site on localhost, which is the behaviour of the title. When I click the title (Robin Opletal on this page: https://robinopletal.com/) I get redirected to localhost:1313 instead of getting redirected to the baseURL of the website (which would've been expected)

I have changed nothing to the source files of the theme.

Thanks for any pointers to where the issue could be.

How do I change font?

I want Sans-serif font from serif. Just put font into the webfont folder?

Lightbox implementation

I would love a lightbox implementation for version 3.
I like spotlight.js and already have a prototype running using custom shortcodes.
I can submit a PR in case this is something you're interested in.

Don't display menu if there is no entry

If someone doesn't use the menu, it should not be displayed.

This should be the default behavior and would make the theme even more flexible.

CSS doesn't work

sorry

Links of tags in pages are broken when hugo site is in a subdirectory

Not sure if this is a bug or a newbie issue (I'm new to Hugo).

I've decided to host the Hugo site files in a "/site" folder on my public web directory, as I have other assets on that folder.

I've updated the config.toml file and the Hugo site generates okay - all links take into consideration the "/site" bit on the url. However, the tags at the bottom of a post page will not update to include the "/site" bit - the url generated returns a 404 error page.

Is it a bug or am I missing something?

rss.xml breaks RSS for content that is not on the homepage

With commit f081bb8 I've overwritten more of the default rss.xml that Hugo provides than I actually wanted to.

I want to provide a good rss.xml file, so there will be no quick fix. I now have to take a closer look at the file and think about how to solve this error in a reasonable way.

Disqus showing console error

Disqus is not loading and showing an:
Uncaught TypeError: Cannot read property ‘appendChild’ of null.

How enable the dark-theme

Hello,

how do i turn on dark mode (showing and clicking the moon icon)? Also and make the default dark-mode page?

Tks

Deploy on Netlify?

Hi,

I am a newbie to static websites, I was wondering if there is any documentation available on how to deploy this theme on netlify? So far, I was able to fork the theme, and then when I go to Netlify to deploy from my gihub, I need to enter the following:

1. Build Command
2. Publish Directory

Any help that you can provide on this would be greatly appreciated.
Thanks !

Using Markdown Render Hooks to make links open in new tabs

I discovered today that you can make links rendered by Goldmark have the attribute target="__blank" in order to open in new tabs.

The only thing you need to do is to create a file called render-link.html inside a folder called _markup in your defaults as I show you here:

layouts
└── _default
    └── _markup
        └── render-link.html

That way you can change how Goldmark renders links. In order to make them open in new tabs the code must be something like this:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>
  {{ .Text }}
</a>

Do you think that's a good thing to add to your theme? I would be more than happy to make a pull request with that change if you believe that's something you'd like to have.

Write a better and more detailed documentation

Currently the documentation is kept very small in order to reduce the effort of editing.

Due to the features of the theme there should be a comprehensible and detailed documentation.

Create a new demo/example website

Create a new demo/example website to better demonstrate the capabilities and features of the theme.
It will also help new users work with Hugo and the theme more easily.

The following is needed for a demo/example website:

• config.toml
• content/about.md
• content/post/*.md
• data/
• static/img/

The proper indentation is still missing in most files

The lines of code are not yet indented despite the past improvements.
This means that in many cases the files are still difficult to read.

This needs to be changed!

Don't display footer if no information is available

If someone doesn't use the footer, it should not be displayed.

This should be the default behavior and would make the theme even more flexible.

All links have a trailing space

I recently upgraded from an older version to the latest on main. All links on my site now have a trailing space. This behavior appears to have been introduced in 04b0597 while fixing #55.

It's possible this only occurs on Windows which notoriously encodes newlines differently than Mac or Linux, but I have not tested the change on other platforms.

I'm already putting together a PR already since this is a one byte change and will link it here.

Embedded gist inherits styling from main CSS

Hi Ben.

Wanted to get your feedback on this. I tried to embed a gist using the short code. But the table styling in main.css is inherited to the gist styling somehow. Alternative rows are highlighted in gray. I've attached screenshot to show how it looks.

I understand you might have including this styling for markdown tables.

I figured out the lines to fix the gist appearance are in main.css

• Line: 187 ; table th, table td, remove bottom-border
• Line: 202 ; table tbody tr:nth-of-type(even), remove background-color

What do you think of adding support to ignore any table styling if the div class=gist?
For example:

.gist table {
  all: unset;
}

Please excuse the suggestion if it's not correct. I'm not very familiar with CSS.

Displayed date creates an unwanted break if the size of the characters in sum is over css class width

I tried to fix this in early 2020 after this issue came up the first time.
Now in May 2020 we got the same problem.

Expect:
May 2020

Reality:
May
2020

I need to make some tests to figure out how to fix this in a proper way instead of just set the width of date class in main.css to a higher value then 64px.

Value should be inside double quotes

Inside the header template file, layouts/partials/header.html, this HTML tag:

<div id=social>

should be:

<div id="social">

Image post

Why does it not appear when I make a markdown to display images on my posts? However, the header image can appear

Symbols don't render correctly in links

Thanks for creating this theme.

In my blog I have several links where the link text contains an ampersand.

Example:

Dungeons & Dragons

The theme renders them like so (it shows & instead of &):

Dungeons & Dragons

Is there a way to opt out of HTML escaping for links?
Just putting a \ before the & does not seem to work.

I know that Hugo has a function called HtmlUnescape, but as I'm using plain markdown, I am unsure on how to incorporate that function.

This post is the most relevant on the Hugo forums that I could find, but it seems to address a different issue:
https://discourse.gohugo.io/t/ampersand-character-in-markdown-links/25269

Any tips are appreciated.

Enhancing post title with reading time, word count and author name

Hi Benedikt,

I have enhanced the post metadata to include reading time, word count and author name as shown below. These fields are configurable and can be toggled on/off.

If you are ok with this idea I will raise a pull request

Add functionality to use commento.io for comments

Disqus has some major problems as a third-party comment system.

For this reason I want to be able to use comment.io instead of Disqus.

You can choose which system to use via the Hugo config.

Bug: Instagram shortcode in Example Site breaks the site

There's a bug with the Example site that comes from Facebook blocking access to the public Instagram's API (You can read more about this here).

That causes that, when running hugo serve with the example site, the terminal returns this error message:

ERROR 2021/05/08 09:40:05 Failed to get JSON resource "https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BGvuInzyFAe/&maxwidth=640&omitscript=true": Failed to retrieve remote file: Bad Request
If you feel that this should not be logged as an ERROR, you can ignore it by adding this to your site config:
ignoreErrors = ["error-remote-getjson"]

There's no simple solution for that, you must set up a Facebook developer account and configure your access to the API.

So, the solution I propose for the theme is simple to delete the shortcode inside rich-content.md.

If you think that would be a good fix for this, please let me know and I'll send a PR with that change.

TODO:

From: 07.07.2021

• Porting the PR changes for version 3

head and header partials

Feature Request: Social Media Share buttons are highly desirable for Posts.

It will be great if share buttons LinkedIn, Twitter, Facebook, etc can be added to all Posts in this fantastic theme.

Changed terms.html broke my site

No change on my site, just doing an update to the latest codebase gives me this error:

ERROR 2020/12/15 21:09:06 render of "taxonomy" failed: "website/themes/hugo-vitae/layouts/_default/terms.html:9:14": execute of template failed: template: _default/terms.html:9:14: executing "main" at <div (sub $maxFontSize $minFontSize) (sub $max $min)>: error calling div: can't divide the value by 0

Image thumbnail does not appear

How do I display thumbnail images of each of my blog articles?

The date of the post should not be displayed for a selected content type

I would like to have the ability to not display the date on the single page view for certain content types.

As an example I take the "About" page. In my opinion there is no reason to show the date there.
Also, this change makes a clearer difference between posts and simple pages more visible.

Improving documentation

During the release of version 3, the documentation was only partially done.
Therefore, information about certain new and old features is still missing.

• Improving README.md
• Improving FEATURES.md

KaTeX inline equations not rendering

Hello !
I am trying to embed maths in my website.
The block equations ($$x = 1$$) are rendering as expected. However, inline ones are not working (foo $x=1$ bar).

I don't know if this issue comes from KaTeX or not.
Is there a way to use Mathjax instead of KaTeX as it would maybe solve the issue ?

Render images inside <figure> tags instead of <p> tags

Hi! It's me again,

I have a new propose for you. Hugo's markdown renderer puts images inside p tags. I found that behavior awful, so I've change that in my theme with a render hook.

Do you believe that's something you'd want for your theme? If that's the case I'll be more than happy to create a PR adding that small modification.

I will create a new file called render-image.html inside the _markup folder:

layouts
└── _default
    └── _markup
        ├── render-image.html
        └── render-link.html

The file will have this content:

<figure>
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</figure>

Let me know if that will be something you'll want, I'll be more than happy to make that small change.

Please add the image property meta tag in the Hugo Vitae template to display image thumbnails

<meta property="og:image" itemprop="image" content="image" />

Like that

emojis and bold text are not displaying

not recognizing emojis or bold text from markdown. Is this something I have to make a custom CSS for?

italics currently work