hugo-PolyRhythmic

A (mostly) CSS implementation of Material Design 3, as a Hugo theme. Read more at https://wonyoungjang.org/hugo-polyrhythmic/

MIT License

Stars
11
Committers
1

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 name
hugo new site YourSite --format yaml
  1. 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.yaml
      module:
          imports:
          - path: github.com/wonyoung-jang/hugo-PolyRhythmic
      
      # module.yaml
      imports:
          - path: github.com/wonyoung-jang/hugo-PolyRhythmic
      
  1. 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

Package Rankings
Top 6.5% on Proxy.golang.org
Badges
Extracted from project README
Minimum Hugo Version GitHub