search

nikldev0 / hugo-utilitybelt

A theme consisting of partials that can be added as a theme component for any Hugo site
MIT License
19 stars 7 forks source link
hugo hugo-theme-component

readme

hugo-utilitybelt

A theme consisting of partials and shortcodes that can be added as a theme component for any Hugo site. This leverages the theme composition functionality added in Hugo v0.42.

Wanna report a bug or suggest a feature? Great stuff! For more information on how to contribute check out our contributing guide.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project project you agree to abide by its terms.

Usage

  1. Add the hugo-utilitybelt as a submodule to be able to get upstream changes later git submodule add https://github.com/lockedatapublished/hugo-utilitybelt.git themes/hugo-utilitybelt
  2. Add hugo-utilitybelt as a theme in your config.toml theme = ["hugo-itsalocke", "hugo-utilitybelt"]
  3. In your custom theme or site, reference utilitybelt partials in the normal way.

Core contents

Partial Description
use_bootstrap4.html Contains the CSS, javascript, and meta tags ideal for including bootstrap 4 (4.1.1 currently) in the <head/> tag of your site. This uses async loading of the scripts.
use_jquery3.html Calls the minified full jquery 3.3.1 from the CDN. This uses async loading of the scripts.
use_fontawesome5.html Incorporates fontawesome 5 (5.4.1 currently) into your site.
use_fontawesome5pro.html Incorporates fontawesome 5 (5.4.1 currently) Pro into your site. Won't work unless you've whitelisted your site with fontawesome.
use_staticman.html Provides comments. You will need to include in params staticman_url which contains the POST url e.g. https://api.staticman.net/v2/entry/eduardoboucas/staticman/gh-pages/comments and staticman_debug
use_hugo-search-index.html Produces a search box and returns a result if you've implemented the hugo-search-index project. This doesn't do any of the search index generation etc
use_fullcontentrss.xml Returns all the content in an RSS feed

Shortcodes content

Shortcode Description
eventbrite.html The Eventbrite shortcode allows you to embed the ticket sales page into your hugo site using the event id.
fullcalendar_gcal.html The Fullcalendar shortcode allows you to embed google calendar page into your hugo site using google calendar API key.
netlify_basiccontact.html The Netlify shortcode allows you to embed basic contact form into your hugo site.
sitemap.html The Sitemap shortcode allows you to embed simple sitemap into your hugo site.

Staticman

Here are the instructions for using the staticman comments system in your theme / site.

  1. Add hugo-utilitybelt to your list of themes in config.toml e.g. theme= ["hugo-utiliybelt","hugo-itsalocke"]
  2. Per the staticman docs add staticman to your Hugo github repo as a collaborator
    • This enables staticman to contribute pull requests, you can alternatively create your own hosted version of staticman if you don't want to use an external dependency
  3. Add a staticman.yml file to your site
  4. Add style functionality to your theme / site by using use_staticman_head.html in your <head></head> e.g. {{ partial "use_staticman_head.html" . }}
  5. Customise comments CSS by adding a CSS file at static/css/comments.css
  6. Include the use_staticman.html partial in your layouts that you wish to have comments available on.

Snipcart

See original article at https://forestry.io/blog/snipcart-brings-ecommerce-static-site/

Eventbrite

The Eventbrite shortcode allows you to embed the ticket sales page into your hugo site using the event id.

At present, only the ticket page is supported, however support for the button is on the way.

  1. Add hugo-utilitybelt to your list of themes in config.toml e.g. theme= ["hugo-utiliybelt","hugo-itsalocke"]
  2. Insert the shortcode into the page you want to sell the tickets from and set the event id e.g {{< eventbrite event_id="0123456789" >}}
  3. Publish your page, the Eventbrite details should be listed and people can order directly from your website.