I have a Hugo Template which checks if there is a name attribute in the array then applies one set of HTML, and another if not.
I also require to check if the array contains a certain string then use a different set of HTML.
Template:
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="skills">
<div class="my-auto" id="skills-content">
<h2 class="mb-5">Skills</h2>
{{ range $.Site.Data.skills }}
<div class="subheading mb-3 skills-heading">{{ .grouping }}</div>
<ul>
{{ range .skills }}
{{ if isset . "name" }}
<li class="list-inline-item">
<i class="devicon-{{ cond (in $.Site.Data.devicon (lower .name)) (lower .name) "devicon" }}-plain"></i>
{{ .name }}
</li>
{{ else }} {{if in . "express"}}
<li class="list-inline-item">
<i class="devicon-express-plain"></i>
{{ . }}
</li>
{{ else }}
<li class="list-inline-item">
<i class="devicon-{{ cond (in $.Site.Data.devicon (lower .)) (lower .) "devicon" }}-plain"></i>
{{ . }}
</li>
{{ end }}
{{ end }}
</ul>
{{ end }}
</div>
</section>
JSON file:
[
{
"grouping":"Architecture",
"skills":[ "IP Networking","DNS","Firewalls","Load Balancing","Microservices","RESTful APIs","SaaS/PaaS/IaaS"]
},{
"grouping":"Languages, Operating Systems & Tools",
"skills":["Skills", "Go", "Here"]
},
{
"grouping":"Platform Development & Administration",
"skills":[ "Skills", "Redacted"]
},
{
"grouping":"Containers & Cloud",
"skills":[
{"name":"Redacted","link":"https://example.com"},
{"name":"AmazonWebServices","link":"https://aws.amazon.com"},
{"name":"Etc","link":"https://example.com"},
]
}
]
I am getting errors when building the site:
Error while rendering "home" in "": template: index.html:4:10:
executing "main" at : error calling partial:
template: "partials/portfolio/skills.html" is an incomplete or empty
template
Replace this code:
{{ else }} {{if in . "express"}}
<li class="list-inline-item">
<i class="devicon-express-plain"></i>
{{ . }}
</li>
{{ else }}
<li class="list-inline-item">
<i class="devicon-{{ cond (in $.Site.Data.devicon (lower .)) (lower .) "devicon" }}-plain"></i>
{{ . }}
</li>
{{ end }}
With:
{{ else if in . "express"}}
<li class="list-inline-item">
<i class="devicon-express-plain"></i>
{{ . }}
</li>
{{ else }}
<li class="list-inline-item">
<i class="devicon-{{ cond (in $.Site.Data.devicon (lower .)) (lower .) "devicon" }}-plain"></i>
{{ . }}
</li>
{{ end }}
The problem is in the first line of the above snippet:
{{ else }} {{if in . "express"}}
versus:
{{ else if in . "express"}}
It might be that you still get an error message since you likely have more code than posted here. But this correction at least fixes that if/else statement mistake.
The default pattern for making a cascaded if statement in Hugo looks like:
{{ if ... }}
{{ else if ... }}
{{ end }}
If you want to make a nested if statement inside another, that's possible too:
{{ if ... }}
{{ if ... }}
{{ end }}
{{ end }}
Your code created:
{{ if ... }}
{{ else }} {{ if ... }}
{{ else }}
{{ end }}
The problem here is that the second if statement doesn't have a closing tag. That can be fixed like this:
{{ if ... }}
{{ else }} {{ if ... }}
{{ end }}
{{ else }}
{{ end }}
Or we can use:
{{ if ... }}
{{ else if ... }}
{{ else }}
{{ end }}
Related
In Hugo, I have a list page with content from related pages that all have a number of categories assigned in their frontmatter. I want to show all content initially, but give the option to show only specific content based on user selection with Alpine.js. There are numerous examples online how this can be done, but I seem to fail at the point where I populate the categories and compare them to the user input.
I manage to get all the categories into a select dropdown. I can also get the individual pages' categories as [category1 category2 category3].
This is my code:
<div x-data="{ selected: 'placeholder' }">
<select x-model="selected" placeholder="Please Select" class="">
<option value="placeholder" selected disabled>Select</option>
{{ $categories := $.Site.Taxonomies.categories.Alphabetical }}
{{ range $categories }}
{{ if .Term }}
<option value=".category-{{ .Term }}" x-hide:selected="selected === .category-{{ .Term }}">{{ .Term }}</option>
{{ end }}
{{ end }}
</select>
{{ range .Pages }}
<div x-show="selected == {{ .Params.Categories }}" x-cloak>
<a href="{{ .RelPermalink }}">
<img src="{{ .Params.coverimage }}">
<div>
{{ .Title }}
</div>
</a>
</div>
{{ end }}
</div>
I have a nav.html partial with this in it:
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
{{ range $.Data.Pages }}
{{ if ( not ( .IsPage) )}}
<a class="dropdown-item" href={{ .Permalink }}>{{ .Name }}</a>
{{ end }}
{{ end }}
</div>
It works on the root of my site, but does not work when rendering a page or list "inside" the site.
How do I access the "root" context .Data.Pages no matter where I am in the site so my nav partial works all the time?
I found it, .Data.Pages is for the current node, I wanted this:
{{ range $.Site.Pages }}
{{ if ( eq .Kind "section" )}}
<a class="dropdown-item" href={{ .Permalink }}>{{ .Name }}</a>
{{ end }}
{{ end }}
https://gohugo.io/variables/page/
I'm trying to display up to three related articles at the bottom of a blog post using Hugo.
I have some test code where I get data for front matter fields like Title and Summary, but I can't access Image.
Not sure what I am doing wrong
{{ $related := .Site.RegularPages.Related . | first 3 }}
{{ with $related }}
<div class="related-content">
<h2>Related content</h2>
<ul class="article-gallery">
{{ range . }}
<li>
<div class="card">
<a class="button" href="{{ .RelPermalink }}">
<img src="" alt ="">
</a>
<div>
<h3>{{ .Title }}</h3>
</div>
<pre>
{{.RelPermalink}}
{{.Title}}
{{.Summary}}
{{.}}
{{.ReadingTime}}
</pre>
<!-- Cannot Access Image -->
<pre>
{{.Image}}
</pre>
</div>
</li>
{{ end }}
</ul>
</div>
{{ end }}
Custom, user-defined data elements in a page's front matter needs to be accessed through .Params:
{{ .Params.Image }}
See The Hugo Docs
Note: there is a predfined "images" (with an 's') that can be accessed directly. Did you mean to use that instead?
I need help with ordering JSON in ng-repeat. I want to order my data by item.id (from highest to lowest). I tried many tips that are over internet but maybe I'm just doing something wrong because none of them are working for me... My code:
$http.get('http://jastrzebieonline.pl/drogi/data/najnowsze.php')
.success(function(res){
$scope.news = res;
console.log("Ok");
})
.error(function(data, status) {
console.log("Error");
})
<div ng-repeat="item in news">
<a href="{{ item.id }}">
<img src="{{ item.image }}">
<h2>{{ item.title }}</h2>
<p>{{ item.date }}</p>
<p>{{ item.text }}</p>
</div>
</a>
</div>
You can use the orderBy filter:
<div ng-repeat="item in news | orderBy:'id'">
<a href="{{ item.id }}">
<img src="{{ item.image }}">
<h2>{{ item.title }}</h2>
<p>{{ item.date }}</p>
<p>{{ item.text }}</p>
</div>
</a>
</div>
You can use the "orderBy" filter to do the job.
By the way, you should use 'ngHref' and 'ngSrc' directives instead of the original 'href' and 'src' attribute.
<div ng-repeat="item in news | orderBy:'id':true">
<a ng-href="{{ item.id }}">
<img ng-src="{{ item.image }}">
<h2>{{ item.title }}</h2>
<p>{{ item.date }}</p>
<p>{{ item.text }}</p>
</div>
</a>
</div>
references:
https://docs.angularjs.org/api/ng/filter/orderBy
https://docs.angularjs.org/guide/filter
In my project I need to show for each element its image.
This is my html:
<div ng-repeat="event in events.events" class="event show-place" data-id="#{{ event.id }}"
ng-mouseenter="selectEvent(event)">
<div class="cover-events">
<img width="100%" height="100%"
ng-src="#{{ selectedEvent.place.image | addFullPathToImage }}"
alt="#{{ selectedEvent.place.name }}"
>
<div class="user-info">
<a href="#{{ event.created_by.profileSlug }}">
<immagine-profilo hashid="#{{ event.created_by.hashid }}"
username="#{{ event.created_by.profile.username }}"
photo="#{{ event.created_by.profile.photo }}"></immagine-profilo>
<div class="user-event" ng-bind="event.created_by.profile.username"></div>
<rating class="user-experience" stars="#{{ event.created_by.level }}"
icon="star"></rating>
</a>
</div>
</div>
<div class="info-event">
<div vertilize class="content-info">
<div class="title-place">
<h2 ng-bind="event.place.name"></h2>
</div>
<div class="date-time">
#{{ event.unix_date | formatDate }} | #{{ event.time_start }}
</div>
<div class="event-feature">
<div class="category pull-left">
<img ng-src="#{{ event.category.icon | addFullPathToIcon }}"
alt="#{{ event.category.name }}">
<span ng-bind="event.category.name"></span>
</div>
<div class="difficulty pull-left">
<rating class="difficulty-bar" stars="#{{ event.difficulty_level }}"
icon="circle"></rating>
<span>
{{ trans('frontend/events/events.strings.difficulty') }}
</span>
</div>
<div class="participants pull-left">
<div class="speech-bubble speech-bubble-bottom">
#{{ event.participants_count }}
</div>
<span>{{ trans('frontend/events/events.strings.participants') }}</span>
</div>
</div>
</div>
<a class="link-with-arrow"
href="{{ localeRoute('events.event', [null, null])}}/#{{ event.slug }}/#{{ event.id }}">
{{ trans('frontend/pages/place.sidebar.links.read_more') }}
</a>
</div>
the image code is this:
<img width="100%" height="100%"
ng-src="#{{ selectedEvent.place.image | addFullPathToImage }}"
alt="#{{ selectedEvent.place.name }}">
and this is the filter:
app.filter('addFullPathToIcon', function () {
return function (text) {
return window.paths.categoriesPath + "/" + text;
}
});
When I run the code, the same image is shown for each event, if I click on one of it, the images will change and show the second image for every event.
Someone can help me to see the error?
It looks to me like there's only one "selectedEvent", and it is defined on ng-mouseenter. Perhaps you want
<img width="100%" height="100%"
ng-src="#{{ event.place.image | addFullPathToImage }}"
alt="#{{ event.place.name }}">
instead inside your ng-repeat if you don't want all the images to change with the event that is selected...