Custom 404 page with content from md file #809
-
|
I use ananke through module import and set it as my theme, which works great. I wanted to be able to customise the 404 page, so I've created a ---
title: "404"
description: ""
featured_image: "/images/home.jpg"
---
Sorry, the page you're looking for doesn't exist.but that results in a "Page Not Found" error (not the default 404 page): This is surprising, as I can see that the custom 404 page was created in <!DOCTYPE html>
<html lang="en-us">
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>404 | PY20555STI</title>
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="Sorry, the page you’re looking for doesn’t exist.">
<meta name="generator" content="Hugo 0.139.3">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/ananke/css/main.min.css" >
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="canonical" href="http://localhost:1313/404/">
<meta property="og:url" content="http://localhost:1313/404/">
<meta property="og:site_name" content="PY20555STI">
<meta property="og:title" content="404">
<meta property="og:description" content="Sorry, the page you’re looking for doesn’t exist.">
<meta property="og:locale" content="en_us">
<meta property="og:type" content="article">
<meta itemprop="name" content="404">
<meta itemprop="description" content="Sorry, the page you’re looking for doesn’t exist.">
<meta itemprop="wordCount" content="8">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="404">
<meta name="twitter:description" content="Sorry, the page you’re looking for doesn’t exist.">
</head><body class="ma0 avenir bg-near-white development">
<header class="cover bg-center" style="background-image: url('http://localhost:1313/images/home.jpg');">
<div class="bg-black-60">
<nav class="pv3 ph3 ph4-ns" role="navigation">
<div class="flex-l justify-between items-center center">
<a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
PY20555STI
</a>
<div class="flex-l items-center">
<ul class="pl0 mr3">
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/" title="Home page">
Home
</a>
</li>
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/about/" title="About page">
About
</a>
</li>
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/posts/" title="Posts page">
Posts
</a>
</li>
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/contact/" title="Contact page">
Contact
</a>
</li>
</ul>
<div class="ananke-socials"></div>
</div>
</div>
</nav>
<div class="tc-l pv6 ph3 ph4-ns">
<div class="f2 f1-l fw2 white-90 mb0 lh-title">404</div>
</div>
</div>
</header>
<main class="pb7" role="main">
<div class="flex-l mt2 mw8 center">
<article class="center cf pv5 ph3 ph4-ns mw7">
<header>
<h1 class="f1">
404
</h1>
</header>
<div class="nested-copy-line-height lh-copy f4 nested-links mid-gray">
<p>Sorry, the page you’re looking for doesn’t exist.</p>
</div>
</article>
</div>
</main>
<footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
<div class="flex justify-between">
<a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="http://localhost:1313/" >
© PY20555STI 2024
</a>
<div><div class="ananke-socials"></div>
</div>
</div>
</footer>
</body>
</html>Furthermore, I am able to override the default 404 page, by placing a custom file in |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 4 replies
-
|
GoHugo does not support a content file for 404 errors (it's not planned to my knowledge). What you can do is something called a "headless page" for your content (option 3) or (what you already started) add the content to your custom 404 template (either directly or via one of these three options):
The first one is the easiest, the last one the most work. But the last one puts your content into the content directory, if you do anything else with it (like linting). |
Beta Was this translation helpful? Give feedback.
-
|
In general: The page you created is available at See this page for a list of common server configs. |
Beta Was this translation helpful? Give feedback.
-
|
thank you for a prompt response @davidsneighbour.
I think this will not be possible in my setup, as I host it on github pages, and "Redirection to is automatic and not configurable". However your first suggestion works well. I am able to connect the content of a file stored in - title: "PY20555STI"
featured_image: "/images/home.jpg"
Content: "This is content"with the layout and render it correctly using the custom layout in {{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
<article class="center cf pv5 measure-wide-l">
<h1>
{{ range $category, $404data := .Site.Data.files }}
<p>{{ $category | title }}</p>
{{ range $404data }}
title: {{ .title }}
</br>
featured_image: {{ .featured_image }}
{{ $featured_image := .featured_image }}
</br>
Content: {{ .Content }}
{{ end }}
{{ end }}
</h1>
</article>
{{ end }}The missing link is how to use the value of So far the site renders as: 
Interestingly, the removal of |
Beta Was this translation helpful? Give feedback.
-
|
I've spent some time playing around with the layout file and now can get the image to display with: {{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
<!-- Banner image at the top -->
{{ range $category, $404data := .Site.Data.files }}
{{ range $404data }}
{{ if .featured_image }}
<!-- Add the image above the main content, before the header -->
<div class="cover bg-top">
<img src="{{ .featured_image }}" alt="Featured Image" style="width: 100%; height: auto;">
</div>
{{ end }}
{{ end }}
{{ end }}
<article class="center cf pv5 measure-wide-l">
<h1>
{{ range $category, $404data := .Site.Data.files }}
<p>{{ $category | title }}</p>
{{ range $404data }}
{{ if .featured_image }}
{{ end }}
title: {{ .title }}
</br>
featured_image: {{ .featured_image }}
{{ $featured_image := .featured_image }}
</br>
Content: {{ .Content }}
{{ end }}
{{ end }}
</h1>
</article>
{{ end }}It's not part of the top menu background (neither is the 404 text): This is very much that dog in a lab coat moment, but I think I need to find a way to modify the <header>
<div class="bg-black">
<nav class="pv3 ph3 ph4-ns" role="navigation">
<div class="flex-l justify-between items-center center">
<a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
PY20555STI
</a>
<div class="flex-l items-center">
<ul class="pl0 mr3">
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/" title="Home page">
Home
</a>
</li>
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/about/" title="About page">
About
</a>
</li>
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/posts/" title="Posts page">
Posts
</a>
</li>
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="/contact/" title="Contact page">
Contact
</a>
</li>
</ul>
<div class="ananke-socials"></div>
</div>
</div>
</nav>
</div>
</header>but looking at the source of other pages, they have an image embedded in them: <header class="cover bg-top" style="background-image: url('http://localhost:1313/images/about.jpg');">Similarly, the title comes from: <div class="tc-l pv4 pv6-l ph3 ph4-ns">
<h1 class="f2 f-subheadline-l fw2 white-90 mb0 lh-title">
404 Page not found
</h1>
</div>which doesn't exist in my custom 404. |
Beta Was this translation helpful? Give feedback.
-
|
Again, you might have better results with a data/i18n solution for the contents of a 404 page. Mostly because the 404 page is not your 404-content, but the page that could not be loaded, with some 404 content. This topic comes up often on the Gohugo discourse. My own 404 pages are the template and then either The 404.html is a template just for the 404 page, so it's easy to put content in there instead. |
Beta Was this translation helpful? Give feedback.
-
|
My understand is that using Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
I would hard code that image into 404.html - or is this template a theme you re-use? Then use a config variable in I think it's not possible to have individual images for various errors each. The 404 implementation of GoHugo is quite inflexible. You could use Javascript to evaluate what the current URL is and then build dynamic parts based on the path-elements. But everything else is a very static thing and I would just put it into 404.html and put everything you want to configure into data or i18n (depending on the re-use of the theme). Now try to build a 403 error page ;) |
Beta Was this translation helpful? Give feedback.
-
|
OK, hard-coded html it is and it does the trick. Thank you for your help! |
Beta Was this translation helpful? Give feedback.
I would hard code that image into 404.html - or is this template a theme you re-use? Then use a config variable in
site.Paramsto define that image.I think it's not possible to have individual images for various errors each. The 404 implementation of GoHugo is quite inflexible. You could use Javascript to evaluate what the current URL is and then build dynamic parts based on the path-elements. But everything else is a very static thing and I would just put it into 404.html and put everything you want to configure into data or i18n (depending on the re-use of the theme).
Now try to build a 403 error page ;)