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>
Related
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?
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.
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.
Hi I have twitter api working to output details on the page however, this
field:
{{ $item['text'] }}
Gives me something like this:
RT #JacksSmokehouse: Don't forget #HappyHour tomorrow until 6pm - #loveJacks #live_oldham #OldhamHour #YouDontKnowJack https://twitter.com/shorturl, (with t.co)
So the image https:// I want to actually display it? is it possible to write in blade template a regex, something like this:
for each {{$item['text']}} take the url if there is any and output it below the text? can be a different variable.
Here's my full code:
<div>
#if(!empty($twitterItems))
#foreach($twitterItems as $key => $item)
{{ $item['text'] }}
#if(!empty($item['extended_entities']['media']))
#foreach($item['extended_entities']['media'] as $image)
<img src="{{ $image['media_url_https'] }}" style="width:100px;">
#endforeach
#endif
{{ $item['favorite_count'] }}
{{ $item['retweet_count'] }}
{{ $item['created_at'] }}
#endforeach
#else
There are no data.
#endif
{{ blog:posts limit="1" order-by="created_on" order-dir="desc" category="nurse" }}
<p>
{{ helper:word_limiter limit="10" string={{ helper:strip_tags value=body }} }}
</p>
{{ /blog:posts }}
Doesn't seem to work. Ideas?
If you are trying to send a tag with attributes to another attribute it actually looks like this:
{{ blog:posts limit="1" order-by="created_on" order-dir="desc" category="nurse" }}
<p>
{{ helper:word_limiter limit="10" string={ helper:strip_tags value=body } }}
</p>
{{ /blog:posts }}
Double brackets say "I am starting Lex now".
Single brackets say "I am grouping these attributes to this call".