User Guide on Scientific Python Hugo Theme documentation

Features

Mon, 01 Jan 0001 00:00:00 +0000

Hugo Layouts#

_default/single.html : Single page layout
_default/section.html : Section layout (a section typically has _index.md and contains other pages)

Blog post layouts:

layouts/partials/posts/post.html: Blog post layout
layouts/partials/posts/list.html: Blog post listing layout
layouts/partials/posts/tag.html: Tag page layout
layers/partials/posts/comments.html: Empty by default; can be overridden to place a comments section

Add custom HTML header content#

layouts/partials/head.html

Shortcut list#

The depths of the shortcut list on the left of each post can be controlled by setting the shortcutDepth parameter in the post preamble. It defaults to 2.

Get Started

Mon, 01 Jan 0001 00:00:00 +0000

The Scientific Python Hugo Theme is a theme for the Hugo static site generator, inspired by the PyData Sphinx Theme.

To use this theme on your site, follow these instructions:

Dependencies#

Install Hugo. Either the standard or extended editions of Hugo will work.

Verify that hugo is on your PATH:

$ hugo version
hugo v0.120.3-a4892a07b41b7b3f1f143140ee4ec0a9a5cf3970 linux/amd64 BuildDate=2023-11-01T17:57:00Z VendorInfo=gohugoio

Install Dart Sass.

You can also install Hugo as a snap, which includes Dart Sass.

Theme variables and CSS

Mon, 01 Jan 0001 00:00:00 +0000

This section covers a few ways that you can control the look and feel of your theme via your own CSS and theme variables.

Custom CSS stylesheets#

Custom styles should be added to /assets/css/my_css.css (where my_css can be any name, other than those already in the theme).

CSS theme variables#

Fonts#

To override the fonts used, add a custom CSS file and set the following variables:

Web Design Components

Mon, 01 Jan 0001 00:00:00 +0000

The PyData Sphinx Theme uses sphinx-design to add several UI components and provide extra flexibility for content creation. These include badges, buttons, cards, and tabs, among other components. This theme provides custom CSS to ensure that sphinx-design elements look and feel consistent with this theme.

Seealso

For more information about how to use these extensions, see the sphinx-design documentation.

Below you can find some examples of the components created with the sphinx-design extension.