Hugo definition of non-site level variables/parameters query - go

I am using Hugo Universal Theme. I am new to static site generators. This question is for someone who is familiar with hugo templates.
In layouts/partials/features.html we can see where $element.name and $element.name.description are rendered:
{{ if isset .Site.Params "features" }}
{{ if .Site.Params.features.enable }}
{{ if gt (len .Site.Data.features) 0 }}
<section class="bar background-white">
<div class="container">
{{ range $index, $element := sort .Site.Data.features "weight" }}
{{ if eq (mod $index 3) 0 }}
<div class="col-md-12">
<div class="row">
{{ end }}
<div class="col-md-4">
<div class="box-simple">
<div class="icon">
<i class="{{ .icon }}"></i>
</div>
<h3>{{ $element.name }}</h3>
<p>{{ $element.description | markdownify }}</p>
</div>
</div>
{{ if or (eq (mod $index 3) 2) (eq $index (sub (len $.Site.Data.features) 1 )) }}
</div>
</div>
{{ end }}
{{ end }}
</div>
</section>
{{ end }}
{{ end }}
{{ end }}
The data to be rendered in this case are defined in data/features/consulting.yaml as follows:
weight: 4
name: "Consulting"
icon: "fa fa-lightbulb-o"
description: "Fifth abundantly made Give sixth hath..."
What should I do to add new variable to the yaml file that can later then be rendered through the html file when hugo is compiling the site. I tried to simply add another parameter param1 and then insert a corresponding line in the html file as <p>{{ $element.param1 | markdownify }}</p> just below description paragraph but got error
ERROR 2018/08/23 10:42:42 Error while rendering "home" in "":
template: index.html:22:11: executing "index.html" at <partial
"features.ht...>: error calling partial: template:
partials/features.html:18:56: executing "partials/features.html" at
: wrong number of args for markdownify: want 1 got 0
Clearly it seems I have not been able to define the variable properly, but where should I do that? I can add another site variable to config.toml, but I want to learn how to make page specific variables that can be defined in yaml/frontmatter type entries. I tried reading about hugo variables but got bogged down in what is a variable and what is a shortcode. Many thanks for your help with this example.

Well, I found a working answer, but I still do not fully understand how it fits with Hugo variable system, so a better answer and or comments are highly welcome.
It appears quite simple. I had to define url variable in the yaml file:
name: "History"
position: "Hx"
url: "/blog/2018/08/23/01-history/"
and then use in the html file like this:
{{ if .url }}
<a href="{{ .url }}">
<h5>{{ .name }}</h5>
</a>
{{ else }}
<h5>{{ .name }}</h5>
{{ end }}
What it does is puts the .name in link tag, if .url is defined in .yaml. This works also if an absolute URL is given. So it appears that a page variable is referred to as .myVariable. the template authors used $element.name in another place as above, which confused me.
I also can refer to the parameter defined in the frontmatter as .Params.name
I found pointers at https://github.com/devcows/hugo-universal-theme/pull/166 and tested in adjusting the template; it works well.

Related

How does Laravel turn this code into a link?

Consider this block of code from a Laravel blade file:
<div class="result-content">
<h6>{{ $item->name }}</h6>
<div>{!! Str::limit($item->desccription, 120) !!}</div>
#if($item->type == 'lot')
<div>{{ $item->info ? "Current Bid: $".number_format($item->info, 2) : 'No bids yet' }}</div>
<div>{{ \Carbon\Carbon::parse($item->start)->setTimezone($_COOKIE['timezone'])->format('n/j/y g:ia T') }} - {{ \Carbon\Carbon::parse($item->end)->setTimezone($_COOKIE['timezone'])->format('n/j/y g:ia T') }}</div>
#else
<div>{{ $item->info }} Lot{{ $item->info > 1 ? "s" : '' }}</div>
<div>{{ \Carbon\Carbon::parse($item->start)->setTimezone($_COOKIE['timezone'])->format('n/j/y T') }} - {{ \Carbon\Carbon::parse($item->end)->setTimezone($_COOKIE['timezone'])->format('n/j/y T') }}</div>
#endif
<a href="{{ $item->search_url }}" title="">
View: {{ $item->search_title }}
</a>
</div>
Somehow or other, this renders in a browser as a block of text that is all included in a link tag, and "$item->search_url" becomes the link url. But the link is wrong - it just points back to the page this text is appearing on. I need to figure out where "search-url" is assigned its value, so I can fix it. But I am entirely new to Laravel, and I can't figure out where or how "search-url" is getting assigned a value. I've searched the entire system with Visual Code, and that name doesn't appear anywhere else. It's not a variable, it's not a property name, it's not a database field name.
Where is that variable getting assigned?

Add Variable to Livewire Navigation Menu

I am trying to add a variable($countTeacherDuplicates) which contains a count of an array beside the navigation link title. I have already registered the variable as a global array in the AppServiceProviders. I just couldn't quite get how the syntax works
Tried this so far but totally getting syntax error
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-jet-nav-link href="{{ route('join-teach') }}" :active="request()->routeIs('join-teach')">
{{ __('Instructor Conflicts','('$countTeacherDuplicates')') }}
</x-jet-nav-link>
</div>
Can anyone help me this is the last piece for my project.Thanks to whoever responds.
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-jet-nav-link href="{{ route('join-teach') }}" :active="request()->routeIs('join-teach')">
{{ __("Instructor Conflicts {$countTeacherDuplicates}") }}
</x-jet-nav-link>
</div>
Output: Instructor Conflicts 1
also
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-jet-nav-link href="{{ route('join-teach') }}" :active="request()->routeIs('join-teach')">
{{ __('Instructor Conflicts' . "('$countTeacherDuplicates')") }}
</x-jet-nav-link>
</div>
Output: Instructor Conflicts('1')
Note: You used , "comma". For translation e.g {{text}}, /vendor/laravel/framework/src/Illuminate/Translation/Translator.php's get method is used to called. So pass correct parameters.
public function get($key, array $replace = [], $locale = null, $fallback = true)
NB: On the other hand . "dot" is a string concatenator.

Hugo: How can I display an image in my post list

I am trying to display an image in my post list.
In order to achieve that I added some tags in my post.md:
---
title: "Hello"
header_image: /images/blog/2019/water.jpg
images: /images/blog/2019/water.jpg
resources:
src: /images/blog/2019/water.jpg
title: "The image I want"
---
Then I edited list.html and tried different things:
{{ define "main" }}
<div class="archive animated fadeInDown">
<ul class="list-with-title">
<div class="listing-title">{{.Title}}</div>
{{ range .Pages }}
<ul class="listing">
<div class="listing-item">
<div class="listing-post">{{ .Title }}
{{ with .Resources.ByType "image" }}
<div class="Image">
{{ range . }}
<img src="{{ .RelPermalink }}">
{{ end }}
</div>
{{ end }}
{{ $.Param "header_image" }}
-- {{ range .Page.Resources }}
THERE IS ONE ITEM => NOT WORKING
{{ end }} <<
<div class="post-time"><span class="date">{{.Date.Format "Jan 2" }}</span></div>
</div>
</div>
</ul>
{{ end }}
</div>
{{ end }}
But when I try to display Resources, I always get [] (nothing)
Any idea what I am doing wrong?
I don't think your {{ $.Param "header_image" }} is working, either.
The way to access your custom, non-standard variables on pages, as well as sites, is through the .Params object, e.g. .Params.header_image. Note the small letter at the beginning, as opposed to capital letters for built-in params.
Page-level params on the Hugo Docs
Custom page params
To access
---
header_image: /images/blog/2019/water.jpg
---
you can use this in your page template.
{{ .Params.header_image }}
Resources
Page resources on Hugo Docs
It seems that resources is actually an array of objects, and with yaml, you should actually have something like this (note the dash):
resources:
- src: /images/blog/2019/water.jpg
title: "The image I want"
Also mind that this feature seems to only be available only for page bundles
Debugging
You can use {{ printf "%#v" .Resources }} for debugging.

In Mustache, is there a way to check of the list has items, but not repeat it?

I would like to be able to check if a list is empty, and if it's not print a block, but I don't want to repeat that block for each item. I just want to be able to echo it once.
Give this following structure:
array(
"teasers" => array(
array("title"=>"Teaser Title 1"),
array("title"=>"Teaser Title 2")
)
);
{{# teasers }}
<div class="items-wrap">
<div class="items">
{{# . }}
<div class="item">
{{ title }}
</div>
{{/ . }}
</div>
</div>
{{/ teasers }}
I would like the items-wrap div to only print once, and repeat the item div for each item in the array. As is right now, the items-wrap is repeating once for each item in the teasers array. So... is there a way to check if the main array is not empty, but not repeat it?
The goal is to only print the items-wrap once, if needed.
Yes, there's a way. Mustache has the method length. If equal ZERO, is false and the block will not be rendered. Your example:
{{# teasers.length }}
<div class="items-wrap">
<div class="items">
{{# teasers }}
<div class="item">
{{ title }}
</div>
{{/ teasers }}
</div>
</div>
{{/ teasers.length }}
The tag {{teasers.length}} will check the number of items inside {{teasers}} and will render the block only if not empty.
More information here.
This answer is too late, but I hope it helps someone.
In terms of PHP:
{{#myArray.0}}...{{/myArray.0}}
https://stackoverflow.com/a/23786928/5546916
user "_has_items" , example: myarray_has_items willcheck the contion whether arry is empty or not then the tag wont render
or you can use {{#items.length}} to check length before render
{{#items.length}}
<ul>
{{items}}
<li>{{name}}</li>
{{/items}}`enter code here`
</ul>
{{/items.length}}

How do you extract view code to a Component in Volt

I’m trying to extract some repeated view stuff into a component, in a similar way to a rails partial.
I want this:
{{ activity.each do |activity| }}
<div class="{{ activity.style_class }}>
{{ activity.text }}
</div>
{{ end }}
To become this:
{{ activity.each do |activity| }}
<:activity>
{{ end }}
But whenever I try to move my view code to app/activity/views/main/index.html
I get errors about activity not existing.
The trick is to pass in model when calling the component:
// app/main/views/main/index.html
{{ activity.each do |activity| }}
<:activity model="{{ activity }}">
{{ end }}
Then in your component you scope it onto itself like this:
// app/activity/views/main/index.html
<div class="{{ style_class }}>
{{ text }}
</div>

Resources