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 }}
Related
I'm using Hugo to build my own website
I'm having a problem I have a _index.html page, and that is my homepage
But when I try to loop over posts, it just prints text no posts are shown
{{ range .Pages.ByDate }}
<div class="w-full md:w-1/2 md:px-3 mt-6">
<article class="h-full flex flex-col rounded-lg shadow-lg>
<h1>Post</h1>
</article>
{{ end }}
Where is _index.html located? If it's under content/, then raw Go-Template code will not work there. If it's under layouts/, then it is a Go Template but it is not the correct name for the layout of your home page. Possible names for the home-page layout file include:
layouts/index.html
layouts/home.html
layouts/_default/index.html
layouts/_default/home.html
(and more)
For details, see:
https://gohugo.io/templates/homepage/
https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-home-page
After you figure out what directory and what file name you want to use, you probably want to use something other than this inside the range:
<h1>Post</h1>
For example, maybe this:
<h2>{{ .Title }}</h2>
You could do the following:
{{ range ( where .Site.RegularPages "Type" "posts" ) }}
<h4>{{ .Title }}</h4>
{{ end }
Where posts is the name of the directory containing the posts (i.e., your_blog/content/posts in my case where I renamed posts directory to blog the above will look like this:
{{ range ( where .Site.RegularPages "Type" "blog" ) }}
<h4>{{ .Title }}</h4>
{{ end }
I have a Hugo template and as you can see below, header and footer are static and child pages are added to the "main" block. I would like the <body> to get a class depending on the page being displayed. Is this possible WITHOUT javascript? I mean, do we by any chance have access to the name of the child page from the base?
Thanks in advance.
<body>
{{ partial "header.html" . }}
{{ block "main" . }}
{{ end }}
{{ partial "footer.html" . }}
{{ partial "nav.html" . }}
</body>
You can use Page Variables to get page information and then use it to change a class on HTML
Page Variable
According to the Hugo content summary guide, I can define a summary in 3 ways (listed in order of highest preference):
Use the <!--more--> tag to tell how much of the article Hugo should use as the summary
Use the summary variable in the front matter in order to use a custom summary
Let Hugo by default use the first 70 words of the article
First and foremost, here is the template I have for individual pages:
{{ partial "header" . }}
{{ partial "nav" . }}
<section class="section">
<div class="container">
<div class="subtitle tags is-6 is-pulled-right">
{{ if .Params.tags }}
{{ partial "tags" .Params.tags }}
{{ end }}
</div>
{{if not .Date.IsZero }}
<h2 class="subtitle is-6">{{ .Date.Format "January 2, 2006" }}</h2>
{{ end }}
<h1 class="title">{{ .Title }}</h1>
{{ if .Site.Params.Info.related }}
<div class="related">{{ partial "related" . }}</div>
{{ end }}
<div class="content">
<h1 id="summary">Summary</h1>
{{ .Summary }}
<h1 id="toc">Table of Contents</h1>
{{ .TableOfContents }}
{{ .Content }}
</div>
</div>
</section>
{{ partial "footer" . }}
Here is a sample article I made:
---
title: "Test"
date: 2019-11-23T19:51:44-06:00
draft: true
summary: "This is a simple placeholder summary defined in the front matter"
---
This is a simple placeholder written in the article
# Section 1
Hello world!
The title and date render just fine, however, the summary is ignored and the words from the article as used as the summary:
I then used the <!--more--> tag like so:
---
title: "Test"
date: 2019-11-23T19:51:44-06:00
draft: true
summary: "This is a simple placeholder summary defined in the front matter"
---
This is a simple placeholder written in the article
<!--more-->
# Section 1
Hello world!
It worked like a charm...
So methods 1 and 3 for content summaries work, but method 2 does not. Is there a reason why I can't get the summary front matter to render?
This feature was introduce in Hugo 0.55.0 via issue #5800.
Upgrade to Hugo 0.55.0 or above to solve the issue
In Hugo v0.52 I had the following template code that worked to get the posts of the "blog" section on my home page (simplified example):
{{ range where .Pages "Section" "blog"}}
{{ .Title }}
{{ end }}
However, I upgraded to v0.59 and now the functionality is broken. It now only loads my base "blog" page, not the articles. I've looked through the docs and can't find anything to indicate it's changed.
I figured it out right after posting. In v0.59, it needs to be
{{ range where .Site.Pages "Section" "blog"}}
{{ .Title }}
{{ end }}
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 }}