Home on Hugolify

Netlify

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

Available

Form: Netlify form
Auth: Netlify identify

Documentation

A complete documentation of how to host is available on Hugo website.

See documentation

Website

Learn more about the host and sign up.

www.netlify.com

Prerequisites

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

Git

https://git-scm.com/

Go

https://go.dev/

Hugo

Minimum version 0.141

Example in macOS with brew

brew install hugo

Check full documentation

Setup

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

Install

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-admin

CMS params

/config/_default/params.yaml

# Default params
admin:

 cms: decapcms # optional, decapcms by default, list: https://www.hugolify.io/docs/cms/admin/cms/
 branch: main # optional, default "main"
 git: git-gateway # optional, default "git-gateway" but not supported for Sveltia CMS
 repo: # optional, e.g "hugolify/hugolify-template"

 config:
 id: false # use ID for dir/name files and relation
 nested:
 depth: 2 # optional, set minimum 2, not supported for Sveltia CMS
 preview: false
 publish_mode: simple # optional, default "simple"

 # Auth
 auth:
 app_id: # The Client ID provided by Gitea/GitLab
 api_root: # API URL of your Gitea/GitLab instance
 auth_endpoint: # Auth endpoint of your Gitea/GitLab instance
 base_url: # Root URL of your Gitea/GitLab instance
 netlify_identity: true # Add Netlify identity

 # Languages
 i18n:
 default_locale: en # master lang for an i18n website 
 locales: false # "[en,fr]" for an i18n website

 # Assets
 media:
 media_folder: 'assets/images/uploads'
 public_folder: '/images/uploads'
 audio_max_file_size: 700000 # 700ko
 max_file_size: 700000 # 700ko
 pdf_max_file_size: 5000000 # 5Mo
 specific_filter: false # set true to add a selected filter by image
 video_max_file_size: 5000000 # 5Mo

 # Optional cloud settings [start], not supported for Sveltia CMS
 cloud:
 name: cloudinary # or uploadcare
 cloud_name: # your cloudinary cloud name
 api_key: # your cloudinary api key
 publicKey: # your uploadcare public api key
 # Optional cloud settings [end]

 providers: # for sveltia-cms

CMS language

/config/_default/hugo.yaml

Theme 1

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

Demo

Explore demo

Preview homepage

Setup

Import module

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-1
 - path: github.com/hugolify/hugolify-theme # Core theme

Custom main.sass?

Import sass

/assets/sass/main.sass

// Core Theme
@import "hugolify-theme"

// Theme
@import "hugolify-theme-1"

// Site
@import "site"

Repository

Hugolify theme 1

Collections

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

Collections are automatically added based on Hugolify modules added (Sections) or (Taxonomies)

Enable or disable collections

/config/_default/params.yaml

admin:
 collections:
 indexes:
 enable: true
 pages:
 enable: true
 # e.g. set to false to disable posts even if you load hugolify-theme-posts
 posts:
 enable: false
 # …

Enable or disable file creation

/config/_default/params.yaml

admin:
 collections:
 pages:
 create: false

Override fields avalaible for a collection

/config/_default/params.yaml

admin:
 collections:
 pages:
 fields:
 - is_draft
 - title_page
 - description
 - featured_image
 - body

Add filter

/config/_default/params.yaml

Decap CMS

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

Archived repository

Warning

Now, you need to use Hugolify-admin with Decap CMS.
Check the setup here.

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-decap-cms

Configuration

Only if you want customize your Hugolify Admin you can create some settings files.

Collections

Create a available-collections.js file in your settings directory.

/static/admin/app/settings

Example to have only Posts and Taxonomies (Categories and Tags)

import posts from "../content/posts.js";
import categories from "../content/categories.js";
import tags from "../content/tags.js";

export default [posts, categories, tags];

Blocks

Create a available-blocks.js file in your settings directory.

Install

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

Use Github template

Go to our Github template repository and click to use this template button then create a new repository.

Hugolify template on Github

Use Github template

Create a new repository

Create a new repository on Github

Theme 2

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

Demo

Explore demo

Preview homepage

Setup

Import module

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-2
 - path: github.com/hugolify/hugolify-theme # Core theme

Custom main.sass?

Import sass

/assets/sass/main.sass

// Core Theme
@import "hugolify-theme"

// Theme
@import "hugolify-theme-2"

// Site
@import "site"

Repository

Hugolify theme 2

Blocks

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

Add or remove blocks

/config/_default/params.yaml

All blocks are available by default but if you want hide or add your blocks, you can do it:

params:
 admin:
 blocks:
 # Array of available blocks
 enable:
 - alert
 - cta
 - editorial
 # …

Add or remove fields in blocks

/config/_default/params.yaml

params:
 admin:
 blocks:
 # Array of available fields for a block
 # e.g with paragraph block
 paragraph:
 fields:
 - title
 - text_markdown
 # …

See Hugolify fields in repository

Create a block

Create file

Add a yml block file in blocks directory.

Commands

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

Launch

To launch Hugo project with livereload, available here: http://localhost:1313/

yarn watch

To launch Netlify/Decap CMS in localhost (in a second terminal), available here: http://localhost:1313/admin/

yarn cms

Build

To build the project

yarn build

Update

Modules of your project

yarn update

Hugolify template

git remote add template git@github.com:hugolify/hugolify-template.git
git fetch --all
git merge template/main --allow-unrelated-histories

Clean

To clean modules of your project

yarn clean

Netlify CMS

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

Archived repository

Warning

Now, you need to use Hugolify-admin with Netlify CMS.
Check the setup here.

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-netlify-cms

Documentation

https://github.com/netlify/netlify-cms-legacy Deprecated CMS

Module

Hugolify Netlify CMS Archived repository

Theme 3

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

Demo

Explore demo

Preview homepage

Setup

Import module

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-3
 - path: github.com/hugolify/hugolify-theme # Core theme

Custom main.sass?

Import sass

/assets/sass/main.sass

// Core Theme
@import "hugolify-theme"

// Theme
@import "hugolify-theme-3"

// Site
@import "site"

Repository

Hugolify theme 3

Fields

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

How to create a field

Create file

Add a yml field file in fields directory.

layouts/
└── partials/
 └── admin/
 └── fields/

{
 label: '',
 name: '',
 widget: '',
 required: false,
 i18n: true 
}

{{- $fields := slice 
 "title" 
 "text" 
 "image" -}}
# This line allows you to modify the fields via the parameters
{{- $fields = partial "admin/func/get_fields.html" (dict "block" . "fields" $fields) -}}
{
 label: '',
 name: '',
 widget: 'object',
 required: false,
 i18n: true,
 collapsed: true,
 {{ partial "admin/fields/_fields.yml" $fields }}
}

Use our relation field partial .

Setup

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

Modules

Edit config file

/config/_default/module.yaml

Required modules

imports:

# Core theme required
- path: github.com/hugolify/hugolify-theme

# CMS
- path: github.com/hugolify/hugolify-admin

Add modules

Adds modules according to your needs.

Example 1

In this example, I have a website with a blog and portfolio to show my projects.

imports:

# Content
- path: github.com/hugolify/hugolify-theme-projects
- path: github.com/hugolify/hugolify-theme-posts-categories
- path: github.com/hugolify/hugolify-theme-posts

# Core theme required
- path: github.com/hugolify/hugolify-theme

# CMS
- path: github.com/hugolify/hugolify-admin

Example 2

In this example, I have a website for to propose services and I would like to show my press publications.

Sveltia CMS

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

Archived repository

Warning

Now, you need to use Hugolify-admin with Sveltia CMS.
Check the setup here.

Sveltia CMS is a Git-based lightweight headless CMS under active development as a modern, quick replacement for Decap CMS. Hugolify Sveltia CMS is a Hugolify Decap CMS based.

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-sveltia-cms

Documentation

https://github.com/sveltia/sveltia-cms

Not supported featured

Module

Hugolify Sveltia CMS Deprecated repository

Theme 4

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

Demo

Explore demo

Preview homepage

Setup

Import module

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-4
 - path: github.com/hugolify/hugolify-theme # Core theme

Custom main.sass?

Import sass

/assets/sass/main.sass

// Core Theme
@import "hugolify-theme"

// Theme
@import "hugolify-theme-4"

// Site
@import "site"

Repository

Hugolify theme 4

Modules

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

These Hugo modules allow you to structure the data correctly to have a dedicated CMS and a display corresponding to the type of content.

Sections

Case studies: hugolify-theme-casestudies
Docs: hugolify-theme-docs
Events: hugolify-theme-events
Expertises: hugolify-theme-expertises
Jobs: hugolify-theme-jobs
Pages: in core theme
Persons: hugolify-theme-persons
Places: hugolify-theme-places
Posts: hugolify-theme-posts
Products: hugolify-theme-products
Projects: hugolify-theme-projects
Publications: hugolify-theme-publications
Real estates: hugolify-theme-realestates
Services: hugolify-theme-services

Taxonomies

Authors (posts): hugolify-theme-posts-authors
Categories (posts): hugolify-theme-posts-categories
Categories (products): hugolify-theme-products-categories
Categories (publications): hugolify-theme-publications-categories
Categories (realestates): hugolify-theme-realestates-categories
Categories (services): hugolify-theme-services-categories
Expertises (persons): hugolify-theme-persons-expertises
Persons (expertises): hugolify-theme-expertises-persons
Persons (publications): hugolify-theme-publications-persons
Persons (realestates): hugolify-theme-realestates-persons
Persons (services): hugolify-theme-services-persons
Places (persons): hugolify-theme-persons-places
Sellers (realestates): hugolify-theme-realestates-sellers
Statutes (persons): hugolify-theme-persons-statutes
Tags (posts): hugolify-theme-posts-tags
Tags (projects): hugolify-theme-projects-tags
Types (projects): hugolify-theme-projects-types

How to use

Check setup page to how to use them.

PurgeCSS

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

Setup

/config/default/hugo.yaml

build:
 buildStats:
 disableClasses: false
 disableIDs: true
 disableTags: false
 enable: true

/postcss.config.js

module.exports = {
 plugins: {
 autoprefixer: {},
 cssnano: {
 preset: "default",
 },
 "@fullhuman/postcss-purgecss": {
 mode: "all",
 content: ["./hugo_stats.json"],
 dynamicAttributes: ["aria-current", "aria-hidden", "role", "type"],
 safelist: {
 standard: [
 "show",
 "showing",
 "hide",
 "fade",
 /-backdrop$/,
 /^is-/,
 /^splide_/, // if your need carousel
 ],
 },
 defaultExtractor: (content) => {
 let els = JSON.parse(content).htmlElements;
 els = els.tags.concat(els.classes);
 return els;
 },
 },
 },
};

Documentations

Shortcodes

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

Available for Decap CMS and Netlify CMS

Add or remove shortcodes

/config/_default/params.yaml

All shortcodes are available by default but if you want hide or add your shortcodes, you can do it:

params:
 admin:
 shortcodes:
 # Array of available shortcodes
 enable:
 - alert
 - badge
 - blank_link
 - blockquote
 - button
 - details
 - map
 - twitter
 - youtube

Disable shortcodes

/config/_default/params.yaml

params:
 admin:
 shortcodes:
 enable: false

Create a shortcodes

Create file

Add a js shortcode file in shortcodes directory.

Theme 5

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

Demo

Explore demo

Preview homepage

Setup

Import module

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-5
 - path: github.com/hugolify/hugolify-theme # Core theme

Custom main.sass?

Import sass

/assets/sass/main.sass

// Core Theme
@import "hugolify-theme"

// Theme
@import "hugolify-theme-5"

// Site
@import "site"

Repository

Hugolify theme 5

Cloud

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

Services available

These services are supported for seamless media management and optimization in cloud-based applications.

Setup

Hugolify Admin

/config/_default/params.yaml

admin:
 media:
 cloud: # object (Sveltia CMS accept an array)

Cloudinary

/config/_default/params.yaml

admin:
 media:
 cloud:
 name: cloudinary
 cloud_name: # write your cloudinary cloud name
 api_key: # write your cloudinary api key

Uploadcare

/config/_default/params.yaml

admin:
 media:
 cloud:
 name: uploadcare
 public_key: # write your uploadcare public api key
 tabs: "['file', 'url', 'gdrive']" # optional

Cookie banner

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

Setup

/config/default/params.yaml

cookie_banner:
 enable: false # Enable Cookie banner
 cookieconsent:
 enable: false # Use CookieConsent
 analytics: false
 functionality: false
 marketing: false
 disablePageInteraction: false
 consentModal:
 layout: box
 position: bottom left
 preferencesModal:
 layout: box
 position: bottom left

Documentation

A complete documentation of how to use CookieConsent.

See documentation

Form

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

Setup

/config/default/params.yaml

form:
 netlify: true # Set false to disable Netlify forms
 action: false # Replace by URL from formspree, fabform, kwes…

Services available

Search

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

Setup

Params

/config/default/params.yaml

search:
 enable: false # Set true to enable search
 layout: raw # Also modal or offcanvas
 filter: false # Set true to add filters by type
 sort: false

Command

Use specific command to build and index

yarn build:search

PostCSS

safelist: {
 deep: [/^pagefind-ui/]
}

Documentation

A complete documentation of how to use Pagefind.

See documentation

Best practices

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

Bootstrap

Bootstrap in version 5.3 is used to support the theme.

To lighten and make the code more semantic and readable, as well as to facilitate site customizations, @extend of class are preferred.

Example

Original bootstrap DOM

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
 <div class="col">
 <div class="card"></div>
 </div>
</div>

Hugolify DOM for posts grid

<div class="posts">
 <div>
 <article class="post"></article>
 </div>
</div>

Hugolify SASS for posts grid

Contributes

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

Mainteners

Publish a version

We use release-it to automate version publication.

You juste have to run npx release-it and hit Enter to publish a version. Then (if you have rights), publish version on Github by clicking on the link provided by release-it

Config:

create commit : true
push : true
create tag : true
publish on github : true
publish on npm : false

Address

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

Arguments

card Boolean
Set true to add card class

direction Boolean
Set true to add a direction link to Google Map

address Map
Object of address values

Usage

{{ partial "commons/address" $map }}

Example

Usage

{{ $address := (dict
 "street" "24 Rue de Commandant Guilbaud"
 "zipcode" "75016"
 "city" "Paris"
 "country" "France"
 ) }}
{{ $args := (dict
 "card" true
 "direction" true
 "address" $address
 ) }}
{{ partial "commons/address" $args }}

HTML rendered

<address class="address">
 <div>
 <p>24 Rue de Commandant Guilbaud</p>
 <p>75016 Paris</p>
 <p>France</p>
 <a class="direction" href="https://www.google.fr/maps/dir//24 Rue de Commandant Guilbaud 75016 Paris France" target="_blank" title="How to go? - external link">How to go?</a>
 </div>
</address>

Commons file — hugolify-theme

Alert

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

Frontmatter

blocks:
 - type: alert
 text: '' # string
 state: '' # [danger, dark, light, infos, success, warning]
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Alert

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

Example

Markdown usage

{{< alert text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus." state="danger" >}}

HTML rendered

<div class="alert alert-danger">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum
 facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non
 lacus.
 </p>
</div>

Visual renderer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.

Alert block

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

Example

Markdown usage

{{< alert-block title="Tempus vitae" state="danger" >}}
Lorem {{< blank_link link="https://www.hugolify.io" text="ipsum" >}} dolor sit amet, consectetur adipiscing elit.

* In condimentum facilisis gravida.
* Nam diam ipsum, tempus vitae [posuere](https://www.hugolify.io).
* mattis non lacus.
{{< /alert-block >}}

HTML rendered

<div class="alert alert-danger">
 <h4 class="alert-heading">Tempus vitae</h4>
 <p>Lorem <a href="https://www.hugolify.io" target="_blank">ipsum</a> dolor sit amet, consectetur adipiscing elit.</p>
 <ul>
 <li>In condimentum facilisis gravida.</li>
 <li>Nam diam ipsum, tempus vitae <a href="https://www.hugolify.io">posuere</a>.</li>
 <li>mattis non lacus.</li>
 </ul>
</div>

Visual renderer

Tempus vitae

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Audio

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

Frontmatter

blocks:
 - type: audio
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 audio: {}
 mp3: '' # url (optional)
 ogg: '' # url (optional)
 autoplay: false # boolean
 loop: false # boolean
 transcription: '' # string (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Badge

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

Example

Markdown usage

{{< badge text="Lorem ipsum" state="warning" >}}

HTML rendered

<span class="badge text-bg-warning">Lorem</span>

Visual renderer

Lorem ipsum

Datas

text: "" # string
state:
 [
 "danger",
 "dark",
 "info",
 "light",
 "primary",
 "secondary",
 "success",
 "warning",
 ] # select

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Blank link

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

Example

Markdown usage

{{< blank_link link="https://www.hugolify.io/" text="Link with target blank" >}}

HTML rendered

<a
 href="https://www.hugolify.io/"
 target="_blank"
 rel="noreferrer noopener"
 title="« Link with target blank » - external link"
 >Link with target blank</a
>

Visual renderer

Link with target blank

Datas

link: "" # string
text: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Blockquote

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

Example

Markdown usage

{{< blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus." title="John Doe" text="Founder" image="https://res.cloudinary.com/uncinq/image/upload/v1758205367/sebastien-moulene_ft0yg7.jpg" >}}

HTML rendered

<figure class="quote">
 <blockquote>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum
 facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non
 lacus.
 </p>
 </blockquote>
 <figcaption>
 <picture>
 <source srcset="…" type="image/webp" media="(min-width: 577px)" />
 <source
 srcset="…, … 2x, … 3x"
 type="image/webp"
 media="(max-width: 576px)"
 />
 <source
 srcset="…, … 2x, … 3x"
 type="image/jpg"
 media="(max-width: 576px)"
 />
 <img
 src="…"
 alt=""
 width="50"
 height="50"
 loading="lazy"
 decoding="async"
 />
 </picture>
 <div>
 <cite>John Doe</cite><br />
 Founder
 </div>
 </figcaption>
</figure>

Visual renderer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.

Button

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

Example

Markdown usage

{{< button text="This is a button" url="https://www.hugolify.io/" blank="true" >}}

HTML rendered

<a
 href="https://www.hugolify.io/"
 class="btn btn-primary"
 target="_blank"
 rel="noreferrer noopener"
 title="« This is a button » - external link"
 >This is a button</a
>

Visual renderer

This is a button

Datas

text: "" # string
url: "" # string
blank: false # boolean
class: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Not available

Call to action

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

Frontmatter usage

blocks:
 - type: cta
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 ctas: []
 text: '' # string
 url: '' # url
 blank: false # boolean (optional)
 lang: '' # code lang (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Carousel

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

Arguments

context Map
Page context

partial String
Partial to load to each slide

Usage

{{ partial "commons/carousel" $args }}

Example

A carousel of logos (block logos)

{{ $args := (dict
 "context" . 
 "partial" "blocks/templates/logos/logo.html" 
 ) }}
{{ partial "commons/carousel" $args }}

Case studies

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-casestudies
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Example

Demo visual renderer

Chart

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

Frontmatter

blocks:
 - type: chart
 heading: {}
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 grid: '' # [small, medium, large, container, full] (optional)
 chart: {}
 type: "" # string
 title: "" # string
 backgroundColor: "" # string (optional)
 borderColor: "" # string (optional)
 items: []
 label: "" # string
 value: "" # string
 color: "" # hexadecimal color (optional)
 data: # (optional)
 json: "" # text (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

Chart JS docs

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

CloudCannon

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

Not available in production Maintened CMS Compatibility WIP

Warning: Not supported features

i18n structure
Map Widget

Setup

Hugolify-admin

Enable CloudCannon

/config/_default/params.yaml

admin:
 cms: cloudcannon

Build config file

Build a cloudcannon.config.yml file with Hugo and NodeJS script. This file needs to be versioned.

yarn build:config:cloudcannon

Group collections

/config/_default/params.yaml

admin:
 collection_groups:
 - heading: Posts
 collections:
 - posts
 - posts_categories
 - posts_tags

Card preview collections

/config/_default/params.yaml

admin:
 collections:
 persons:
 card_preview:
 subtext:
 - key: persons_statutes
 - key: persons_expertises
 - key: description

Documentation

https://cloudcannon.com/documentation/

Cloudflare Pages

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

Not available

Form: Netlify form
Auth: Netlify identify

Use a specific Hugo version

higher of 0.141.0 and extended

Pages project > Settings > Variables and Secrets

HUGO_VERSION 0.146.4

Documentation

A complete documentation of how to host is available on Cloudflare website.

See documentation

Website

Learn more about the host and sign up.

www.cloudflare.com

CMS

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

See Hugolify Admin section

Comparison

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

Frontmatter

blocks:
 - type: comparison
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 column: '' # number, columns by row in desktop
 items: []
 title: '' # string (optional)
 text: '' # string (optional)
 offer:
 price: '' # float
 discount: '' # string (e.g. 10%)
 frequency: '' # string
 arguments: []
 icon: '' # string (bootstrap icon)
 text: '' # string
 cta: {} # (optional)
 text: '' # string
 url: '' # url
 blank: false # boolean (optional)
 lang: '' # code lang (optional)
 is_primary: false # boolean (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

CorrectPunctuation

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

Description

In french, we need a space before a double punctuation (:;?!), insecable space allows this punctuation not to be left alone on the line depending on the text, it will always be preceded by a word.

Usage

{{ partial "func/CorrectPunctuation" $string }}

Func file

CSS

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

Variables

Hugolify uses Bootstrap variables and Hugolify variables .

assets/
└── sass/
 └── abstract/
 ├── _variables.sass # bootstrap variables override for Hugolify
 ├── _variables-site.sass # specific for your website
 └── _variables.default.sass # Hugolify core variables, do not override it

Mixins

Hugolify uses Bootstrap mixins and Hugolify mixins .

assets/
└── sass/
 └── abstract/
 ├── _mixins.sass # specific for your website
 └── _mixins.default.sass # Hugolify core mixins, do not override it

File override

The sass files override is possible by keeping the same tree structure and allows to overwrite the style of the theme to replace it with a specific style.

CTA

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

Example

Usage

{{ $args := (dict
 "url" "https://www.hugolify.io/"
 "text" "Hugolify button"
 "blank" true
 ) }}
{{ partial "commons/cta" $args }}

HTML rendered

<a class="btn" href="https://www.hugolify.io/" target="_blank" rel="noreferrer noopener" title="Hugolify button - external link">Hugolify button</a>

Datas

url: "" // Button href
text: "" // Button text
blank: false // boolean, true to add target="_blank" (optional)
class: "" // Add additional class (optional)
title: "" // Add title attribute (optional)
hreflang: "" // Add hreflang attribute (optional)

Commons file — hugolify-theme

Dailymotion

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

Example

Markdown usage

{{< dailymotion 2656646242 >}}

HTML rendered

<iframe loading="lazy" src="https://geo.dailymotion.com/player.html?video=x9t0c4w" allowfullscreen></iframe>

Visual renderer

Datas

id: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Datas

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

Frontmatter

blocks:
 - type: datas
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 column: '' # number, columns by row in desktop
 show_gauge: false # boolean
 show_color: false # boolean
 items: []
 prefix: "" # string (optional)
 value: "" # number
 suffix: "" # string (optional)
 limit: 100 # number
 title: "" # string (optional)
 text: "" # string (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Date

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

Example

Usage

{{ $args := (dict
 "date" "2006-01-02T15:04:05Z07:00"
 ) }}
{{ partial "commons/date" $args }}

HTML rendered

<p class="date"><time datetime="2006-01-02T15:04:05Z07:00">Monday, February 2, 2006</time></p>

Datas

date: ""
format: "" // default is ":date_full" https://gohugo.io/functions/time/format/
itemprop: false // or https://schema.org/Date

Decap CMS

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

Available in production Maintened CMS

Warning: Not supported features

UUID widget

Setup

Hugolify-admin

Enable Decap CMS

/config/_default/params.yaml

admin:
 cms: decapcms

Icon library

Bootstrap Icons (via CSS)

Screenshot

Documentation

https://decapcms.org/docs/

Tutorials

Details

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

Example

Markdown usage

{{< details summary="This is a question" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.
{{< /details >}}

HTML rendered

<details>
 <summary>This is a question</summary>
 <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum
 facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non
 lacus.
 </div>
</details>

Visual renderer

This is a question

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.

Datas

name: "" # string
title: "" # string
summary: "" # string
contents: "" # markdown

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Docs

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-docs
 - path: github.com/hugolify/hugolify-theme

Params

/config/_default/params.yaml

docs:
 thumbnail:
 desktop: '38x38'
 desktop_large: '100x100'
 mobile: '38x38'
 scrollsnap: '38x38'

Files

HTML partials
SASS Files

CMS

Hugolify Admin Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Editorial

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

Frontmatter

blocks:
 - type: editorial
 direction: "" # [rtl, ltr]
 surtitle: "" # string (optional)
 title: "" # string (optional)
 text: "" # string (optional)
 notes: [] # (optional)
 text: # string (optional)
 ctas: [] # (optional)
 text: '' # string
 url: '' # url
 blank: false # boolean (optional)
 lang: '' # code lang (optional)
 image: {} # (optional)
 src: '' # url
 filter: '' # string (optional)
 alt: '' # string (optional)
 legend: '' # string (optional)
 credit: '' # markdown (optional)

Demo visual renderer

Params

/config/_default/params.yaml

Image size

Embed

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

Frontmatter

blocks:
 - type: embed
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 embed: "" # HTML
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Events

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

Beta

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-events
 - path: github.com/hugolify/hugolify-theme

Files

HTML partials
SASS Files

CMS

Hugolify Admin (Multiple CMS) Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Expertises

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Example

Demo visual renderer (on lawyerify in french)

FAQ

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

Frontmatter

blocks:
 - type: faq
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 items: []
 name: "" # string (optional)
 open: false # boolean (optional)
 summary: "" # string (optional)
 title: "" # string (optional)
 text: "" # string (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Favicons

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

Icons

/static/assets/images/favicons/

apple-touch-icon.png 180x180px
favicon-32x32.png 32x32px
favicon-16x16.png 16x16px
favicon.ico
favicon.png
favicon.svg
safari-pinned-tab.svg

Files

/static/

site.webmanifest

Figure

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

Frontmatter

blocks:
 - type: figure
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 figure: {}
 src: '' # url
 alt: '' # string
 legend: '' # string
 credit: '' # markdown
 linear: false # boolean, set true for linear filter compression
 screenshot: false # boolean, set true you want add fake browser around your picture (and linear filter compression)
 grid: '' # [small, medium, large, container, full] (optional)
 offset: '' # [start, end, center] (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Figure

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

Example 1

Markdown usage

{{< figure src="https://res.cloudinary.com/uncinq/image/upload/v1758204688/test_pfae0v.jpg" alt="" legend="Lorem ipsum" credit="Unsplash" >}}

HTML rendered

<figure>
 <picture>
 <source srcset="" type="image/webp" media="(min-width: 577px)" />
 <source srcset="" type="image/webp" media="(max-width: 576px)" />
 <source srcset="" type="image/jpg" media="(max-width: 576px)" />
 <img src="https://res.cloudinary.com/uncinq/image/upload/v1758204688/test_pfae0v.jpg" alt="" width="" loading="lazy" height="" decoding="async" />
 </picture>
 <figcaption>
 <p>Lorem ipsum</p>
 <p class="credit">Unsplash</p>
 </figcaption>
</figure>

Visual renderer

Lorem ipsum

Unsplash

Example 2

Markdown usage

{{< figure src="https://res.cloudinary.com/uncinq/image/upload/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png" alt="Screensot of Hugolify admin with Decap CMS" legend="Screenshot" screenshot="true" >}}

HTML rendered

<div class="screenshot">
 <span></span>
 <figure>
 <picture>
 <source srcset="" type="image/webp" media="(min-width: 577px)" />
 <source srcset="" type="image/webp" media="(max-width: 576px)" />
 <source srcset="" type="image/jpg" media="(max-width: 576px)" />
 <img src="https://res.cloudinary.com/uncinq/image/upload/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png" alt="Screensot of Hugolify admin with Decap CMS" width="" loading="lazy" height="" decoding="async" />
 </picture>
 <figcaption>
 <p>Screenshot</p>
 </figcaption>
 </figure>
</div>

Visual renderer

Screenshot

File

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

Example

Usage

{{ $args := (dict
 "file" "videos/example-file.mp4"
 ) }}
{{ partial "commons/file" $args }}

HTML rendered

<a href="videos/example-file.mp4" download class="file">
 <span>
 <b>Example file</b>
 <abbr>MP4</abbr>
 15<abbr title="Megabytes">MB</abbr>
 </span>
</a>

Datas

file: "" // path file (required)
title: "" // custom title 
download: false // add download attribute to link, default is true

Commons file — hugolify-theme

Form

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

Netlify hosting is required or use another default service

Frontmatter

blocks:
 - type: form
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 grid: '' # [small, medium, large, container, full] (optional)
 offset: '' # [start, end, center] (optional)
 name: '' # string
 submit: '' # string
 items: []
 label: '' # string
 type: '' # [email, select, tel, text, textarea]
 options: [] # if select
 title: '' # string
 value: '' # string
 required: false # boolean
 full: false # boolean
 autocomplete: '' # autocomplete value like postal-code, email…
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Gallery

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

Frontmatter

blocks:
 - type: gallery
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 column: '' # number, columns by row in desktop (optional)
 ratio: 1 # number, ratio of thumbnails format
 gallery: []
 src: '' # url
 filter: '' # string (optional)
 alt: '' # string (optional)
 legend: '' # string (optional)
 credit: '' # markdown (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

Tobii JS library

PostCSS

Add tobii class in deep safelist of postcss.config.js .

GetFileExtension

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

Usage

{{ partial "func/GetFileExtension" $file }}

Example

Usage

{{ partial "func/GetFileExtension" "filename.pdf" }}

HTML rendered

<abbr>PDF</abbr>

Func file

GetTaxonomyPageBySlug

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

Arguments

section String
Type of request pages

taxonomy String
Target taxonomy filter

slug String
The relation value to find (Slug or Title)

additionalParams (optional) String
Where expression additional

Usage

{{ partial "func/GetTaxonomyPageBySlug" $map }}

Example

In this example, we want all people with “Lorem ipsum” as expertise (persons_expertises).

{{- $pages := partial "func/GetTaxonomyPageBySlug" (dict 
 "section" "persons"
 "taxonomy" "persons_expertises"
 "slug" "lorem-ipsum") -}}

Func file

Github Pages

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

Not available

Form: Netlify form
Auth: Netlify identify

Documentation

A complete documentation of how to host is available on Hugo website.

See documentation

Github action

.github/workflows/hugo.yml

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugolify to Pages

on:
 # Runs on pushes targeting the default branch
 push:
 branches: ["main"]

 # Allows you to run this workflow manually from the Actions tab
 workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
 contents: read
 pages: write
 id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
 group: "pages"
 cancel-in-progress: false

# Default to bash
defaults:
 run:
 shell: bash

jobs:
 # Build job
 build:
 runs-on: ubuntu-latest
 env:
 HUGO_VERSION: 0.146.4
 steps:
 - name: Install Hugo CLI
 run: |
 wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
 && sudo dpkg -i ${{ runner.temp }}/hugo.deb
 - name: Install Dart Sass
 run: sudo snap install dart-sass
 - name: Checkout
 uses: actions/checkout@v4
 with:
 submodules: recursive
 - name: Setup Pages
 id: pages
 uses: actions/configure-pages@v5
 - name: Install Yarn
 run: npm install -g yarn
 - name: Install Node.js dependencies
 run: yarn install --frozen-lockfile || true
 - name: Build with Hugo
 env:
 HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
 HUGO_ENVIRONMENT: production
 run: |
 hugo \
 --minify \
 --baseURL "${{ steps.pages.outputs.base_url }}/"
 - name: Upload artifact
 uses: actions/upload-pages-artifact@v3
 with:
 path: ./public

 # Deployment job
 deploy:
 environment:
 name: github-pages
 url: ${{ steps.deployment.outputs.page_url }}
 runs-on: ubuntu-latest
 needs: build
 steps:
 - name: Deploy to GitHub Pages
 id: deployment
 uses: actions/deploy-pages@v4

Website

Learn more about the host and sign up.

HTML

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

The HTML files override is possible by keeping the same tree structure.

layouts/
└── partials/
 └── posts/
 └── item.html

Icons

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

Bootstrap icons

By default, Hugolify use Bootstrap icons .

/assets/sass/base/_icons.sass

@import "base/icons/bootstrap-icons/icons"

Optimise

For optimise automatically bootstrap icons font with icons used. This command will run a node script that parses the content and sass to determine useful icons.

yarn build:icons:bootstrap

Material icons

Beta

If you want to use Google material icons .

/assets/sass/base/_icons.sass

@import "base/icons/material-icons/icons"

Add icons variables with glyph.

Image

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

Example

Usage

{{ $args := (dict
 "src" $src_image
 "alt" $alt_text
 "desktop" $desktop_size
 "mobile" $mobile_size
 ) }}
{{ partial "commons/image" $args }}

HTML rendered

<picture>
 <source srcset="" type="image/webp" media="(min-width: 577px)" />
 <source srcset="" type="image/webp" media="(max-width: 576px)" />
 <source srcset="" type="image/jpg" media="(max-width: 576px)" />
 <img src="" alt="" width="" height="" />
</picture>

Datas

src: "" // Image’s URL, required
alt: "" // Alternative text for a11y
desktop: "" // width x height of desktop image, required
mobile: "" // width x height of mobile image
lazy: true // set false if above the fold, default true
class: "" // class to <img>
itemprop: "" // add a Schema.org information

Available for

Commons file — hugolify-theme

Image

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

Logo

/config/default/params.yaml

logo:
 header: '/assets/images/logo.svg'
 footer: '/assets/images/logo-footer.svg' # default: /assets/images/logo.svg

Retina

/config/default/params.yaml

image:
 retina:
 desktop: false # default false, Set true to enable retina for desktop

Dimensions

/config/default/params.yaml

Commons

hero:
 cover: '1600x400'
 cover_mobile: '360x400'
 desktop: '416x'
 mobile: '300x'
image:
 xlarge: '1600x'
 xsmall: '50x50'
 desktop: '856x'
 mobile: '300x'
 mobile_full: '360x'
 scrollsnap: '240x'
thumbnail:
 desktop: '414x177'
 mobile: '300x129'
 scrollsnap: '240x103'
navigation:
 desktop: '414x200'
 mobile: '300x150'

Sections

pages:
 thumbnail:
 desktop: '414x177'
 desktop: '416x179'
 desktop_large: '636x273'
 mobile: '300x129'
 scrollsnap: '240x103'
 image:
 desktop: '856x'
 mobile: '360x'
posts:
 …

Blocks

blocks:
 editorial:
 desktop: '636x'
 mobile: '360x'
 gallery:
 mobile: '138x138'
 informations:
 image:
 ratio: .5196

Images

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

Frontmatter

blocks:
 - type: images
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 images: []
 src: '' # url
 alt: '' # string (optional)
 legend: '' # string (optional)
 credit: '' # markdown (optional)
 screenshot: false # boolean (optional)
 half: false # boolean (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Informations

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

Frontmatter

blocks:
 - type: informations
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 column: '' # number, columns by row in desktop (optional)
 items: []
 icon: '' # string (bootstrap icon)
 image: {} # (optional)
 src: '' # string
 alt: '' # string (optional)
 isLogo: false # boolean (optional)
 title: '' # string (optional)
 text: '' # string (optional)
 cta: {} # (optional)
 text: '' # string
 url: '' # url
 blank: false # boolean (optional)
 lang: '' # code lang (optional)
 background: false # boolean (optional)

Demo visual renderer

Params

/config/_default/params.yaml

Instagram

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

Instagram access_token is required

Frontmatter

blocks:
 - type: instagram
 token: '' # string
 limit: 5 # number (optional)
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 cta: {} # (optional)
 text: '' # string
 url: '' # url
 blank: false # boolean (optional)
 lang: '' # code lang (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

Instafeed.js documentation

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Javascript

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

File override

The js files override is possible by keeping the same tree structure and allows to overwrite the javascript of the theme to replace it with a specific javascript.

assets/
└── js/
 └── blocks/
 └── chart.js

Add specific files

import your specific files in custom files.

Components

assets/
└── js/
 └── components/
 └── custom.js

If you want override basic import components:

/assets/js/components/index.js

Features

assets/
└── js/
 └── features/
 └── custom.js

Vendors

assets/
└── js/
 └── vendors/
 └── custom.js

Enable/disable

Animation

/config/default/params.yaml

Jobs

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-jobs
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Setup with multiple taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-jobs-categories
 - path: github.com/hugolify/hugolify-theme-jobs-expertises
 - path: github.com/hugolify/hugolify-theme-jobs-places
 - path: github.com/hugolify/hugolify-theme-jobs
 - path: github.com/hugolify/hugolify-theme-places
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

Files

HTML partials
SASS Files

CMS

Hugolify Admin (Multiple CMS) Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Example

Demo visual renderer

Jobs categories

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-jobs-categories
 - path: github.com/hugolify/hugolify-theme-jobs
 - path: github.com/hugolify/hugolify-theme

Jobs

CMS

Hugolify Admin (Multiple CMS) Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Jobs expertises

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-jobs-expertises
 - path: github.com/hugolify/hugolify-theme-jobs
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

CMS

Hugolify Admin (Multiple CMS) Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Example

Demo visual renderer

Jobs places

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-jobs-places
 - path: github.com/hugolify/hugolify-theme-jobs
 - path: github.com/hugolify/hugolify-theme-places
 - path: github.com/hugolify/hugolify-theme

Jobs
Places

CMS

Hugolify Admin (Multiple CMS) Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Example

Demo visual renderer

Jobs tags

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-jobs-tags
 - path: github.com/hugolify/hugolify-theme-jobs
 - path: github.com/hugolify/hugolify-theme

Jobs

CMS

Hugolify Admin (Multiple CMS) Available
Hugolify Decap CMS Not available
Hugolify Netlify CMS Not available
Hugolify Sveltia CMS Not available

Example

Demo visual renderer

Latest

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

Frontmatter

blocks:
 - type: latest
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 section: '' # string [posts, publications, products…]
 layout: '' # [grid, list] (optional)
 count: 4 # number (optional)
 show_more: true # boolean (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Logos

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

Frontmatter

blocks:
 - type: logos
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 items: []
 title: # string (optional)
 url: # url (optional)
 src: # url (optional)
 layout: '' # [grid, carousel] (optional)
 carousel: {} # object only if carousel layout (optional)
 params: {} # (optional)
 focus: '' # boolean (optional)
 autoplay: true # boolean (optional)
 arrows: true # boolean (optional)
 pagination: false # boolean (optional)
 type: '' # [slide, loop, fade] (optional)
 perPage: '' # number (optional)
 padding: '' # number (optional)
 gap: '' # number (optional)
 responsive: {} # (optional)
 breakpoints: 640 # number [640, 768, 1024, 1280, 1440]
 params: {}
 focus: '' # boolean (optional)
 autoplay: true # boolean (optional)
 arrows: true # boolean (optional)
 pagination: false # boolean (optional)
 type: '' # [slide, loop, fade] (optional)
 perPage: '' # number (optional)
 padding: '' # number (optional)
 gap: '' # number (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Map

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

GDPR compliant

Frontmatter

blocks:
 - type: map
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 show_places: false # boolean (optional *)
 location: {} # map widget (optional *)
 coordinates: {} # (optional *)
 lat: # float
 lng: # float
 zoom: 13 # [1…20] (optional)
 grid: '' # [small, medium, large, container, full] (optional)
 background: false # boolean (optional)

* use location (map widget from CMS), coordinates (object with lat and lng) or show_places (map with all markers from your places section).

Map

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

Example

Usage

{{ $args := (dict
 "location" (slice (dict "coordinates" "[44.8425666,-0.5737107]" "coordinates" "[45.8425666,1.5937107]"))
 ) }}
{{ partial "commons/map.html" $args }}

HTML rendered

<div
 class="map js-map"
 data-markers="[{&quot;coordinates&quot;:[44.8425666,-0.5737107]},{&quot;coordinates&quot;:[45.8425666,1.5937107]}]"
></div>

Datas

location: [] // array of markers
marker_hidden: false // boolean (optional)
zoom: "" // int (optional)

Map

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

Example

Markdown usage

{{< map markers=`{"coordinates":[44.8425666,-0.5737107]},{"coordinates":[45.8425666,1.5937107]},{"coordinates":[46.8425666,-0.5737107]}` >}}

HTML rendered

<div
 class="map js-map"
 data-markers="[{&quot;coordinates&quot;:[44.8425666,-0.5737107]},{&quot;coordinates&quot;:[45.8425666,1.5937107]},{&quot;coordinates&quot;:[46.8425666,-0.5737107]}]"
></div>

Visual renderer

Datas

markers: "" # object
zoom: "" # [1…20] if only one marker

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Netlify

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

Only for Decap/Netlify/Static CMS

Identity

To create user accounts for Netlify CMS you must activate the Identify Netlify.

Site settings > Identity > Enable

Git Gateway

To connect Netlify CMS to the Github API, it must be activated.

Site settings > Identity > Services > Enable Git Gateway

Emails notifications

To redirect each email template to those in the repository.

Site settings > Identity > Email

Netlify CMS

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

Available in production Deprecated CMS

Setup

Hugolify-admin

Enable Netlify CMS

/config/_default/params.yaml

admin:
 cms: netlifycms

Icon library

Bootstraop Icons (via CSS)

Documentation

https://github.com/netlify/netlify-cms-legacy

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

Frontmatter

blocks:
 - type: newsletter
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 form: {}
 url: '' # url
 button: '' # string
 hiddens: [] # (optional)
 name: '' # string
 value: '' # string
 grid: '' # [small, medium, large, container, full] (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Pages

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

Examples

Modules required

Hugolify theme

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Pages CMS

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

Available in production Maintened CMS Compatibility WIP

Warning: Not supported features

Cloud assets
i18n structure
Map Widget
Nested pages

Setup

Hugolify-admin

Enable Pages CMS

/config/_default/params.yaml

admin:
 cms: pagescms

Build config file

Build a .pages.yml file with Hugo and NodeJS script. This file needs to be versioned.

yarn build:config:pagescms

Enable/disable media

With media from Pages CMS, you can configure how to handle files you want to upload, attach to or embed in your content.

Paragraph

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

Frontmatter

blocks:
 - type: paragraph
 title: '' # string (optional)
 text: '' # markdown (optional)
 grid: '' # [small, medium, large, container, full] (optional)
 offset: '' # [start, end, center] (optional)
 align: '' # [start, end, center] (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Persons

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Setup with multiple taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-persons-expertises
 - path: github.com/hugolify/hugolify-theme-persons-places
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme-places
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Example

Demo visual renderer

Persons expertises

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-persons-expertises
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer (on lawyerify in french)

Persons places

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-persons-places
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme-places
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer (on lawyerify in french)

Places

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-places
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Posts

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-posts
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Setup with multiple taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-posts-authors
 - path: github.com/hugolify/hugolify-theme-posts-categories
 - path: github.com/hugolify/hugolify-theme-posts-tags
 - path: github.com/hugolify/hugolify-theme-posts
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Example

Demo visual renderer

Posts authors

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-posts-authors
 - path: github.com/hugolify/hugolify-theme-posts
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer

Posts categories

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-posts-categories
 - path: github.com/hugolify/hugolify-theme-posts
 - path: github.com/hugolify/hugolify-theme

Posts

CMS

Example

Demo visual renderer

Posts expertises

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-posts-expertises
 - path: github.com/hugolify/hugolify-theme-posts
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer (on lawyerify in french)

Posts tags

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-posts-tags
 - path: github.com/hugolify/hugolify-theme-posts
 - path: github.com/hugolify/hugolify-theme

Posts

CMS

Example

Demo visual renderer

PrepareHTML

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

Actions

safeHTML
chomp
CorrectPunctuation Hugolify

Usage

{{ partial "func/PrepareHTML" $string }}

Func file

Price

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

Example

Usage

{{ $args := (dict
 "price" 100
 "discount" "10%"
 "frenquency" "/month"
 ) }}
{{ partial "commons/price" $args }}

HTML rendered

<p class="princing">90€ <del>100€</del> <span>-10%</span> <i>/month</i></p>

Datas

price: "" // Float price, required
discount: "" // Percent or value to discount
frequency: "" // If you have subscription and you want 
itemprop: false // boolean to add itemprop="price" content="{price}"

Commons file — hugolify-theme

Products

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-products
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Setup with multiple taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-products-categories
 - path: github.com/hugolify/hugolify-theme-products-tags
 - path: github.com/hugolify/hugolify-theme-products
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Example

Demo visual renderer

Products categories

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-products-categories
 - path: github.com/hugolify/hugolify-theme-products
 - path: github.com/hugolify/hugolify-theme

Products

CMS

Example

Demo visual renderer

Products tags

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-products-tags
 - path: github.com/hugolify/hugolify-theme-products
 - path: github.com/hugolify/hugolify-theme

Products

CMS

Projects

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

Example

Demo visual renderer

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-projects
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Tags
Types

Setup with multiple taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-projects-tags
 - path: github.com/hugolify/hugolify-theme-projects-types
 - path: github.com/hugolify/hugolify-theme-projects
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Projects tags

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-projects-tags
 - path: github.com/hugolify/hugolify-theme-projects
 - path: github.com/hugolify/hugolify-theme

Projects

CMS

Example

Demo visual renderer

Projects types

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-projects-types
 - path: github.com/hugolify/hugolify-theme-projects
 - path: github.com/hugolify/hugolify-theme

Projects

CMS

Example

Demo visual renderer

Publications

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-publications
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Setup with multiple taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-publications-categories
 - path: github.com/hugolify/hugolify-theme-publications-expertises
 - path: github.com/hugolify/hugolify-theme-publications-persons
 - path: github.com/hugolify/hugolify-theme-publications
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Example

Demo visual renderer

Publications categories

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-publications-categories
 - path: github.com/hugolify/hugolify-theme-publications
 - path: github.com/hugolify/hugolify-theme

Publications

CMS

Example

Demo visual renderer (on lawyerify in french)

Publications expertises

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-publications-expertises
 - path: github.com/hugolify/hugolify-theme-publications
 - path: github.com/hugolify/hugolify-theme-expertises
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer (on lawyerify in french)

Publications persons

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-publications-persons
 - path: github.com/hugolify/hugolify-theme-publications
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer

Pushes

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

Frontmatter

blocks:
 - type: pushes
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 column: '' # [1…2]
 items: []
 title: '' # string (optional)
 text: '' # string (optional)
 cta: {}
 text: '' # string
 url: '' # url
 blank: false # boolean (optional)
 lang: '' # code lang (optional)
 image: {} # (optional)
 src: '' # url
 filter: '' # string (optional)
 alt: '' # string (optional)
 legend: '' # string (optional)
 credit: '' # markdown (optional)
 offset: '' # [start, end, center]
 card: false # boolean (boolean)
 darken: false # boolean (boolean)
 background_color: '' # color (boolean)
 color: '' # color (boolean)
 layout: '' # [grid, carousel] (optional)
 carousel: {} # object only if carousel layout (optional)
 params: {} # (optional)
 focus: '' # boolean (optional)
 autoplay: true # boolean (optional)
 arrows: true # boolean (optional)
 pagination: false # boolean (optional)
 type: '' # [slide, loop, fade] (optional)
 perPage: '' # number (optional)
 padding: '' # number (optional)
 gap: '' # number (optional)
 responsive: {} # (optional)
 breakpoints: 640 # number [640, 768, 1024, 1280, 1440]
 params: {}
 focus: '' # boolean (optional)
 autoplay: true # boolean (optional)
 arrows: true # boolean (optional)
 pagination: false # boolean (optional)
 type: '' # [slide, loop, fade] (optional)
 perPage: '' # number (optional)
 padding: '' # number (optional)
 gap: '' # number (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

QR

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

Example

Markdown usage

{{< qr text="https://www.hugolify.io" >}}

HTML rendered

<img src="/qr_6cbabfe65842f919.png" width="132" height="132">

Visual renderer

Datas

text: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Not available
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Quote

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

Frontmatter

blocks:
 - type: quote
 quote: '' # string
 author: {} # (optional)
 title: '' # string (optional)
 text: '' # string (optional)
 image: {}
 src: '' # url (optional)
 alt: '' # string (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Real estates

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-realestates
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Persons

Setup with taxonomies example

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-realestates-persons
 - path: github.com/hugolify/hugolify-theme-realestates
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Realestates persons

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-realestates-persons
 - path: github.com/hugolify/hugolify-theme-realestates
 - path: github.com/hugolify/hugolify-theme-persons
 - path: github.com/hugolify/hugolify-theme

CMS

Example

Demo visual renderer (on realestatify in french)

Render

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

Not available

Form: Netlify form
Auth: Netlify identify

Documentation

A complete documentation of how to host is available on Hugo website.

See documentation

Website

Learn more about the host and sign up.

www.render.com

Search

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

Enable

Check how to enable search on your website

Frontmatter

blocks:
 - type: search
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

Pagefind

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Selected

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

Frontmatter

blocks:
 - type: selected-*  # [selected-posts, selected-publications, selected-products…]
 section: '' # [posts, publications, products…]
 layout: '' # [grid, list] (optional)
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 items: [] # list of slugs
 show_more: false # boolean (boolean)
 background: false # boolean (boolean)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

SEO

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

Global

/data/seo.yml

color: "#000000" # theme-color, msapplication-TileColor, mask-icon
title: "" # Global meta title
description: "" # Global meta description

Editable in Hugolify admin.

Specific

In frontmatter of pages.

---
seo:
 title: "" # Page meta title
 description: "" # Page meta description
---

Not editable in Hugolify admin.

Services

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

Modules required

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-services
 - path: github.com/hugolify/hugolify-theme

Taxonomies

Categories

Setup

/config/_default/module.yaml

imports:
 - path: github.com/hugolify/hugolify-theme-services-categories
 - path: github.com/hugolify/hugolify-theme-services
 - path: github.com/hugolify/hugolify-theme

Files

CMS

Span lang

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

In accessibility, it is necessary to identify words corresponding to a language other than the content of the page.

Example

Markdown usage

{{< span_lang text="English text" lang="en" >}}

HTML rendered

<span lang="en">English text</span>

Visual renderer

Lorem ipsum

Datas

text: "" # string
lang: "" # string (e.g: de)

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Static CMS

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

Available in production Deprecated CMS

Warning: Not supported features

Cloud assets
Nested pages

Setup

Hugolify-admin

Enable Static CMS

/config/_default/params.yaml

admin:
 cms: staticcms

Documentation

https://staticjscms.netlify.app/

Sveltia CMS

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

Available in production Maintened CMS

Warning: Not supported features

Git Gateway
Nested pages
Netlify Identify

See current limitations and features not to be implemented in Sveltia CMS documentation.

Setup

Hugolify-admin

Enable Sveltia CMS

/config/_default/params.yaml

admin:
 cms: sveltiacms
 repo: Hugolify/hugolify-template # set your repository’s URL

Additional featured

Disable Netlify identify

admin:
 auth:
 netlify_identity: false

Including Hugo’s special index file in a folder collection

Disables unnecessary indexes collection ( See more about this on Sveltia’s documentation ):

Testimonials

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

Frontmatter

blocks:
 - type: testimonials
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 items: []
 quote: '' # string
 author: {} # (optional)
 title: '' # string (optional)
 text: '' # string (optional)
 image: {}
 src: '' # string
 alt: '' # string (optional)
 isLogo: false # boolean (optional)
 layout: '' # [grid, carousel] (optional)
 carousel: {} # object only if carousel layout (optional)
 params: {} # (optional)
 focus: '' # boolean (optional)
 autoplay: true # boolean (optional)
 arrows: true # boolean (optional)
 pagination: false # boolean (optional)
 type: '' # [slide, loop, fade] (optional)
 perPage: '' # number (optional)
 padding: '' # number (optional)
 gap: '' # number (optional)
 responsive: {} # (optional)
 breakpoints: 640 # number [640, 768, 1024, 1280, 1440]
 params: {}
 focus: '' # boolean (optional)
 autoplay: true # boolean (optional)
 arrows: true # boolean (optional)
 pagination: false # boolean (optional)
 type: '' # [slide, loop, fade] (optional)
 perPage: '' # number (optional)
 padding: '' # number (optional)
 gap: '' # number (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Text

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

Usage

{{ $args := (dict
 "text" "Lorem ipsum"
 ) }}
{{ partial "commons/text" $args }}

HTML rendered

<div class="text">
 <p>Lorem ipsum</p>
</div>

Datas

text: ""
class: "" // default is text

Commons file — hugolify-theme

Time

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

Example

Usage

{{ $args := (dict
 "date" "2006-01-02T15:04:05Z07:00"
 "format" "2006"
 "itemprop" "datePublished"
 ) }}
{{ partial "commons/time" $args }}

HTML rendered

<time datetime="2006-01-02T15:04:05Z07:00" itemprop="datePublished">2006</time>

Datas

date: ""
format: "" // default is 2006, https://gohugo.io/functions/time/format/
itemprop: false // or https://schema.org/Date

Commons file — hugolify-theme

Timeline

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

Frontmatter

blocks:
 - type: timeline
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 items: []
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Tina CMS

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

Not available in production Maintened CMS Compatibility WIP

Warning: Not supported features

i18n structure
Map Widget
Shortcodes

Setup

Hugolify-admin

Enable Tina CMS

/config/_default/params.yaml

admin:
 cms: tinacms

Build config file

Build a tina/config.js file with Hugo and NodeJS script.

yarn build:config:tinacms

Documentation

https://tina.io/docs/

Title

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

Frontmatter

blocks:
 - type: title
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Twitch

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

Example

Markdown usage

{{< twitch 2656646242 >}}

HTML rendered

<iframe loading="lazy" src="https://player.twitch.tv/?channel=2656646242" allowfullscreen></iframe>

Visual renderer

Datas

id: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Video

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

Frontmatter

blocks:
 - type: video
 heading: {} # (optional)
 surtitle: '' # string (optional)
 title: '' # string (optional)
 text: '' # markdown (optional)
 video: {}
 mp4: '' # video url (optional)
 webm: '' # video url (optional)
 controls: false # boolean (optional)
 autoplay: false # boolean (optional)
 loop: false # boolean (optional)
 screenshot: false # boolean (optional)
 legend: '' # string (optional)
 transcription: '' # string (optional)
 poster: '' # image url (optional)
 grid: '' # [small, medium, large, container, full] (optional)
 background: false # boolean (optional)

Demo visual renderer

Files

CMS availability

Hugolify Admin

Hugolify Admin
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Available
- Sveltia CMS Available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Available

Video

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

Example

Usage

{{ $args := (dict
 "mp4" $src_mp4_video
 "webm" $src_webm_video
 "controls" true
 ) }}
{{ partial "commons/video" $args }}

HTML rendered

<video class="js-video is-lazy" controls muted playsinline>
 <source data-src="" type="video/webm" />
 <source data-src="" type="video/mp4" />
</video>

Datas

mp4: "" // MP4 video’s URL, required
webm: "" // WEBM video’s URL, required
autoplay: false // to set autoplay video or not
controls: false // to add native controls video
loop: false // to set loop video or not

Commons file — hugolify-theme

Video

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

Example

Markdown usage

{{< video 
 mp4="/videos/lawyerify-international.mp4"
 webm="/videos/lawyerify-international.webm"
 controls=true
 screenshot=true
 legend="Lorem ipsum"
 credit="Lawyerify" >}}

HTML rendered

<figure>
 <video muted playsinline controls> 
 <source src="/videos/lawyerify-international.webm" type="video/webm">
 <source src="/videos/lawyerify-international.mp4" type="video/mp4">
 </video> 
 <figcaption>
 <p>Lorem ipsum</p>
 <p class="credit">Lawyerify</p>
 </figcaption>
</figure>

Visual renderer

Lorem ipsum

Lawyerify

Datas

mp4: "" # string
webm: "" # string
controls: false # boolean
autoplay: false # boolean
loop: false # boolean
legend: "" # string
credit: "" # markdown
screenshot: false # boolean (set true if you want add a fake browser around your picture)

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Vimeo

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

Example

Markdown usage

{{< vimeo 146022717 vimeo "iframe title" >}}

HTML rendered

<div class="vimeo">
 <iframe loading="lazy" title="iframe title" src="https://player.vimeo.com/video/JP8HNPKQWfI?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" allowfullscreen></iframe>
</div>

Visual renderer

Datas

id: "" # string
class: "" # string
title: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Not available
Hugolify Netlify CMS Deprecated Not available
Hugolify Sveltia CMS Deprecated Not available

Youtube

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

Example

Markdown usage

{{< youtube id="JP8HNPKQWfI" title="Proin maximus" class="youtube" >}}

HTML rendered

<div class="youtube">
 <iframe loading="lazy" src="https://www.youtube.com/embed/JP8HNPKQWfI?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" allowfullscreen></iframe>
</div>

Visual renderer

Datas

id: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v1.0.0
- Decap CMS Available
- Netlify CMS Available
- Pages CMS Not available
- Sveltia CMS Available Since v1.0.0
- Tina CMS Not available

Old repositories

Hugolify Decap CMS Deprecated Available
Hugolify Netlify CMS Deprecated Available
Hugolify Sveltia CMS Deprecated Not available

Home on Hugolify

Netlify

Available

Documentation

Website

Prerequisites

Git

Go

Hugo

Setup

Install

CMS params

CMS language

Theme 1

Demo

Setup

Import module

Custom main.sass?

Import sass

Repository

Collections

Enable or disable collections

Enable or disable file creation

Override fields avalaible for a collection

Add filter

Decap CMS

Warning

Setup

Configuration

Collections

Blocks

Install

Use Github template

Create a new repository

Theme 2

Demo

Setup

Import module

Custom main.sass?

Import sass

Repository

Blocks

Add or remove blocks

Add or remove fields in blocks

Create a block

Create file

Commands

Launch

Build

Update

Modules of your project

Hugolify template

Clean

Netlify CMS

Warning

Setup

Documentation

Module

Theme 3

Demo

Setup

Import module

Custom main.sass?

Import sass

Repository

Fields

How to create a field

Create file

Simple widget

List or Object widget

Relation widget

Setup

Modules

Required modules

Add modules

Example 1

Example 2

Sveltia CMS

Warning

Setup