Fork of hugo-PapermodX for my own purposes
Go to file
Reorx d1672652f2 fix non chroma code block color 2022-05-05 00:45:08 +08:00
.github fix ci path 2022-04-22 14:23:27 +08:00
.vscode subtle changes 2022-04-14 16:28:27 +08:00
assets fix non chroma code block color 2022-05-05 00:45:08 +08:00
data enhance responsive style 2022-04-21 23:26:08 +08:00
exampleSite change exampleSite theme name 2022-04-22 14:16:26 +08:00
i18n add comments i18n 2022-04-22 00:38:30 +08:00
images images: update 2020-09-25 13:35:31 +05:30
layouts add DisableLanguageSwitch 2022-05-05 00:35:21 +08:00
LICENSE update LICENSE for 2021 2021-01-08 23:37:28 +05:30
Makefile use hugo's builtin Chroma for code highlight 2022-04-15 00:55:41 +08:00
README.md use hugo's builtin Chroma for code highlight 2022-04-15 00:55:41 +08:00
go.mod chore: add go.mod (#51) 2020-10-21 10:36:44 +05:30
theme.toml Bump minimum Hugo version to `0.83.0` 2021-10-22 20:01:02 +05:30

README.md

PaperModX

PaperModX is a forked version of PaperMod, it aims at adding new features and improving code quality, makes it easier to read and modify by anyone with basic knowledge of Hugo and HTML.

Features and changes:

  • Table of Contents (ToC) floating on the side
  • InstantClick integration
  • Social icons from Simple Icons
  • Opinionated UI enhancements

Table of Contents (ToC) floating on the side

By adding config:

params:
  TocSide: 'left'  # or 'right'

ToC will float on the left/right side of the page. You can take a look at how 'right' feels like in Installation | Update.

The ToC box is responsive, it only shows on the side when minimum screen size is 1440px.

This feature is enabled on this site.

InstantClick integration

By adding config:

params:
  EnableInstantClick: true

InstantClick will be enabled, making navigation behaves like Single Page Application.

Note that /search pages are omitted from InstantClick to prevent conflicts from search's JavaScript, this may be changed in the future after refactoring those scripts.

Another thing to notice is smooth scrolling will be disabled if InstantClick is enabled, because they both listen click event on every <a> tags. IMO smooth scrolling is not very useful so it has to give way to InstantCllick.

This feature is enabled on this site.

Though PaperModX is designed to be minimal, accent color is still essential. It's a good way to show personality and make your site feels more delightful.

The default color is a purple vibe, you can customize the colors of link, link underline and their hover variants by override the following css variables in assets/css/extended/custom.css of your site.

:root {
  --link-color: var(--primary);
  --link-hover-color: #573eaa;
  --link-underline-shadow: 0 1px 0 var(--link-color);
  --link-hover-underline-color: #573eaa;
  --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
}

Customize pagniator size

In section pages, if you want the paginator size be different from the global config, you can add paginate in the frontmatter to customize.

---
paginate: 10
---

You can add external: true to a menu item's params to mark it as an external link, this will add a small icon to the end, and make the link open in new tab when clicked.

menu:
  main:
    - name: "@Author"
      url: "https://reorx.com"
      params:
        external: true

Highlight code with Chroma, no bullshit

PaperMod uses highlight.js to highlight code blocks. In PaperModX, we use Chroma which is the recommended way in Hugo's official docs, thus changing theme is easily supported.

By default the themes are github for light and dracula for dark, you can change it by adding chroma-light.css and chroma-dark.css in site's assets/css/lib directory.

Social icons from Simple Icons

Add social icons with -simple suffix from Simple Icons.

Available icons:

  • github-simple
  • rss-simple
  • telegram-simple
  • twitter-simple
  • pinboard-simple

The icons are moved from layouts/partials/svg.html to data/svg.toml, makes it easier to maintain, it's now possible to have an index page to show all the icons, check it out at: Icons Preview

Opinionated UI enhancements

  • Distinguish home page width and post page width, post page is wider (800px) for better readability, you can change it by --post-width in theme-vars.css.
  • Menu links are always bold, this feels more consistent when clicking around. Active links have deeper color.