Hyde is a brazen two-column theme that pairs a prominent sidebar with uncomplicated content. It's based on Poole, the Jekyll butler. Both created by Mark Otto. In some places Font Awesome was used for icons.
This is the Bolt CMS adaption of the theme.
A static demo of the theme can be found here.
Please make sure strict_variables: false is set/uncommented in your config.yml if you get Twig Exceptions.
Hyde for Bolt includes some customizable options, typically applied via theme.yml file.
The main menu is used for the sidebar, you can adjust it in the config://menu.yml file.
You can show a very basic search-box as any item in the menu, to enable it add
an entry with class: menusearch to your menu, the label will be used as placeholder
for the searchbox.
A menu.yml can look like this:
main:
- label: Home
title: Welcome page
path: homepage
class: first
- label: Posts
path: posts
- label: Entries
path: entries
- label: Search...
class: menusearchYou can show a copyright notice for your site at the bottom of the sidebar, to enable it set show_copyright_in_sidebar: true in theme.yml.
Hyde for Bolt's page orientation can be reversed by setting reverse_layout: true in theme.yml.
Hyde for Bolt ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).
To use a theme, uncomment the related line in theme.yml to set the color_theme variable to the right value.
By default Hyde for Bolt ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by setting sticky_sidebar: false in theme.yml.
Just add a favicon.png with at least size of 180px*180px at the top level of your files-folder and it will be used as favicon as well as apple-touch-icon, otherwise the themes default favicon will be used.
You can upload your own CSS-file to change some small things.
The file has to be named custom.css and be placed in the top level of your files-directory.
An example use of the custom.css is to change or add the prefix of taxonomy-links
in the header-section of record-pages. By default tags will be prefixed with a
hash #, categories will be prefixed with an @.
Each taxonomy-link is being supplemented by its taxonomy-name as class name, so
to change the prefix of all tags to ♥ you could add the following to your custom.css:
span.taxonomies a.tags::before{
content: '♥' !important;
}The labels for Newer and Older Buttons in Listings can be changed in theme.yml.
By adding the field show_image_above_body with type: checkbox to your ContentType you can regulate if the teaser image will be shown on top of the article/entry. Normally the teaser image (field image) is only used for listings.
Hyde for Bolt supports galleries - to use them just add a field gallery with type: imagelist to your ContentType. PhotoSwipe is used as lightbox for the gallery images.
Captions can be shown optionally, to manage this behavior add a field show_gallery_captions with type: checkbox to your ContentType.
If you regularly publish gpx tracks with your posts, you can add a field gpx with type: file to your ContentType. You also have to extend accept_file_types in config.yml to accept gpx-files in order to be able to upload your tracks. If a nonempty field gpx is found in your record a map is drawn right below the content (and above a gallery, if there is one).
The map is created using leaflet and leaflet-gpx and uses maptiles from the Open Street Map Project, some symbols from Font Awesome are used in the footer to indicate distance, duration and elevations of your track.
Records with gpx-tracks are emphasized by a map symbol in listings and the record-page itself.
Code blocks are highlighted using highlight.js, the
theme used for highlighting can be defined in your config.yml via the parameter
highlight_theme (use only lowercase, eg: highlight_theme: dracula), see the
highlight.js demo page for previews of
the different themes.
If you regularly use content which needs a copyright notice, just add a field copyright with type: html or type:markdown to your ContentType. The notice will be added below your content, and below the gallery (if there is one).
You can define for which ContentTypes the publishing date will be hidden by
adding hide_publish_date: true to your ContentTypes values in
config://contenttypes.yml.
Typically you don't want to show the publishdate for pages.
Display of taxonomies can also be controlled via ContentType definition.
If you dont want taxonomy tags to be shown, just add
hidden_taxonomy: [ tags ] to your ContentType definition.
Hereby it is possible to use some taxonomies internally but not showing them to
your visitors.
By default tags will be prefixed with a hash #, categories will be prefixed with an @ - this can be changed by using a custom.css, see above.
Both rules apply for listings as well as the display of the documents itself.
You can use the template latest.twig
(see Bolt Docs) to include
lists of the last three entries of each of your ContentTypes.
Please note that ContentTypes with hide_in_listings: true will not appear in
the list of the latest entries (see below).
Also viewless must not be set to true.
The lists will be shown below the normal content (title, body/content) of the
record whose template is set to latest.twig.
Similar to the latest template (see above) there also exists an archive.twig
template which can be used to list all records of all ContentTypes.
Again note that ContentTypes with hide_in_listings: true will not appear in
the list and viewless must not be set to true.
You can prevent records of a certain ContentTypes from showing in listings and
in in the latest template and archive template (see above) by adding
hide_in_listings: true to this ContentType.
This can be useful for ContentTypes that should not be listable (e.g. pages).
Unfortunately there seems to be no build-in parameter to forbid listings for a
certain ContentType.
To set an individual title and content of your Maintenance-Site, just create block/maintenance (it has to have exactly this slug) and set title and content there.
The theme supports the PasswordProtect extension by Bob den Otter.
To use it, just add the following new field to the fields of the ContentType you want to protect:
use_password_protection:
type: checkbox
default: false
label: 'Use the password protection provided by the PasswordProtect extension'
variant: inline
Now you are able to decide which records you want to password protect.
Please note you have to provide a redirect page in the configuration of the extension.
You have to create this page on your own, but you can use the login.twig template provided by of this theme.
Password protected records are emphasized by a lock symbol in listings and the record-page itself.
An example ContentType-definition in your contenttypes.yml could be something like:
pages:
name: Pages
singular_name: Page
fields:
title:
type: text
class: large
group: content
slug:
type: slug
uses: title
subtitle:
type: markdown
height: 100px
group: content
image:
type: image
teaser:
type: markdown
height: 150px
body:
type: html
height: 300px
template:
type: templateselect
filter: '*.twig'
taxonomy: [ groups ]
hidden_taxonomy: [ groups ]
hide_publish_date: true
viewless: false
searchable: false
recordsperpage: 10
hide_publish_date: true
hide_in_listings: true
posts:
name: Posts
singular_name: Post
slug: posts
singular_slug: post
fields:
title:
type: text
class: large
group: content
slug:
type: slug
uses: title
body:
type: markdown
height: 300px
image:
type: image
group: content
show_image_above_body:
type: checkbox
default: false
label: "Shall the teaserimage be shown above the content?"
group: content
use_password_protection:
type: checkbox
default: false
label: 'Use the password protection provided by the PasswordProtect extension'
variant: inline
gallery:
type: imagelist
extensions: [ gif, jpg, png ]
group: content
show_gallery_captions:
type: checkbox
default: false
label: 'Show captions for gallery'
variant: inline
copyright:
type: markdown
group: content
gpx:
type: file
extensions: [ gpx ]
group: content
label: 'GPX track related to the post'
relations:
posts:
multiple: true
order: title
label: Select related other posts
taxonomy: [ groups, categories, tags ]
hidden_taxonomy: [ groups ]
default_status: published
sort: -datepublish
recordsperpage: 5Open sourced under the MIT license.
<3