mrmierzejewski/hugo-theme-console

A minimal, responsive and light theme for Hugo inspired by Linux console.

Hugo Theme: Console

A minimal, responsive and light theme for Hugo inspired by Linux console.

Live demo

• https://themes.gohugo.io/themes/hugo-theme-console/

Installation

$ mkdir themes
$ cd themes
$ git submodule add https://github.com/mrmierzejewski/hugo-theme-console.git hugo-theme-console

See the Hugo documentation for more information.

Configuration

Set theme parameter in your config file:

theme = "hugo-theme-console"

Example Site

To run the example site, please type the following command:

make hugo-server

Start page

The default start page template is located at themes/hugo-theme-console/layouts/index.html. To change the page content, you to need to copy this file to your website top-level layouts folder (layouts/index.html).

License

Copyright © 2021 Marcin Mierzejewski

The theme is released under the MIT License. Check the original theme license for additional licensing information.

hugo-theme-console's Issues

Links only clickable on the upper half of the font

Links on main page and posts using the h1 format are only clickable on the upper half of the font.

Editing the pixel boundary in ~/hugo-theme-console/static/terminal-0.7.2.min.css to -5 lowers the boundary but also drags the === highlight downward.

h1::after {
content: "====================================================================================================";
position: absolute;
display: var(--display-h1-decoration);
bottom: -5px;
}

Blockquote does not work?

I am try to insert a block quote into my posting but it just display >

Tag support in the future?

I know the theme wants to capture the minimalist spirit and it's a wonderful theme, but tags are missing and that would be a really useful addition.

How can I add a new page

in the navigation bar like "about", "posts", "photos"?

Fonts in console.css will 404 on GitHub-hosted "project pages"

If a repository is hosted on GitHub Pages but should be hosted on username.github.io/reponame (instead of the base URL without the added reponame path), the fonts in console.css are requested from username.github.io/hugo-theme-console/font/fontname and not from username.github.io/reponame/hugo-theme-console/font/fontname.

I'll create a PR that changes the font paths to relative (i.e. changing /hugo-theme-console/ into ../). Alternatively, they could probably be pulled directly from google fonts.

Animation

I'm sorry if i'm being offtopic with this questions, but is it possible to turn off the animation, and how would one do that? Thank you for creating this theme, it's lovely!

Change size of image inside post?

Hello, I curious how I can change the size of an image in my post cuz all my images are forced to full screen in this theme

Problem deploy theme on netlify

I tried to deploy the site on Netlify, it doesn't return any errors but I can't see the theme, only the html. I tried to use netlify.toml as well but it gives an error on "repo -b $ URL".
How can I proceed to correct the problem?

Adding Font Awesome to content/pages/posts

Hello,

as per title, how would I add font awesome support to Console theme ?

ty.

Extra '>' character in blockquote

Hi Marcin,

Looks like there's a minor issue with the CSS for blockquote that I don't quite have the CSS experience to fix.

In my markdown, I have a single line in a blockquote, with a new line and some other text following it.

The page renders with the wrap-around text being correctly quoted, but it always seems to add an extra '>' character after the quote.

Hopefully this would be a fairly easy fix. Thanks heaps, love the theme!

netlify.toml deploy error

Hi. Love the theme. Thanks for doing it.

I used your netlify.toml but my build is failing with an error

1:28:54 PM: Preparing Git Reference refs/heads/master
1:28:56 PM: Parsing package.json dependencies
1:28:57 PM: Failing build: Failed to parse configuration
1:28:57 PM: Failed during stage 'Reading and parsing configuration files': 
Base directory does not exist: /opt/build/repo/exampleSite

: exit status 1
1:28:57 PM: Finished processing build request in 5.547958779s

What should I put there?

[build]
base = "exampleSite"

Netlify deploy

https://app.netlify.com/start/deploy?repository=https://github.com/wowchemy/starter-academic
There should be a quick method to deploy to netlify. The theme is very good but I cannot install on netlify.

Social preview images

Hi there,

I can’t quite figure out how to define social thumbnails/preview pictures using this theme. Any clue?

Thanks!

terminal.css overriding highlight styling

When using the {{ highlight }} shortcode for codeblocks, the terminal.css overrides the color settings of the hljs style that I set in the config file. Is there a simple way to change this so that the hljs style setting takes precedence?

Just a thought on a tiny improvement maybe on this theme

Hi Marcin,

I really like this theme and I finally figured everything out. I am not sure if this is problem with my setup or it is what it is for this theme. The "terminal" like header with path showing will point me to 404 page instead of directing me to the right page. Let me give an example to make sure I clarify it clearly. For instance below, I am on the "Introduction" single page html from example site, as showed in the image below:

If I click on "My New Hugo Site", it will correctly point me to the main page, which is expected. However, if I click on "posts", or click on "What is Hugo", it will give me an 404 error. Is this a problem on my side when I set things up ? Or this is just what it is for this theme. If it's the latter case, Is there any plan to improve it so that when I click on them, they will direct me to the right pages?

Best,
dupeliuhao

Mobile view cuts off title

If you check the page with mobile, webpage title is cut off and slighlty out of place.

Viewable with this or with any browser on android at least:
https://search.google.com/test/mobile-friendly

Example with https://mrmierzejewski.com/

This repo's README.md has screenshot of mobile view with title being :~# and actual title on mobile is mr:~#

Documentation missing on some of the features supported by the theme

I was wondering if you could expand the documentation to explain how to use the Linked and Twitter linking for individual posts (as seen in posts/single.html) and how to embed emojis to posts?

For the emojis, I tried adding enableEmoji = true in the config and adding font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols; to the font-stack in the CSS but this does not seem to have the desired result (e.g. converting :heart: in a post to ❤️) - would you have any suggestions?

Blank spaces in Posts page

I am getting lot of blank spaces before the footer in the Posts page. Could you please check? Thanks!

Ref Link: https://qainsights.github.io/posts/

Link to all posts

Hi!
Thanks for this awesome theme!

I added the following to my config:

[params]
     [[params.navlinks]]
     name = "posts/"
     url = "posts/"

So it looks like:

However when I click on it, I get a 404. So it seems the Pagelist is not generated? What could be the cause for this?

Change background color

Hi, everyone.

Sorry for asking this, but I just can't find how change this:

somebody please can help me to change color background of the site (invert all colors). I'm in the "console.css" archive, but it's dificult because changes in the rmarkdown viewer pane are slow (at least to me).

Btw, I really love the theme, very fast and minimal. I hope still working with rmakdown in the future.

Disable animation on page load

Hello!

Is it possible to disable the page load animation? If so, could you point me to the right place to look?

I found what appears to be the css library you're using to do the animations:

https://animate.style/

I don't mind doing the homework to figure it out, if you can just get me started by pointing me in the right direction. :)

I love the theme; thank you for publishing it!

Josh

Images losing resolution

Hello,

Thanks for creating this theme! It's amazing.

I would like to ask; The images are losing their resolution when it's shown on either pages (home, photos). Is it due to the resize function making images lose resolution drastically? Or some kind of compression issue?

Anyway, Is there any fix to this? Please help.

Also, I'll try to solve it too.

Missing slash in top navigation bar

Hello,

I just started using Hugo and found the "console" theme and I really love it. However, I ran into a strange issue where the top navigation menu for the breadcrumb link is missing a "/" between "posts" and the individual post. It also happens with "photos" posts.

What's strange about it is that when I test on my laptop, I don't have this issue. It only happens after I upload to a hosting site. I've tried both Vercel and Netlify and they both have this issue.

You can see the issue on this page:
https://dbre.work/posts/hello-world/

Thanks for the help in advance!

Ryan.

Works well with GitHub Pages?

Hello,

Thanks a lot for the wonderful theme.

I was wondering if it would be possible to use it together with GitHub Pages. I tried to follow this tutorial simply changing gcushen/hugo-academic by mrmierzejewski/hugo-theme-console but it did not work for some reason unknown to me.

Any guidance in this regard would be very appreciated.

Best regards, George.

Different layout from the screenshot of the demo?

Hello,

I am trying to use this theme and I think I get a very different theme layout from your Demo site. Here is a screenshot of the example site within the repo. Maybe I missed some steps when setting things up? or there is some other configuration parameters that I need to tune?

Cannot change "About" from default

Hi Marcin,

I was working with the Console theme on Windows 10, and I had a quickstart version of the site running on localhost after following these instructions.

Unfortunately, I cannot figure out how to change the default "About" text, which is "Console is a minimal, responsive and light theme for Hugo inspired by Linux console. (more)", to something different. I looked through the content folder, but when it is created it starts out empty and when I add an "about" directory with an index file, still nothing changes in the site.

Do you know how I can change the default text? Please let me know if I can help you reproduce this issue.

Live demo not working?

The live demo (https://mrmierzejewski.com/) as of 7/23/2023 seems to be just four links:

Where is the "console" aspect?

Support adding custom CSS/JS scripts

At present, there doesn't seem to be a way to add custom CSS stylesheets to baseof.html which makes customization of the theme difficult.

Something like a blank partial template that can be overridden would be ideal.

Images are always width = 100%

Hi,

if I include an image in a posting, images are always 100% in width, even I'm using the figure element
{{< figure src="./error.jpg" height="185px" width="473px" >}}

Is there any way to get a workaround or to solve this issue?

Kind Regards,
Danny

Create a form on the site without adding a subject to main menu

Hi,

Thanks for a great theme! I am constructing a website for my father who has written a book that he would like to sell through his site. The site is here. Now I would like to make it possible for people to order his book on his website by entering their names, emails, postal addresses, how many copies of the book they would like + the possibility to write a message. The issue is, where and how do I write the required form code? I am open to using Google forms or Netlify forms or any form as long as the form is embedded in the overall design of the site (using the same fonts, colours and styles). However, I would NOT like to include another main meny choice called 'Order book'. Rather I would like to have an 'Order book' link or buttom on the front page as well as under the 'Boken' tab. Where would I enter the form code then? I am completely new to creating forms on websites so please be gentle. Thanks in advance! /Joakim