layouts folder

The themes/jhdocs/layouts folder includes the page templates and shortcodes used by the jhDocs theme.

Page templates

The following assets are included in the themes/jhdocs/layouts/_default folder:

• _markup:
  • This folder includes overrides of the default render behavior for certain elements.
• baseof.html:
  • This is the default page template for all pages other than the home page.
  • Do not modify this file as it defines the standard layout for jhDocs pages.
• list.html:
  • This file defines what displays in the content area of all list pages, i.e. pages named _index.md.
  • You’ll only modify this file if you need to automatically add an extra element to the content of every “list page”.
• single.html:
  • This file defines what displays in the content area of all single pages, i.e. pages not named _index.md.
  • You’ll only modify this file if you need to automatically add an extra element to the content of every “single page”.

The following assets are included in the themes/jhdocs/layouts folder:

• 404.html:
  • This is the “404 page not found” page for the site.
  • This page displays when the user enters an invalid URL for your site.
  • You don’t need to do anything to use this file; Hugo will find it in the themes folder and use it.
• index.html:
  • This is the default home page for the site.
  • It does not include any useful content as-is. The actual home page content is in /content/_index.md.
  • Copy this file to your layouts folder but do not modify it.

Partials

Partials are Hugo macros that can be called from HTML files.

The following assets are included in the themes/jhdocs/layouts/partials folder:

• jhdocs-breadcrumbs.html:
  • Defines the breadcrumbs that display towards the top of content pages.
• jhdocs-footer.html:
  • Defines the footer that displays at the bottom of every content page.
• jhdocs-head-start.html:
  • Defines the start of the head section of every page, setting up the page title, character set, viewport, and links to themed CSS.
  • Your layouts/partials/local-head.html file is where you add your site’s specific head elements.
  • Consider using cache busting techniques for any resources you link into the page head.
  • If you define Open Graph meta tags in local-head.html, users will see a professional looking image and description when sharing links to your doc site.
  • Here’s an example of the Open Graph card for this site:
    
• jhdocs-head-end.html:
  • Defines the end of the head section of every page.
  • It basically just closes the head section.
  • Your layouts/partials/local-head.html file is where you add your site’s specific head elements.
• jhdocs-header.html:
  • Defines the header that displays at the top of every content page.
• jhdocs-last-updated.html:
  • Defines the last updated date that displays towards the bottom of every content page.
• jhdocs-nav.html and jhdocs-nav-recurse.html:
  • Defines the nav bar at the left of the page.
• jhdocs-page-feedback.html:
  • Defines the page feedback section that displays towards the bottom of content pages.
• jhdocs-section-identity.html:
  • Defines the section identity layout that displays towards the top of site section intro pages.
• jhdocs-table-of-contents.html and jhdocs-table-of-contents-mobile.html:
  • Defines the table of contents that displays in content pages that have headers.
• jhdocs-topics.html:
  • Defines the topics section for pages that specify topics.
• jhdocs-version-number.html:
  • Displays the current jhDocs theme version number.
• local-head.html:
  • Template for the file that defines your site’s specific content for the head block.

Shortcodes

Shortcodes are Hugo macros that can be called from markdown files.

The following shortcodes are included in the themes/jhdocs/layouts/shortcodes folder:

• jhdocs.callout.html: Call out blocks of important text
• jhdocs.caption.html: Display a caption for a figure
• jhdocs-clickable-image: Constrain the width of detailed images, opening them in a new browser tab when clicked
• jhdocs-code: Display blocks of code
• jhdocs-embedded-video: Display an embedded video in your content
• jhdocs-floating-list: Display an list of objects in a floating layout, ranging from left-to-right, top-to-bottom.
• jhdocs-icon: Display an icon in your content
• jhdocs-iframe: Embed an iframe in your content
• jhdocs-link-block: Display a section with a title, image, and a link
• jhdocs-link-button: Display a link in your content as a button
• jhdocs-section-intro: Introduce the major sections of your site
• jhdocs-site-search: Wrap the Pagefind search UI for use in the mobile search page
• jhdocs-swagger-ui: Display Swagger UI specfiles
• jhdocs-tile-list: Container for jhdocs-tile elements
• jhdocs-tile: Displays a large button with an icon, title, and short description