This module is no longer maintained (archived for historical purposes), and will not receive updates, even security updates.
https://hugo-test-debug-tables.wildtechgarden.ca
A Hugo module / theme component that adds partials and a shortcode for displaying most variables available on pages generated by Hugo. See License for permissions for use.
REOPENED: Based on a request this repo does seem to be useful to some as a tool for learning some of Hugo's internal state for pages/sites, so I have reopened it to submissions and activity. It's getting a little bit if updating, bt mostly I don't need it for myself, so improvement will mostly occur based on input from those who let me know via Pull Requests, Discussions, or Issues (as appropriate).
This module is built using assumptions that may require Hugo 0.80.0 or higher, and in any event those are the only versions on which it has been tested, at present.
Note: Previously the minimium was 0.81.0 but as of 2022-07-12 we have converted from multi-line constructs (like dict) to single line as that is the difference between supporting 0.80.0 (which is the highest version available in Debian stable, and various other Linux releases) and requiring at least 0.81.0.
Idea and initial HTML sources from zwbetz-gh/starter-hugo-debug-site debug-table
- Hugo Debug Bar
- This looks interesting as it is an overlay over the page, and the variables are curated rather than an alphabetical full dump.
- On the downside, it looks like more work to use this.
- Hugo Debug Print
- David's Neighbour Org Debug Module
- Adds debug to
hugo
run rather than embedded in the site.
- Adds debug to
See also Discussions on the Hugo forum, from the Hugo Debug Bar repository
To use the full list of available debug tables as a partial in your layouts, simply add:
{{ partial "helpers/debug-tables/debug-tables-list" . }}
in the layout(s) used for the page(s) on which want the tables to appear.
To use the full list of available debug tables as a shortcode on a page in your content pages, simply add:
{{</* helpers/hugo-debug-tables */>}}
to the page on which you want the table, under your site's content/
directory.
NOTE: This will only work if the content page in question actually gets rendered. (Many section layouts, for instance, do not render .Content
and therefore this shortcode would not work with those layouts).
Each of the tables (page, section, file, site, taxonomy, hugo, os-stat) expects the same context: a dictionary (dict) with following keys:
- Page
- basePage
- Site
- baseSite
So, for example to emit the site table, one would use:
{{ partial "helpers/debug-tables/tables/site" (dict "Site" site "baseSite" $baseSite "Page" $curPage "basePage" $basePage }}
E.g.
{{</* helpers/hugo-debug-tables table="site" */>}}
Where 'site' is one of page, section, file, site, taxonomy, hugo, os-stat
.
Note that for the shortcode, only .RawContent
renders, not .Content
, .Plain
, or other rendered content for the current page (in the table produced by the shortcode).
- Get a copy of the code for, and switch to the directory for your site or theme.
-
Initialize the Hugo module system:
hugo mod init github.com/<your_user>/<your_project>
(assuming you are using github, of course). -
Import hugo-debug-tables in your
config.toml
[module] [[module.imports]] path = "github.com/danielfdickinson/hugo-debug-tables"
-
Change back to the site directory
-
Get the module
hugo mod get github.com/danielfdickinson/hugo-debug-tables
-
Add the code (above) for using the tables to your source code.
- Obtain a copy of the module e.g. (a module Zip file from the Git repo)
- Copy/extract the files in the archive into the root of your site or theme (archives contain /layouts and subdirectories under it).
- Change back to the site directory
-
To test the result, run the local Hugo server (assumes you have a theme or layouts in your site)
hugo server -b https://localhost:1313/
The code is currently designed to only add the debug tables if running Hugo in "development" mode.
That means it will, by default, be added when using hugo server
but not a regular build with hugo
(and only if you call the partial or shortcode, of course).
In config.toml
add
[params]
debugTableEnvironment = ["development","production"]
[params]
debugTableEnvironment = [""]
NB The ""
is required because an empty slice (or no param) defaults to ["development"]
In config.toml
add
[params]
debugTableEnvironment = ["custom1","custom2"]
And of course if you wanted you could add "development"
and/or "production"
A test CSS file is available in assets/css/hugo-debug-tables/debug-demo.css
. To use it place a line such as the following:
{{- partial "helpers/debug-tables/debug-head-snippet" . -}}
in the <head>
section of your layout(s).
Note that this partial adds the above CSS as a resource to a variable $addToCSS
(which must be defined prior to the partial). It assumed that $addToCSS
is processed by Hugo Pipes in order to include the above CSS in the output CSS. If that is not what you want, you may handle the CSS file yourself using Hugo Pipes.
Details (disclosure elements) embedded inside a another table create a new layer above the current table when opened. To get rid of the new layer and close the table, close the details (disclosure) element that appears above the table or other disclosure content.
Two types of classes available:
- Element classes (e.g. details-debug-hugo)
- By actual use of element not the HTML element type (e.g.
details
,list
,table-cell
) — sometimes an <li> might be used withdetails
when there is no additional information, but the item is a part of a list of details. - May include a hyphen in the element type part
- Always end in
-debug-hugo
to denote they are 'debug table' classes
- Always end in
- By actual use of element not the HTML element type (e.g.
- Category/Purpose Classes
- E.g.
debug-pages-hugo
which is wrapped around HTML for page lists/tables - Always begin with
debug
and end inhugo
. The middle is a single word (no hyphens).
- E.g.
Class | Description |
---|---|
code-debug-hugo | Added to any element intended to show source code or content (as source) |
details-debug-hugo | Added to any element that can contain additional details with a disclosure widget |
list-debug-hugo | Added to any list container element (e.g. <ul>) |
list-item-debug-hugo | Added to any list item that doesn't use a disclosure element (.eg. <li>) |
pre-debug-hugo | Added to any element to be used as preformatted text |
section-debug-hugo | Added to any master wrapper element (e.g. <section>) |
summary-debug-hugo | Added to any element which contains the summary for a details-debug-hugo element |
table-debug-hugo | Added to any table |
table-row-debug-hugo | Added to any table row |
table-cell-head-debug-hugo | Added to any table heading cell (e.g. <th>) |
table-cell-debug-hugo | Added to any regular table cell (e.g. <td>) |
Class | Description |
---|---|
debug-acknowledgements-hugo | Added to wrapper around acknowledgements table |
debug-content-hugo | Added to any top-level wrapper around page content (source) displayed in a debug table |
debug-current-hugo | Added to an element wrapping a current page or site |
debug-menus-hugo | Added to an element wrapping a list of menus |
debug-pages-hugo | Added to any top-level wrapper around a list of .Pages |
debug-sites-hugo | Added to any top-level wrapper around a list of .Sites |
debug-variables-hugo | Added to top-level wrapper <section> element when displaying all tables |
If your issue can't be found when searching both open and closed issues, please add it!
Please check open issues on danielfdickinson/hugo-debug-tables for enhancements and bugs that you would like resolved, write the fix, and submit a PR!
Adding and improving documention is always handy as well.
Please use GitHub Discussions for support and general questions.