I am trying to create a canonical URL for my web site by some tutorials in the web but I was not able to create a canonical URL. It always shows the current URL.
I have layouts\partials\docs\inject\head.html.
{{- if isset .Params "canonical" -}}
<link rel="canonical" href="{{ .Params.baseURL }}" />
{{- else -}}
<link rel="canonical" href="{{ .Permalink }}" />
{{- end }}
And also I have config.toml.
baseURL = 'https://example.com/'
languageCode = 'en-us'
title = 'Hello world!'
theme = 'hugo-book'
[params]
canonicalUrl = 'https://example.com/'
Bu it always shows the current link and not the canonical url. Like
<link rel="canonical" href="http://localhost:1313/docs/hello/" />
while I expect to see:
<link rel="canonical" href="https://example.com/docs/hello/" />
What is the proper way to show a canonical URL in Hugo?
In this case I believe you are running into the difference between running in the CLI "hugo" vs "hugo server".
Build your file with "hugo" and then check the canonical link in the files output.
Related
I am trying to build a blog website using hugo. Everything is going all right on my site except for showing the blog list on the homepage. I want to show all blogs on the homepage but my theme is not doing it automatically. I am using Mediumish theme. In this theme, if I add any content in the config.toml it will show in the homepage. There are some text contents on the homepage. Now, I want to replace them with blog list. How Can I do that?
Thanks in advance!
N.B: currently the blogs are showing in the cold-email-bootcamp slug - https://splendid-pavlova-fbf620.netlify.app/cold-email-bootcamp/
Code Link: https://github.com/shawon111/hugo-sharable
live website link: https://splendid-pavlova-fbf620.netlify.app/
No clue how the theme was set-up, but if you want to show all content on your homepage - ALL CONTENT:, in index.html:
{{ range .Site.Pages }}
{{ .Content }}
{{ end }}
You'll probably want to:
{{ range .Site.Pages }}
<article>
<h4>{{ .Title }}</h4>
<p>{{ .Summary }}</p>
Read more
</article>
{{ end }}
I have to put a django tag inside the head, so the template will render the dynamic metatags server side.
what I want to do is:
{% block metatags %}
<meta name="description" content="{{ metatags.description }}" />
<meta name="keywords" content="{{ metatags.keywords }}" />
<meta property="og:url" content="{{ metatags.og_url }}" />
<meta property="og:title" content="{{ metatags.og_title }}" />
<meta property="og:description" content="{{ metatags.og_description }}" />
<meta property="og:image" content="{{ metatags.og_image }}" />
<meta property="og:image:url" content="{{ metatags.og_image_url }}" />
<meta property="og:image:type" content="{{ metatags.og_image_type }}" />
{% endblock %}
Now, no problems for the meta tags inside helmet, since it's a accepted element for helmet. The problem is for the {% block metatags %} and {% endblock %}.
The compiled page won't have those two, probably because helmet ignores them. I tried also to put manually {% block metatags %} and {% endblock %} in the compilated page and it works.
I think I cannot achieve this with just helmet, since it will ignore every tag I put inside which are not recognised (script,meta,noscript,..). How could I do that?
The only solution maybe it's call a script after gatsby build and add those manually..
any better solutions?
What you wrote is how you'd do it in Django using django templates. You can't use that syntax in React/Gatsby. How are you accessing your django data in Gatsby?
Assuming you have the site data from your source, In gatsby using react-helmet your code would look like this.
import { Helmet } from "react-helmet"
<Helmet
meta={[
{
name: `description`,
content: metatags.description,
},
{
name: `keywords`,
content: metatags.keywords,
},
{
property: `og:url`,
content: metatags.og_url,
},
{
property: `og:title`,
content: metatags.og_title,
},
{
property: `og:description`,
content: metatags.og_description,
},
{
property: `og:image`,
content: metatags.og_image,
},
{
property: `og:image:url`,
content: metatags.og_image_url,
},
{
property: `og:image:type`,
content: metatags.og_image_type,
},
].concat(meta)}
/>
Update:
after thinking about that solution proposed and after realized that was quite horrible, I've decided to use the common and right way, fetch the data remotely and fill Helmet with graphql.
Everything worked correctly, the built html now has the correct metatags.
But for the facebook debugger the og props are still missing. It's impossible, since I checked the .html file and they are there, in a correct way. I tried many times to re-fetch again the FB debugger, but still nothing
In my Hugo-based website, I often use <span> tags within my post titles. I am experiencing an issue where this HTML is always escaped in one particular context. As an example, take a post where the title given in the header of the Markdown file is as follows:
title: 'This is a title with Spanish: <span lang="es">Hola!</span>'
In the single.html partial of my Hugo theme, <h2 class="posttitle">{{ .Title | markdownify }}</h2> works correctly, it passes This is a title with Spanish: <span lang="es">Hola!</span> to the final HTML of the page.
However, in the header.html partial of my Hugo theme, <title>{{ .Title | markdownify }}</title> does not work. Instead, Hugo passes an escaped string to the final HTML of the page: <title>This is title with Spanish: <span lang="es">Hola!</span></title>
How can I achieve the same behavior in header.html as in single.html?
EDIT: My theme is exceedingly simple, the hugo-xmin theme with minimal changes. My theme’s header.html partial is as follows:
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title | markdownify }} | {{ .Site.Title }}</title>
<link rel="stylesheet" media="screen" href="{{ "/css/style.css" | relURL }}" />
<link rel="stylesheet" media="screen" href="{{ "/css/screen.css" | relURL }}" />
{{ partial "head_custom.html" . }}
</head>
<body>
<h1 id="sitetitle">.Site.Title</h1>
<p id="sitedescription">{{ $.Site.Params.description }}</p>
<nav>
<ul class="menu">
{{ range .Site.Menus.main }}
<li>{{ .Name }}</li>
{{ end }}
</ul>
<hr/>
</nav>
and my theme’s single.html file is as follows:
{{ partial "header.html" . }}
<main>
<div class="article-meta">
<h2 class="posttitle">{{ .Title | markdownify }}</h2>
Published on <time>{{ .Date.Format "2006-01-02" }}</time>
</div>
{{ .Content }}
</main>
{{ partial "footer.html" . }}
If you want to avoid escaping, you should use the safeHTML function.
{{ .Title | safeHTML }}
This is not a working solution. Even with this function placed into the header.html partial, the HTML continues to be escaped.
This could be an issue with an older version of Hugo, I am on v0.74.3 and it seems to be working as intended. You might want to upgrade if you're not on the latest version or check on the discourse if you are unable to upgrade.
I downloaded your nonworking-blog minimal example and was able to fix your issue by doing two things:
Put the following at the bottom of the config.toml:
[outputFormats]
[outputFormats.html]
isPlainText = true
Comment out line 34 in layouts/_default/list.html so it now looks like this:
{{/*
{{ template "_internal/pagination.html" . }}
*/}}
I did #2 because it was producing an error that I don't have time to look into now, but the key to solving your issue is outputFormats, which are discussed at https://gohugo.io/templates/output-formats/, especially this:
isPlainText
use Go’s plain text templates parser for the templates. Default: false.
If anyone knows how to fix the line-34 problem, I'd love to understand that.
BTW, I've been using isPlainText = true for more than a year on my Infinite Ink site and so far have not had any problems (but I do not use any {{ template … }} calls).
I'm building a small image gallery for my website, and would like it to be ordered by creation date. The gallery is build as a page bundle with the individual images stored in a subfolder. Is there any way to access the creation date of the files from within a template, like you would use .Date or .Lastmod for posts?
I'm looking for solutions that doesn't require encoding the date in the file name or setting parameters for each image in the front-matter.
<!-- need something here
| -->
{{ range sort (.Resources.ByType "image") [?] "desc"}}
{{ $image := .Fill "500x500 center" }}
{{ $imageName := replace (path.Base .Name) (path.Ext .Name) ""}}
<li>
<figure>
<a href="{{.RelPermalink}}">
<img src="{{$image.RelPermalink}}" alt="{{$imageName}}" width="{{$image.Width}}px" height="{{$image.Height}}px"/>
</a>
<figcaption>{{$imageName}}</figcaption>
</figure>
</li>
{{ end }}
i am using the follow code to include dynamic less stylesheet in my angularjs project.
<link ng-repeat="stylesheet in getStylesheets track by $index" rel="{{ stylesheet.type }}" type="text/css" ng-href="{{ stylesheet.href }}" >
The issue is that the less.js cannot compile it on the fly.
You could try to refresh this way:
localStorage.clear();
less.refresh();
From https://github.com/less/less.js/issues/346