hugo PolyRhythmic

Hugo PolyRhythmic | Live Demo

Fast | Responsive | Material Design 3

❗This theme is still very much in development. Please use with caution.

PolyRhythmic is on: Hugo Themes | GitHub | Product Hunt

 

 

Key Features

• Active menu location indicator

• Archive support

• Asset management: pipeline, fingerprint, bundle, and minify Hugo assets

• Back-to-top button

• Backlinks and related page suggestions

• Code copy button

• Contact template: quick contact form

• Cover images for individual pages 

• Custom tabbed navigation

• Debug mode for development

• GitHub repository buttons for pages

• Home page navigation buttons

• Keyboard shortcuts and access keys

• Light/dark theme toggle

• Logseq graphs as a Single Page Application (SPA)

• Multiple author support

• "Now" page table: list of recently updated pages

• Page navigation cards

• Random page button

• Responsive sticky table of contents

• Search functionality with Fuse.js

• SEO optimization

• Sitemap template: table with Hugo-specific columns

• Social media share buttons

• Taxonomies and sections organization

• Theme customization: control color, contrast, shape, typography, and more

Key Differences from Material 3

• Adjustable content text width, font size, and line height

• Control over brand, plain, and mono typefaces

• Direction control for tertiary color

• Mono typeface addition

• No use of scripting for state layers

• Option to dim images in dark mode

• Shape scale control

---

Install

1. Install Hugo: Hugo Docs's - Quick Start

2. Create a new Hugo site

# replace YourSite with your website's namehugo new site YourSite --format yaml

3. Add PolyRhythmic to your YourSite/themes/ directory

• Option 1: Clone git repository:

  git clone https://github.com/wonyoung-jang/hugo-PolyRhythmic themes/PolyRhythmic --depth=1

• Option 2: Download and unzip:

• Download the PolyRhythmic source and extract the zip in your YourSite/themes/PolyRhythmic directory

• Option 3: Use Hugo Modules

• Install Go

• Intialize your own hugo module:

  hugo mod init YOUR_GIT_REPO

• Add PolyRhythmic in your config.yaml or module.yaml

  # config.yamlmodule:    imports:
      - path: github.com/wonyoung-jang/hugo-PolyRhythmic# module.yamlimports:
      - path: github.com/wonyoung-jang/hugo-PolyRhythmic

4. In your config.yaml add:

theme: ["PolyRhythmic"]

---

Support

• Star, share, and use this repository on GitHub

• If you would like to sponsor me, you can through Github Sponsors

• You may also donate on Ko-Fi

---

Thanks

• Fuse.js

• Material Symbols

• Material Design 3

• Google Fonts