Hugo Themes

Prev/Next: All Themes

newsroom

A simple open source theme for publishing multi-purpose content

Download
newsroom

Newsroom Theme

This is a simple, minimalistic theme, which is inspired by Apple’s Newsroom page. It uses grid css, flexbox & js (no jQuery, or related libraries).

Hugo Newsroom Theme

Features

  • Blog
  • Modern
  • Responsive
  • Deeplinks
  • Dark Mode
  • Supports native lazy loading of images & iframes
  • Syntax highlighting

For all content published using markdown, deeplinks will be added to the pages so that you can share with precision 😃 Just hover on a heading and the link button will pop. Click it to copy.

Install Newsroom Theme

Note: Newsroom uses is styled in sass. Thefore, hugo-extended version must be installed on your system.

Option 1: Add Newsroom as a git submodule

Add this theme as a Git submodule inside your Hugo site folder:

git submodule add https://github.com/onweru/newsroom.git themes/newsroom

Option 2: Add Newsroom as a hugo module (Recommended)

In your config.toml file, set theme field value as follows

theme = ["github.com/onweru/newsroom"]

Then run

hugo mod init yourWebsiteName && hugo mod get -u .

Option 3: Install Newsroom into your theme directory (Least diserable)

From the root of your Hugo website run:

git clone https://github.com/onweru/newsroom themes/newsroom

In your config.toml file, set theme field value as follows

theme = "newsroom"

Configuration

You can configure the site as follows:

  1. General Information

    Use config.toml file.

  2. menu, footer

    See the yaml files inside the data/ directory.

Start publishing

Follow the exampleSite/; specifically, the content directory

Dark Mode

Today, operating systems have a system-wide light ~ dark mode switch. Your website will adapt to the user’s preferred lighting mode. Still, if the user wants to opt in or out of darkmode, there’s a UI control for that too in the menu 😊.

Dark Mode

Set a default lighting mode

Using your site’s config.toml file, set the value of defaultMode to either "dark" or "light".

If your site is built from a copy of the exampleSite, the field is already included; you only need to uncomment and set its value.

The UI control for toggling darkmode will remain in place. This way, the user can decide which mode they would like to use while browsing your website

Custom 404 Page

404 page

Syntax highlighting

Syntax Highlighting

If you wish, you can opt to use Chroma.

I want to use disqus

If you like, you could use disqus on your site. To enable disqus on your site, simply, add the line below to you config.toml file. If you’re working off the exampleSite, the line is already there; just uncomment it.

disqusShortname = "yourdiscussshortname"

Remember to edit the yourdiscussshortname appropriately.

From your disqus dashboard, set your scripts color scheme to auto. See screenshot below

Custom Shortcodes

This theme ships with 2 custom shortcodes (they both use positional parameters):

  1. Video This shortcode can be used to embed a youtube video with custom styling. It takes a solo positional parameter.

    ...
{{< video "youtubeVideoID" >}}
...

  2. Picture You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter

    Store these images in the static/images directory.

    ...
{{< picture "lightModeImage.png" "darkModeImage.png" "Image alt text" >}}
...

From the same creator

  1. Clarity Theme
  2. Compose Theme
  3. Swift Theme
  4. Browse

License

This theme is available under the MIT license.

See also