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>
Related
I want to show all industries, major, and skills that belong to the selected user. I'm stuck with the syntax. this is my code. the first row is correct but all other rows i need to link the user. eg: $major->myUsers->mySkills as $skills
#foreach($user->myIndustries as $industry)
<h4> {{ $industry->title }}</h4> <br>
#foreach( $industry->myMajors as $major)
<B>{{ $major->title }} - </B>
#foreach($major->mySkills->unique() as $skills)
{{ $skills->name }}
#endforeach
<br>
#endforeach()
#endforeach
Try this code:
#foreach($user->myIndustries as $industry)
<h4> {{ $industry->title }}</h4> <br>
#foreach( $industry->myMajors as $major)
<B>{{ $major->title }} - </B>
#foreach($major->mySkills->unique() as $skills)
{{ $skills->name }}
#endforeach
<br>
#endforeach
#endforeach
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?
This is what I have so far:
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === {{ storeSection.category }}">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
Basically, I only want to display the items in main.ingredients that have the same category as the header, but I cannot access {{ storeSection.category }} once I use a new ng-repeat. Any ideas?
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === storeSection.category">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === storeSection.category ">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
Don't interpolate storeSection.category, ng-if works with angular-expressions just like the left-hand operandingredient.storeSection is getting evaluated by it
As pointed out in another answers, the cause of the problem is that you're using interpolation in your ngIf directive, which one works with angular-expressions.
Tips:
Use preferably ngIf instead of ngShow(in your first <div>).
I also recommend you to use the native filter instead of this check using ngIf(in ngRepeat) and to use the ngRepeat#special-repeats.
So you can have something like this:
<div ng-repeat-start="storeSection in main.foodBySection" ng-if="main.sortBy === 'storeSection'">
<h4 ng-bind="storeSection.category"></h4>
</div>
<div ng-repeat-end ng-repeat="ingredient in main.ingredients | filter: { storeSection: storeSection.category } | orderBy: 'name'">
<p>
<input type="checkbox" ng-model="ingredient.added" /> {{ ingredient.name }} <span class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
What I want to do is count the filter length of an array of objects by a particular property based on the repeater scope. This code technically works (it displays the correct count of the filter):
<li ng-repeat="question in questions" id="{{ question.id }}">
{{ question.text }}
<ul>
<li ng-repeat="answer in question.answers" id="{{ answer.id }}">
{{ answer.text }} (<span ng-controller='AnswersController'>{{ (useranswers|filter:{answer_id:answer.id}).length }}</span>)
</li>
</ul>
</li>
The problem is, when scope ID is 1 (for example), it matches on 1,10,11,21, etc. I'd like to make the exact code I have above work on an exact match.
Please let me know what supporting code would be helpful.
You have to say to Angular that you want a strict comparaison. That's easy to do with Angular 1.1.5, because the filter filter (see the documentation) has now a third parameter, comparator, where true is a very usefull shorthand. In your case, you can simply make something like that :
<li ng-repeat="question in questions" id="{{ question.id }}">
{{ question.text }}
<ul>
<li ng-repeat="answer in question.answers" id="{{ answer.id }}">
{{ answer.text }} (<span ng-controller='AnswersController'>{{ (useranswers|filter:{answer_id:answer.id}:true).length }}</span>)
</li>
</ul>
</li>