Hugo Themes

Prev/Next: Hugo Resume Hugo Coder All Themes

Jane

A readable theme for Hugo

Author: xianmin
Minimum Hugo Version: 0.45
Updated: 2019-07-19
License: MIT
Tags: responsive blog simple clean readable highlight multilingual

Download Demo Homepage

jane-preview

hugo-theme-jane

Jane is a readable theme for Hugo. It’s a fork of the hugo-theme-even and made a lot of changes.

Demo | 中文说明

This theme focuses on improving reading experience.

Other Key features:

Responsive and mobile friendly
Multilingual Mode support
Shortcodes : image, blockquote, music, etc.
Separate design for Tags & Categories Page
Social network linking
Better Pagination, TOC, footnote behavior
Use the awesome Chroma syntax highlighting
Custom css, Custom js, Custom head support
Sub menu support
Search Optimization

Who use Hugo-theme-Jane

Jack Baty’s Blog - Thousands of posts on the site powered by Hugo & Theme Jane.
虞双齐爱折腾 - @ysqi 个人技术博客.
제이든의 프로그래밍 이야기 - Personal Programming blog in Korean by @jayden-lee
and many more…

Are you using hugo-theme-jane? Add your site to the list!

Quick Start

Note: This tutorial assumes that you use Hugo for the first time . Hugo is one of the most popular open-source static site generators. You can check the Hugo Official Docs for more help.

1. Quick Install Hugo

Download the appropriate version for your platform from Hugo Releases. Once downloaded, the binary can be run from anywhere. Ideally, you should install it somewhere in your PATH for easy use. /usr/local/bin is the most probable location.

2. Quick Create a New Site

hugo new site myBlog

The above will create a new Hugo site in a folder named myBlog.

3. Quick Use Hugo-Theme-Jane

Clone this repository into themes folder:

cd myBlog
git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane

Copy the example site content:

cp -r themes/jane/exampleSite/content ./

Copy the default site config:

cp themes/jane/exampleSite/config.toml ./

Take a look at the example site:

hugo server

Open http://localhost:1313/ , you will see the example site.

4. Start Blog

The default config file config.toml in your site root directory. Customize it.

The default content files in the ./content/post directory.

5. Generate Your Website

Run hugo , this generates your website to the public/ directory by default.

Nice work!

If you have extra time or want to know more about Hugo , check out the awosome Hugo Official Docs .

Site Configuration

Take a look in the exampleSite folder.

This directory contains an example config file and the content for the demo. It serves as an example setup for your documentation.

Copy the config.toml in the root directory of your website. Overwrite the existing config file if necessary.

Single Post Configuration

Front Matter : Hugo allows you to add front matter in yaml, toml, or json to your content files.

YAML Example:

---
# Common-Defined
title: "An Example Post"
date: 2018-01-01T16:01:23+08:00
lastmod: 2018-01-02T16:01:23+08:00
draft: false
tags: ["tag-1", "tag-2", "tag-3"]
categories: ["index"]
author: "xianmin"

# User-Defined
# You can close(false) or open(true) something for this content.
# P.S. comment can only be closed
comment: false
toc: false
# You can also define another contentCopyright
contentCopyright: '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
reward: false
mathjax: true
---

Multilingual (Language) Support

Hugo-Theme-Jane supports the creation of websites with multiple languages side by side.

You should define the available languages in a languages section in your site configuration.

Translations are collected from the i18n/ folder.

To use the translations:

# use Chinese translation
defaultContentLanguage = "zh-cn"  # Default language to use (if you setup multilingual support)
[Languages.zh-cn]
  languageCode = "zh-cn"

To use the Multilingual Mode, see Multilingual Mode | Hugo .