{"id":13558445,"url":"https://github.com/frjo/hugo-theme-zen","last_synced_at":"2025-05-15T18:11:28.820Z","repository":{"id":18493494,"uuid":"84443022","full_name":"frjo/hugo-theme-zen","owner":"frjo","description":"A fast and clean Hugo base theme with css-grid and Hugo pipes support.","archived":false,"fork":false,"pushed_at":"2025-05-14T12:18:53.000Z","size":2885,"stargazers_count":305,"open_issues_count":3,"forks_count":85,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-14T13:39:13.607Z","etag":null,"topics":["css-grid","hugo","hugo-theme","responsive","theme"],"latest_commit_sha":null,"homepage":"https://zen-demo.xdeb.org","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frjo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yaml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"frjo","ko_fi":"frjo01"}},"created_at":"2017-03-09T13:05:40.000Z","updated_at":"2025-05-14T12:18:56.000Z","dependencies_parsed_at":"2023-10-12T16:32:52.454Z","dependency_job_id":"0d74251a-6e91-43e8-a652-07075709fdda","html_url":"https://github.com/frjo/hugo-theme-zen","commit_stats":{"total_commits":654,"total_committers":25,"mean_commits":26.16,"dds":0.06574923547400613,"last_synced_commit":"758538798508998744cecead44f2c8e48e116e2e"},"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frjo%2Fhugo-theme-zen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frjo%2Fhugo-theme-zen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frjo%2Fhugo-theme-zen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frjo%2Fhugo-theme-zen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frjo","download_url":"https://codeload.github.com/frjo/hugo-theme-zen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394726,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-grid","hugo","hugo-theme","responsive","theme"],"created_at":"2024-08-01T12:04:57.438Z","updated_at":"2025-05-15T18:11:28.807Z","avatar_url":"https://github.com/frjo.png","language":"SCSS","funding_links":["https://github.com/sponsors/frjo","https://ko-fi.com/frjo01"],"categories":["SCSS","others"],"sub_categories":[],"readme":"# The Hugo Zen theme\n\n**Zen** theme strives to be as clean and standard compliant as possible with some neat features. A solid base for your custom [Hugo](https://gohugo.io/) theme.\n\nIt uses HTML5 with a modern CSS grid and flex layout. Care has been taken to produce semantic and accessible code.\n\n![Lighthouse report](https://raw.githubusercontent.com/frjo/hugo-theme-zen/main/images/lighthouse_report.png)\n\n\n## Demo site\n\nTake a look at the [Zen demo site](https://zen-demo.xdeb.org/) ([GitHub](https://github.com/frjo/zen-demo)).\n\n## Quickstart\n\nQuickstart a new site with the Zen theme by using the [Zen demo repo as a template](https://github.com/frjo/zen-demo/generate).\n\n\n## Table of contents\n\n* [Version 5.x](#version-5x)\n* [Version 4.x](#version-4x)\n* [Version 3.x](#version-3x)\n* [Version 2.x](#version-2x)\n* [Features](#features)\n* [Minimum Hugo version](#minimum-hugo-version)\n* [Installation](#installation)\n* [Updating](#updating)\n* [Run example site](#run-example-site)\n* [Performance](#performance)\n* [Sites using the Hugo Zen theme](#sites-using-the-hugo-zen-theme)\n* [Screenshots](#screenshots)\n* [Configuration](#configuration)\n* [Customise](#customise)\n* [Render hook templates](#render-hook-templates)\n* [Multilingual](#multilingual)\n* [Search](#search)\n* [Contact form](#contact-form)\n* [Cookie consent](#cookie-consent)\n* [Dates](#dates)\n* [Podcast](#podcast)\n* [Shortcodes](#shortcodes)\n* [Content security policy headers](#Content-security-policy-headers)\n* [Use npm to lint Sass and JavaScript](#use-npm-to-lint-sass-and-javascript)\n* [Repository links](#repository-links)\n* [Math typesetting with KaTeX](#math-typesetting-with-katex)\n* [Getting help](#getting-help)\n* [Credits](#credits)\n\n\n## Version 5.x\n\n* Minimum Hugo version is now v0.146.0. This plus the rearranged variables are the reasons for making this v5.\n* Rearranged a lot of variables. This will require some work to upgrade if you have customisations. I'm working towards using vanilla css only.\n* Using the new template structure introduced in v0.146.0. If you have overridden templates you will need to use the same structure in your root layout directory.\n* Colours are now set directly as css variables. You no longer need to override `_colors.scss`, instead override select colours in `_custom.scss`. This simplification was the main motivation for v5.\n* Homepage/frontpage template renamed from `index.html` to `home.html`.\n* Converted most sass settings in to pure css variables.\n* Split sass and css settings it to separate files.\n* The \"respond-to\" mixin is deprecated in v5, use css @media directly instead.\n* jQuery/umbrella js is  deprecated in v5, use alpinejs or vanilljs instead.\n* No other significant changes.\n\n### Upgrade to 5.x\n\n1. Make sure you are using Hugo v0.146.0 or later both in development and for deployment.\n2. Remove your projects `_colors.scss`, take note of the colours you have changed.\n3. Override colours and other css variables in projects `_custom.scss`.\n4. Update/remove/convert variables you overridden in projects `_extra.scss` so they match changes in themes `_variables.scss` and `_sass_variables.scss`.\n5. If you have overridden templates you will need to use the new template structure in your root layout directory.\n\n## Version 4.x\n\n* Minimum Hugo version is now v0.124.0. This is the reason for making this v4.\n* Updated a number of things to remove all \"WARN  deprecated\".\n* No other significant changes.\n\n\n## Version 3.x\n\n* Implement modern CSS like flex, grid and variables throughout.\n* All sass variables now have a css variable version. All styles use the css variable version.\n* Defaults to a System-ui font stack (like GitHub and Stack overflow among others).\n* New setting `params.internalPagination` to use the Hugo built in pagination template instead of the plain Zen version.\n* New setting `params.sassTranspiler`. Defaults to \"libsass\" but \"dartsass\" is also supported.\n* Split sass \"reset\" dir into \"base\" dir and pure \"reset\" file.\n* Added margin top/bottom/block classes, mt--m/mb--m/mx--m, for all \"spacing\" variables.\n* New sass components:\n    * cards\n    * center\n    * disabled\n    * flex-group\n    * flex-inline\n    * footer\n    * grid-group\n    * grid-stack\n    * icon-inline\n    * meta\n    * spacing\n    * stretch\n    * tags\n* Remove all use of \"typey\" lib.\n* Remove unused/outdated components.\n* Only a few small changes to templates.\n\n\n### Upgrade to 3.x\n\n1. Update your projects `_colors.scss` to add the new colours.\n2. Update overridden variables in projects `_extra.scss` so they match changes in themes `_variables.scss`.\n3. Replace `@include font-size(s);` with `font-size: var(--fs-s);` etc.\n4. Replace `@include typeface(headings);` with `font-family: var(--ff-headings);` etc.\n5. Replace sass variables with css variables, e.g. `$zen-gutters` with `var(--gutters)`.\n\n\n## Version 2.x\n\n* Replaced \"normalize\" with slimmer and updated \"reset\". Removed everything for old IE versions.\n* Use of css4 variables. Colours are now used like this `var(--color-brand)`.\n* The colours, fonts and variables sass files are now in the root sass directory.\n* Use `site` instead of `.Site` and `$.Site`.\n* Use a default line-height of unitless 1.5. For headers it is set to 1.3.\n* Added `_extra.scss` where variables can be overridden.\n* The zen-gutters variable is now a calculated value based on window width.\n* Added max-line-width for readability, default to 70ch.\n* New shortcodes: button, svg, reflink and details.\n\n\n## Features\n\n* A mobile menu\n* AlpineJS 3\n* Analytics with Matomo (Piwik)\n* Cookie consent\n* Commands for linting of css and js\n* Contact form (PHP)\n* CSS grid and flex throughout\n* HTML5\n* Hugo Pipes for images, js and sass\n* Math typesetting with KaTeX\n* Micro.blog\n* Meta tags and JSON-LD\n* Multilingual (i18n)\n* Modern CSS reset\n* Podcast\n* Responsive design\n* RSS and JSON feeds with full content\n* Search with FlexSearch.js\n\n\n## Minimum Hugo version\n\nHugo Extended version 0.146.0 or higher is required.\n\n\n## Installation\n\n### Hugo module\n\nYou need to have `go` installed to use Hugo modules.\n\nTurn your new or existing site into a hugo module.\n\nFrom the root of your site:\n\n```shell\nhugo mod init github.com/me/my-site\n```\n\nThen set the \"theme\" setting to \"github.com/frjo/hugo-theme-zen/v5\".\n\nFrom the root of your site:\n\n```shell\nhugo mod get -u\n```\n\n### Git clone\n\nYou can download and unpack the theme manually from Github but it's easier to use git to clone the repo.\n\nFrom the root of your site:\n\n```shell\ngit clone https://github.com/frjo/hugo-theme-zen.git themes/zen\n```\n\nThen set the \"theme\" setting to \"zen\".\n\n### Git submodule\n\nIf you use git to version control your site you can add the zen theme as a submodule.\n\nFrom the root of your site:\n\n```shell\ngit submodule add https://github.com/frjo/hugo-theme-zen.git themes/zen\n```\n\nThen set the \"theme\" setting to \"zen\".\n\n## Updating\n\n### Hugo module\n\nFrom the root of your site:\n\n```shell\nhugo mod get -u\n```\n\n### Git submodule\n\nFrom the root of your site:\n\n```shell\ngit submodule update --remote --merge\n```\n\n\n## Run example site\n\nFrom the root of `themes/zen/exampleSite`:\n\n```shell\nhugo server --themesDir ../..\n```\n\n\n## Performance\n\nPerformance should be excellent.\n\n* Minimal and compliant HTML5\n* Styles 23,2 kB (6,7 kB when gzipped)\n* JavaScript 1 kB (with only mobile menu active, 4 Kb with all features active)\n* All scripts loaded in head with \"defer\"\n* Optimised for HTTP/2\n\nSome performance tools will complain about to many files (js and css files are not concatenated) but with HTTP/2 that can be ignored.\n\n\n## Sites using the Hugo Zen theme\n\n* [BypassCensorship](https://www.bypasscensorship.org/) (multilingual)\n* [Combonetwork development](https://combonet.se/) (multilingual)\n* [DevSecOps Talks](https://devsecops.fm)\n* [Drejargården](https://www.drejargarden.se/)\n* [Helmer Grundström](https://www.helmergrundstrom.se/)\n* [xdeb.org](https://xdeb.org/)\n* [xdeb.net](https://xdeb.net/)\n\n\n## Screenshots\n\n![screenshot](https://raw.githubusercontent.com/frjo/hugo-theme-zen/main/images/tn.png)\n\n\n## Configuration\n\nConfigurations parameters for the sites config file, in yaml format. All the \"params\" are optional.\n\n```yaml\nbaseurl: \"https://example.org/\"\ntitle: \"SiteTitle\"\ntheme: \"zen\"\nlanguageCode: \"en-GB\"       # Set your language code (only needed for none multilingual sites).\n\nparams:\n  alpine: true              # Add AlpineJS, default false.\n  author:\n    name:                   # Your Name\n    url:                    # https://example.org/somepage\n    avatar:                 # path/to/some-image.jpg\n  blogSections:             # Sections whose \u003cschema.org\u003e `JSON+LD` in the page `\u003chead\u003e`\n    - blog                  # will be `@type: BlogPosting`.\n    - post                  # Defaults to a list including only 'post' and 'blog'.\n  breadcrumbSections:       # Sections in which pages will have a `BreadcrumbListing`\n    - section2              # in the \u003cschema.org\u003e `JSON+LD` in the page's `\u003chead\u003e`.\n    - section3              # This theme requires Hugo `v0.109.0` or higher to\n                            # generate the `BreadcrumbListing`.\n  cookieConsent: true       # Show cookie consent form, default false.\n  contact: \"info@example.org\"\n  dateformat: \"\"            # Set the date format, default to \"2 January, 2006\"\n  description: \"\"           # Set site description, used in meta tags and JSON-LD\n  favicon: \"\"               # Relative path to favicon in json feed, no leading slash.\n  feedlinks: true           # Show feed links in the footer.\n  footer: \"A [example.org](https://example.org/) production.\"\n  icon: \"\"                  # Relative path to icon in json feed and JSON-LD, no leading slash.\n  image: \"\"                 # Relative path to site image in JSON-LD, no leading slash.\n  imageMaxWidth: \"\"         # Max width for images added via figure shortcode.\n  internalPagination: true  # Use Hugos internal pagination template, default false.\n  jquery: true              # Add jQuery, default false.\n  languageDir: \"\"           # Set ltr or rtl, defaults to ltr.\n  logo: false               # Turn off the logo, defaults to true.\n  logoPath:                 # Relative path to site logo, defaults to \"images/logo.png\", no leading slash.\n  logoHeight:               # Set logo height, defaults to none.\n  logoWidth:                # Set logo width, defaults to none.\n  mainSections:             # The sections you want to have listed on the front page.\n    - \"section1\"            # Default to the section with most content if not set.\n    - \"section2\"            # Set to empty if no section should be listed.\n  math: true                # Turn on math typesetting with KaTeX, default false.\n  menuInHeader: true        # Move the main menu to the header, default false.\n  microUsername: \"\"         # Your micro.blog username.\n  mobileMenu: true          # Turn on a mobile menu on small screens, default false.\n  mobileMenuOutline: true   # Mobil menu button as outline, default false.\n  piwikSiteId:              # Matomo site id\n  piwikTrackerUrl: \"\"       # Matomo url, schemaless and no slash on end (example.org/matomo).\n  plausibleSiteID: \"\"       # Plausible site id/domain.\n  plausibleTrackerURL: \"\"   # Plausible url, schemaless and no slash on end. Optional, defaults to \"plausible.io/…\"\n  poweredby: true           # Show powered by hugo in footer\n  privacyPolicyUrl: \"\"      # If set will add link to cookie consent form.\n  relatedposts: true        # Show related posts under a \"See also\" section, default false.\n  sassTranspiler: \"dartsass\"# The Sass transpiler to use, default \"libsass\".\n  searchLimit: 20           # Max number of search hits, default 20.\n  sidebar: true             # Show a sidebar to the right, default false.\n  siteName: false           # Hide the site name (visually-hidden), default true.\n  submitted: true           # Show author and date information for a post.\n  themeColor:               # Hex color value, used in meta tags, default \"#ffffff\".\n  umbrella: true            # Add Umbrella JS, default false.\n\n  podcast:\n    title:                  # * Feed title, defaults to site title (iTunes).\n    description:            # * Feed description/summary, defaults to  site description (iTunes).\n    image:                  # * Feed image, place inside assets directory (iTunes).\n    category:\n      name:                 # * Feed category (iTunes).\n      subcategories: []     # Feed sub category (iTunes).\n    explicit: false/true    # Feed explicit setting, default to false (iTunes).\n    author:                 # Feed author (iTunes).\n    owner:\n      name:                 # Feed owner name (iTunes).\n      email:                # Feed owner e-mail (iTunes).\n    lang:                   # Feed language, defaults to site language (iTunes).\n    block: no/yes           # Block the feed from iTunes, default to no (iTunes).\n    complete: no/yes        # Set the feed as complete, defaults to no (iTunes).\n    type: episodic/serial   # Podcast type, defaults to episodic (iTunes).\n    newfeed:                # Are you moving? Set the new feed url here (iTunes).\n    cdn:                    # CDN url, no slash on end (https://cdn.example.org).\n    local: false            # Are the audio files local (true) or remote (false), default to true.\n    preload: none/metadata/auto # Set on the HTML5 audio tag, defaults to \"metadata\".\n```\n\nThe site will work without setting any of the podcast parameters but your podcast feed will not be accepted by iTunes. At a minimum you need to set the first four, title, description, image and category name. Read more in the podcast section below.\n\n\n## Customise\n\n\n### Front page\n\nThis is a part that almost everyone will like to customise in some manner. The template file is `layouts/index.html`. By default it will include any text you put in `content/_index.md` and below that list the posts in \"mainSections\" as summaries.\n\nIf you do not specify any sections in the \"mainSections\" param (see configuration above) it will list the section with the most posts. If you do not want to list anything, set it but leave the value empty.\n\n\n### Colours and variables\n\nThis is another part that almost everyone will like to customise.\n\nThey are found in the theme `assets/sass/_colors.scss`, `assets/sass/_variables.scss` and `assets/sass/_sass_variables.scss` files. You can copy them to the root `assets/sass/` directory to set your own values. \n\nIn most cases you likely only need to override a few values and then it is easier to set these in the extra and custom sass files.\n\nRoot `assets/sass/_extra.scss`: Loaded first so use to override sass variables only.\n\nRoot `assets/sass/_custom.scss`: Loaded last so use to override css variables and add any custom styles you need.\n\n\n### Logo\n\nPlace your logo at `static/images/logo.png`. If you don't provide a logo, then the default theme logo will be used.\n\nThere are also setting to set a custom `logoPath` as well as setting logo width and height.\n\n### Favicons\n\nUpload your image to [RealFaviconGenerator](https://realfavicongenerator.net/) then copy the generated favicon files in to the `static` directory. (Do not place them in a sub directory.)\n\nThe theme will autodetect them and add the needed code.\n\n\n### Head and footer partials\n\nIf you create partials named `head/extra.html` and/or `footer.html` they will be used. They do not exist or are empty in the theme but are supported as a convenience.\n\nContent in the \"head/extra\" partial will be added to the end of the \"head\" tag, perhaps some extra css or javascript.\n\nContent in the \"footer\" partial will replace all the default content in the \"footer\" tag.\n\n\n### Layouts\n\nTo customise a layout included in the zen theme, copy it to the root layout directory and edit it there. Make sure to maintain the directory structure inside the layouts directory.\n\nAdd any new layouts to the root layout directory as well. This way they will not be overwritten when updating the theme.\n\n\n#### Menu and sidebar layouts\n\nIf a Hugo main menu is defined (.Sites.Menu.main) the menu template will use it to build a navigation menu.\n\nIf the default sidebar is activated it will display each section with all its pages listed below.\n\nThey are set up in `layouts/partials/menu.html`, `layouts/partials/mobilmenu.html` and `layouts/partials/sidebar.html`.\n\n\n### CSS grid for layout\n\nModern CSS grid is the easiest and cleanest way to layout your pages.\n\nThe CSS grid layout are in `assets/sass/layouts/_layouts.scss`. A lot can be done by just reordering \"grid-template-rows\".\n\n\n### Other styles and scripts\n\nStyles and scripts are processed with Hugo pipes that was added in Hugo 0.46.\n\nTo customise a js or sass file, copy it to the root assets directory and edit it there. Make sure to maintain the directory structure inside the assets/sass directory.\n\nThere is an `assets/sass/_custom.scss` file meant for your custom styles. Copy it to the root `assets/sass/_custom.scss` to use it.\n\nThe default styles in `assets/sass/_zen.scss` are boring but functional. You can easily override them completely by placing an empty file named \"_zen.scss\" in root assets/sass directory.\n\nThe sass files are by default built for production, compressed with fingerprint.\n\nBy setting the Hugo environment variable to \"development\" (default when running `hugo server`) they will instead be nested with sourcemaps.\n\n\n## Render hook templates\n\n### Add anchor links to headings\n\nExample render hook template for headings that will add anchor links. To activate it copy the file `~/theme/zen/layouts/_default/_markup/render-heading.html.example` to `layouts/_default/_markup/render-heading.html`.\n\n### Process Markdown images\n\nExample render hook that process images in the same way as the \"img\" shortcode. See top of the file for settings to adjust it to your needs. To activate it copy the file `~/theme/zen/layouts/_default/_markup/render-image.html.example` to `layouts/_default/_markup/render-image.html`.\n\n### Make external links open in a new tab.\n\nExample render hook to rewrite external links so they open in a new tab. To activate it copy the file `~/theme/zen/layouts/_default/_markup/render-link.html.example` to `layouts/_default/_markup/render-link.html`.\n\nI rarely use this one, I think the user should decide how links open.\n\n\n## Multilingual\n\nA language selector will be included on sites with more than one language. Add `languageName` to your language configuration, this is what will be displayed in the selector.\n\nThe language selector will link to a translation of the current page if it exist and to the front page if it does not.\n\nFor \"rtl\" languages add a `languageDirection` parameter to the language configuration. If not added it will default to \"ltr\".\n\nAdd a `languageCode` parameter to each language as well, that is used to set the correct language attribute in the `html` tag and in feeds. The root `languageCode` is then not needed. If not set the language key (e.g. \"en\") will be used.\n\n```yaml\nlanguages:\n  sv:\n    weight: 1\n    languageName: \"Svenska\"\n    languageCode: \"sv-SE\"\n  en:\n    weight: 2\n    languageName: \"English\"\n    languageCode: \"en-GB\"\n  ar:\n    weight: 3\n    languageName: \"العربية\"\n    languageDirection: \"rtl\"\n    languageCode: \"ar\"\n```\n\nThe Zen theme templates has some strings that needs translation, e.g. \"Home\" and \"Menu\". Many translations are included and you can easily add more to the `i18n` site directory. All but English and Swedish are contributed by users, thanks!\n\n* Arabic\n* Danish\n* English\n* Finnish\n* French\n* German\n* Hebrew\n* Indonesian\n* Norwegian\n* Portuguese\n* Serbian\n* Swahili\n* Swedish\n\n\n### Non English site\n\nIf you want to have a site in another language than English but do not need multiple languages the following settings are needed.\n\nSet `defaultContentLanguage` to your language code, otherwise it will default to \"en\" . Also set `languageCode` so browsers are informed of what language the site is in.\n\nHere how it looks for a site in Swedish.\n\n```yaml\nlanguageCode: \"sv-SE\"\ndefaultContentLanguage: \"sv\"\n```\n\n\n## Search\n\nBuilt in integration with the excellent [FlexSearch.js](https://github.com/nextapps-de/flexsearch). A fast full text search that reads a JSON file created by Hugo to index and search the site.\n\nHere is the three steps needed to create a search page.\n\n1. Add a new output format in your configuration file.\n    ```yaml\n    outputFormats:\n      SearchIndex:\n        mediaType: \"application/json\"\n        baseName: \"searchindex\"\n        isPlainText: true\n        notAlternative: true\n    ```\n2. Add the new output format to output setting for \"home\".\n    ```yaml\n    outputs:\n      home: [\"HTML\", \"SearchIndex\", \"[other formats you need]\"]\n    ```\n3. Add the shortcode `{{\u003c search \u003e}}` to a page. The search and flexsearch js files gets loaded automatically on pages that use the shortcode.\n\nYour search page will now have a search field where all the posts of the site can be searched.\n\nThe only setting is \"searchLimit\" that defaults to 20.\n\n\n## Contact form\n\nIf your server support php with the mail() command (very common) you can use the included contact form feature to get a contact form for your site.\n\n1. Copy the file `themes/zen/php/contact.php.example` to `static/php/contact.php`.\n2. Edit the contact.php file so it has your own e-mail address. You may also change the mail subject prefix.\n3. Add the shortcode `{{\u003c contact \u003e}}` to a page. The contact.js file gets loaded automatically on pages that use the shortcode.\n\nIf you have a SPF record for your domain, make sure the web server is listed or other mail server may mark the mail as spam.\n\nTwo types of spam protection are implemented. The form can only be posted after the user moved the mouse or pressed the tab or enter key. The form has a \"honeypot\" field that is invisible to humans but not to most spam boots. If that field is filled in the mail will not be sent.\n\nForm validation is handled by HTML5 and there is some CSS to make it look nice.\n\nJavascript is used for spam protection and to display error/success messages.\n\n\n## Cookie consent\n\nAllow users to opt-in to tracking. Matomo and Google analytic are supported out of the box.\n\nSet `cookieConsent` param to true to activate. Also set `privacyPolicyUrl` to include a link to your privacy policy in the cookieconsent dialog.\n\nSee `assets/js/tracking.js` for example how to implement it for other cookies.\n\nThe users choice is stored in localStorage item \"cookieconsent\".\n\nIt it recommended to add a link or button to allow users to change their choice. Adding the class \"clearcookieconsent\" is all that is needed.\n\n```html\n\u003cbutton class=\"clearcookieconsent\"\u003eCookie settings\u003c/button\u003e\n\u003ca href=\"#\" class=\"clearcookieconsent\"\u003eCookie settings\u003c/a\u003e\n```\n\nWhen a user clicks the button/link the localStorage item \"cookieconsent\" is cleared and the cookieconsent dialog is shown again.\n\n![Lighthouse report](https://raw.githubusercontent.com/frjo/hugo-theme-zen/main/images/cookieconsent.png)\n\n\n## Dates\n\nIf \"lastmod\" is set in the frontmatter on a post that value will be used in the \"submitted\" section. If not, \"date\" is used.\n\nWith \"lastmod\" set a date section will also appear at the bottom of post telling the reader the created and modification dates.\n\n\n## Podcast\n\nThe Zen theme supports podcasting.\n\n* RSS feed with all the needed iTunes tags.\n* Single and full layouts with HTML 5 audio player.\n* Archetype with required parameters.\n\nHere follow all the possible podcast frontmatter parameters. Only the first two is mandatory and are in the podcast archetype.\n\n```yaml\npodcast:\n    mp3:                    # * The path to the mp3 file, \n    duration:               # * Episode duration, e.g 1:04:02 (iTunes).\n    image:\n        src:                # Episode image src, place inside the assets directory (iTunes).\n        alt:                # Alt text for the image, explain what is on the image.\n        width:              # Image width in the article, defaults to 250px.\n        class:              # Image wrapper class.\n    explicit: true/false    # Episode explicit setting, default to false (iTunes).\n    episode:                # Episode number (iTunes).\n    episodeType: full/trailer/bonus # Episode type, defaults to full (iTunes).\n    season:                 # Episode season (iTunes).\n    block:                  # Block the episode from iTunes, default to no (iTunes).\n```\n\n* [Apple Podcasts categories](https://help.apple.com/itc/podcasts_connect/#/itc9267a2f12)\n* [Apple - A podcaster’s guide to RSS](https://help.apple.com/itc/podcasts_connect/#/itcb54353390)\n\n\n## Shortcodes\n\n### Audio and Video\n\nSupport for files in global assets directory, static directory and page resources.\n\n```\n{{\u003c audio src=\"/audio/audio.mp3\" class=\"something\" \u003e}}\n\n{{\u003c video src=\"/video/video.mp4\" poster=\"/images/poster.jpeg\" class=\"something\" \u003e}}\n```\n\nPossible parameters are:\n\n* autoplay (only video)\n* caption\n* class\n* loop (only video)\n* poster (only video)\n* preload (none/metadata/auto, default metadata)\n* src\n* width (only video)\n\nThe audio and video tags will be wrapped with a figure tag.\n\n\n### Button\n\nCreates a link with the class \"button\". If \"newtab\" is true the link will open in a new tab.\n\nPossible parameters are:\n\n* class\n* newtab\n* src\n* text\n\n\n### Clear\n\nBreak float.\n\n```\n{{\u003c figure src=\"/images/image.jpg\" class=\"right\" \u003e}}\n\nblablabla # Displayed left of the image.\n\n{{\u003c clear \u003e}}\n\nblablabla # Displayed below of the image.\n```\n\n\n### Contact\n\nInsert a html5 contact form, [see more above](#contact-form).\n\n```\n{{\u003c contact \u003e}}\n```\n\n### Details and Summary\n\nInsert a html5 contact form, [see more above](#contact-form).\n\n```\n{{\u003c details summary=\"The summary text here\" \u003e}}\nThe details text here.\n\nIt can be long and **contain** markdown.\n{{\u003c /details \u003e}}\n```\n\nPossible parameters are:\n\n* class\n* summary\n\n\n### Figure and Img\n\nZen comes with a improved version of the built in \"figure\" shortcut and a very similar \"img\" shortcode. Support for images in global assets directory, static directory and page resources.\n\n```\n{{\u003c figure src=\"/images/image.jpg\" alt=\"Example image.\" caption=\"Lorem ipsum dolor sit amet.\" \u003e}}\n\n{{\u003c img src=\"/images/image.jpg\" alt=\"Example image.\" size=\"600x\" \u003e}}\n```\n\n\nPossible parameters are:\n\n* alt\n* attr (only figure)\n* attrlink (only figure)\n* caption (only figure)\n* class\n* height\n* link\n* size (not for images in static directory)\n* srcset (not for images in static directory)\n* src\n* title (only figure)\n* width\n\nOnly \"src\" is none optional but you really should set \"alt\" as well.\n\n* You can set a max width for images with parameter \"imageMaxWidth\". Only used for images where size, width and height is not set.\n* If width and height is not set the real dimensions of the image will be used.\n* If only width or only height is set the other value will be proportionally calculated.\n\n\n### File\n\nCreates a link to a file in global assets directory, static directory and page resources.\n\nPossible parameters are:\n\n* class\n* newtab (default false)\n* src\n* text\n\n\n### Reflink\n\nCreates a link to an internal page.\n\n```\n{{\u003c reflink \"some-page.md\" \u003e}}\n```\n\nThis will output:\n\n```html\n\u003ca href=\"/path/to/page/\"\u003eThe title of the page\u003c/a\u003e\n```\n\n\n### SVG\n\nSVG shortcode with inline support. Support for images in global assets directory, static directory and page resources.\n\n```\n{{\u003c svg src=\"/images/image.svg\" alt=\"Example image.\" caption=\"Lorem ipsum dolor sit amet.\" \u003e}}\n\n{{\u003c img src=\"/images/image.svg\" inline=\"true\" \u003e}}\n```\n\nPossible parameters are:\n\n* alt (not for inline)\n* caption\n* class\n* height (not for inline)\n* inline\n* link\n* src\n* width (not for inline)\n\n\n### Search\n\nAdd a search form for the site, [see more above](#search).\n\n```\n{{\u003c search \u003e}}\n```\n\n\n### Wrapper\n\nA simple, but useful, shortcode to wrap content in a div with a class. The content can use markdown.\n\n```\n{{\u003c wrapper class-name-you-want \u003e}}\nThe **content** that should be wrapped.\n\nSome more content.\n{{\u003c /wrapper \u003e}}\n```\n\nThis will produce:\n\n```html\n\u003cdiv class=\"class-name-you-want\"\u003e\n\u003cp\u003eThe \u003cstrong\u003econtent\u003c/strong\u003e that should be wrapped.\u003c/p\u003e\n\n\u003cp\u003eSome more content.\u003c/p\u003e\n\u003c/div\u003e\n```\n\nIf the content should be left untouched add \"nomarkdown\" after the class name.\n\n```\n{{\u003c wrapper class-name-you-want nomarkdown \u003e}}\nThe **content** that should be wrapped.\n\nSome more content.\n{{\u003c /wrapper \u003e}}\n```\n\nThis will produce:\n\n```html\n\u003cdiv class=\"class-name-you-want\"\u003e\nThe **content** that should be wrapped. Some more content.\n\u003c/div\u003e\n```\n\n\n## Content security policy headers\n\nIncludes tracking code for Matomo or Google in a way that supports Content security policy headers. Read more in my blog post [Content security policy headers when using Matomo or Google analytics](https://xdeb.org/post/2020/01/14/content-security-policy-headers-when-using-matomo-or-google-analytics/).\n\n\n## Use npm to lint Sass and JavaScript\n\n* Lint your Sass using stylelint.\n* Lint your JavaScript using biome.\n* Can lint files in the theme as well as the project assets directory.\n\nSet up your front-end development build tools:\n\n1. Install Node.js and npm, the Node.js package manager.\n2. The package.json file in your new sub-theme contains the versions of all the\nNode.js software you need. To install them run:\n\n        npm install\n\n3. Run the following commands to lint your theme and projects Sass and JavaScript code.\n\n        npm run lint-theme\n        npm run lint-project\n        nmp run lint (project + theme)\n\n\n## Repository links\n\nAdd view and edit repo links on your post. Activates when you add repository settings, see example for GitHub below. See more in the partial `repository-links.html`.\n\n```yaml\nrepository:\n    branch: \"main\"\n    owner: \"kalle\"\n    repo: \"myhugowebsite\"\n    urlPatternEdit: \"https://github.com/%s/%s/edit/%s/%s\"\n    urlPatternView: \"https://github.com/%s/%s/blob/%s/%s\"\n```\n\nCopied from example by [jmooring](https://discourse.gohugo.io/t/hugo-v0-112-0-new-template-functions/44512)\n\n\n## Math typesetting with KaTeX\n\nDownload the latest release from \u003chttps://github.com/KaTeX/KaTeX/releases\u003e. Unpack and place the resulting \"katex\" directory in the root `static` directory.\n\nThe resulting path should be `static/katex`. Then set the `math` param to \"true\" and write some math to be typeset.\n\nWrap inline math in single \"$\":\n\n~~~~\nLorem $E=mc^2$ ipsum\n~~~~\n\nand block math in double \"$$\":\n\n~~~~\n$$\n[ \\int_0^1 \\frac{dx}{e^x} =  \\frac{e-1}{e} ]\n$$\n~~~~\n\nMarkdown rendering will in some instances mess with the math. To avoid this use the math shortcode for inline math:\n\n~~~~\nLorem {{\u003c math \u003e}}E=mc^2{{\u003c /math \u003e}} ipsum\n~~~~\n\n and math codeblocks for block math:\n\n`~~~~ math`  \n`[ \\int_0^1 \\frac{dx}{e^x} =  \\frac{e-1}{e} ]`  \n`~~~~`\n\n\n## Getting help\n\nIf you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/frjo/hugo-theme-zen/tree/main/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132). Feel free to tag me in your question, my forum username is [@frjo](https://discourse.gohugo.io/u/frjo/summary).\n\n\n## Credits\n\nThis is originally a port of the [Zen](https://www.drupal.org/project/zen) theme by [JohnAlbin](https://www.drupal.org/u/johnalbin), a very popular base theme for Drupal.\n\nThanks to the [Cupper Hugo theme](https://github.com/zwbetz-gh/cupper-hugo-theme/) for a really good Readme, have copied a lot from it.\n\nIcons from [tabler/tabler-icons: A set of over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects.](https://github.com/tabler/tabler-icons) and [Language Icon](http://www.languageicon.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrjo%2Fhugo-theme-zen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrjo%2Fhugo-theme-zen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrjo%2Fhugo-theme-zen/lists"}