hugo-theme-meme

MemE is a powerful and highly customizable GoHugo blog theme.

MemE focus on elegance, code correctness, minimalist theme and simplicity.

View Demo View Github

Features

  • InstantClick
  • Dark Mode
  • PWA
  • JSON-LD
  • Multilingual
  • Atom / RSS
  • TOC
  • Drop Cap & Small Cap
  • KaTeX
  • Google Analytics
  • Disqus
  • ...

Lighthouse Report

lighthouse-report.png

You can check this report online or test again by yourself.

Details

Home page layout

For home page layout, MemE has three different kinds: posts, poetry, footage.

  1. Posts, live demo: https://meme-test.netlify.com
  2. Poetry, live demo: https://io-oi.me
  3. Footage, live demo: https://yixiuer.me

Good for lazy bloggers

MemE has some special features for lazy bloggers. Such as:

  1. Auto detect images for JSON-LD and Open Graph
  2. Use posts’ taxonomies — such as categories and tags — or sections as keywords
  3. Use GitHub flavored code fences instead of highlight shortcode for Syntax Highlighting
  4. Use images’ title for caption instead of shortcode
  5. Insert videos like images in Markdown
  6. Use Hugo’s default Markdown engine for mathematical notation rendering instead of Mmark
  7. ...

Typography

MemE is highly customizable in typography. You can customize font family, font size, line height, and even content width by yourself.

MemE has Drop Cap & Small Cap features. You can set drop cap or enable drop cap after every horizontal rule tag (<hr />) — behaved like The New Yorker — for your posts. You can also set Small Cap for your posts’ headings.

Moreover, MemE has two different paragraph style: margin and indent. You would get a paragraph style like a book if you set paragraph style to indent. Also, MemE has a special layout for poetry.

For Chinese users, MemE has a new Markdown syntax to render emphasis point. How to use it? ..文字... Of course, you can set enableEmphasisPoint to false if you don't use it.

Another special feature for Chinese users is glyph correction. It’s very useful if you set English fonts before Chinese fonts, which makes some Chinese punctuation glyphs incorrect.

Documentation

This theme’s documentation is still under development, you can watch MemE if you are interested.

Installation

https://gohugo.io/getting-started/quick-start/

Hugo

For Arch Linux users:

~ $ sudo pacman -S hugo
~ $ hugo new site blog

For users of other systems, see: https://gohugo.io/getting-started/installing/

MemE

~ $ cd blog
~/blog $ git init
~/blog $ git submodule add https://github.com/reuixiy/hugo-theme-meme.git themes/meme

How to update MemE to the latest version?

~/blog $ git submodule update --rebase --remote

Blogging

First, replace config.toml with demo site’s config.toml.

Second, add some files to content directory or just copy demo site’s content.

Now:

~/blog $ hugo server -D

Configuration

Basic

See config.toml.

Service Worker

MemE uses Workbox (via workbox-build & gulp) to generate sw.js, see: https://github.com/reuixiy/meme-test

Supported Front Matter

Name Description Note
title * string
linkTitle * string
subtitle displayed below the title string, Markdown supported, theme only
date * string
lastmod * string
publishDate * string
expiryDate * string
<taxonomies> eg: categories, tags, series * array
description * string, Markdown supported
summary * string, Markdown supported
keywords * array
images * array
slug * string
url * string
draft * boolean
isCJKLanguage * boolean
weight * integer
type * string, if equal to "poetry", will use a special layout for it
layout * string
outputs * array
aliases * array
markup * string
meta set false to disable post-meta boolean, theme only
toc display TOC boolean, overwrite enableTOC in config.toml, theme only
displayCopyright display post-copyright boolean, overwrite displayPostCopyright in config.toml, theme only
badge display updated-badge boolean, overwrite displayUpdatedBadge in config.toml, theme only
gitinfo display post-gitinfo boolean, overwrite displayPostGitInfo in config.toml, theme only
related display related-posts boolean, overwrite displayRelatedPosts in config.toml, theme only
katex add KaTeX support boolean, overwrite enableKaTeX in config.toml, theme only
comments set false to disable comments in postSections or set true to enable comments in non-postSections boolean, theme only
original original? You can add the following 9 terms if you set false. The author is required, other optional boolean, overwrite original in config.toml, theme only
author author of original post string, theme only
link link of original post string, URL, theme only
copyright license of the post string, Markdown supported, theme only
website author’s website string, theme only
email author’s email string, theme only
motto author’s description string, Markdown supported, theme only
avatar author’s avatar string, URL, theme only
twitter author’s twitter id string, theme only
facebook author’s facebook id string, theme only
darkImage dark image? boolean, overwrite darkImage in config.toml, theme only
smallCap small cap? boolean, overwrite enableSmallCap in config.toml, theme only
dropCap drop cap? boolean, overwrite enableDropCap in config.toml, theme only
dropCapAfterHr drop cap after every horizontal rule tag? boolean, overwrite enableDropCapAfterHr in config.toml, theme only
deleteHrBeforeDropCap delete horizontal rule tag before drop cap? boolean, overwrite deleteHrBeforeDropCap in config.toml, theme only
indent indent instead of margin? boolean, overwrite paragraphStyle in config.toml, theme only
align normal, justify, center srting, if euqal to "normal", will overwrite enableJustify in config.toml, theme only
disqus_url * string
disqus_identifier * string
disqus_title * string

*: see https://gohugo.io/content-management/front-matter/

More

I will write an easy-to-understand tutorial about how to migrate from Hexo to Hugo and the differences between them.

GitHub