I was trying to sort the hugo's categories on taxonomy.
So I defined a custom front-matter variable 'root', Planning to use the root's value as the first-level directory. And the categories as the subdirectory.
But when I using .Params.root to access the variable I can't get the right value, it just returns null. So what's caused this problem? Does it caused by that the taxonomy didn't af specific detailed page or the way of mine to access the variable are wrong?
I know that I can define a data file to achieve the effects I want but I just wanna figured a way to use the front-matter variable.
{{ partial "head.html" . }}
{{ partial "header.html" . }}
{{ $termName := .Data.Plural }}
{{ $terms := .Data.Terms.ByCount }}
{{ $length := len $terms }}
{{ $type := .Type }}
{{ $root := .Params.root}}
<!-- Categories Page -->
<div class="post {{.Data.Plural}}">
<!--<h2 class="post-title" style="text-align:right;padding-bottom:2em">- {{ .Data.Plural | humanize }} -</h2>
-->
{{ if and $.Site.Taxonomies.categories (eq $termName "categories") }}
<p>{{ $root }}</p>
<div class="categories-card">
{{ range $terms }}
{{ $term := .Term }}
{{ $pages := .Pages }}
{{ with $.Site.GetPage "taxonomy" (printf "%s/%s" $type $term) }}
<div class="card-item">
<div class="categories" >
<h3> <i class="fas fa-folder" style="padding-right: 3px"></i> {{ $term | humanize }} </h3>
{{ range first 5 $pages }}
<article class="archive-item">
{{ .Title }}
</article>
{{ end }}
{{ if gt (len $pages) 5 }}
<span class="more-post">
More >>
</span>
{{ end }}
</div>
</div>
{{ end }}
{{ end }}
</div> <!-- //categories-card -->
<!-- Tag cloud Page -->
{{ else if and $.Site.Taxonomies.tags (eq $termName "tags") }}
<div class="tag-cloud-tags">
{{ range $.Site.Taxonomies.tags.ByCount }}
{{ if .Name }}
{{ .Name }} <small>({{ .Count }})</small>
{{ end }}
{{end}}
</div>
{{ end }}
</div>
</div>
{{ partial "footer.html" . }}
{{ partial "analytics.html" . }}
Related
I have a list page, where contents needs to be rendered based upon value from URL.
this is my current implementation, I am able to render the contents but only for one taxonomy (i.e) technology.
{{ range .Site.Taxonomies.categories.technology }}
<div class="col-lg-4 col-md-6 blog-card has-border">
{{ .Render "article" }}
</div>
{{ end }}
I tried to use the below method to get the string from URL, but its not working.
{{ $category:= urls.Parse .Permalink }}
<p>{{ $category.Path }}</p>
{{ range .Site.Taxonomies.categories $category }}
<div class="col-lg-4 col-md-6 blog-card has-border">
{{ .Render "article" }}
</div>
{{ end }}
For example the URL is
localhost/public/categories/technology/
I want to get the technology and append it to the function.
This seems like a category list page... which should only use:
{{ range .RegularPages }}
...
{{ end }}
But to answer your question... the following should work:
{{ $category := index (split .RelPermalink "/") 3 }}
I am using Jinja2 to perform code generation.
Besides the trivial problem to generate correctly indented code I also would like to perform certain in-line alignments; example use-cases would be:
start inline comments at a certain column
align operators in assignment series
A small excerpt of (1) would be:
Sound_Chime_t chime_array[] = {
{%- for k, cmd in commands.items() %}
{
"{{ cmd['Sound Command'] }}", // command
"{{ cmd['tag'] }}", // tag
{{ cmd['Priority'] }}, // priority
{{ cmd['Mix'] }}, // mix
{{ cmd['Loop'] }}, // loop
{{ cmd['region'] }}, // region
"{{ cmd['Sound File']}}" // filename
}{{ ',' if not loop.last else '' }}
{%- endfor %}
};
Of course //... is nicely aligned in template, but it won't be in generated code.
Is there some (not too convoluted) way to obtain this?
You can align the comments using two .format() calls. The second one is required by the occasional quotation marks and commas after a value. This will pad the values to 20:
Sound_Chime_t chime_array[] = {
{%- for k, cmd in commands.items() %}
{
{{ '{:<20} // command'.format('"{}",'.format(cmd['Sound Command'])) }}
{{ '{:<20} // tag'.format('"{},"'.format(cmd['tag'])) }}
{{ '{:<20} // priority'.format('{},'.format(cmd['Priority'])) }}
{{ '{:<20} // mix'.format('{},'.format(cmd['Mix'])) }}
{{ '{:<20} // loop'.format('{},'.format(cmd['Loop'])) }}
{{ '{:<20} // region'.format('{},'.format(cmd['region'])) }}
{{ '{:<20} // filename'.format('"{}"'.format(cmd['Sound File'])) }}
}{{ ',' if not loop.last else '' }}
{%- endfor %}
};
So I'm trying to get my hugo tags colorized, in other words, tags must display in a distinct color
for that, I follow this guide https://rajasimon.io/blog/hugo-colour-tags/
but getting error unexpected EOF when building site, also in vscode it says css-propertyvalueexpected and css-ruleorselectorexpected
Like this
{{ range $tag := .Params.tags }}
{{ if eq $tag "hugo" }}
<span class="tag" style="background-color: {{ $.Site.Params.hugo }};">{{ $tag }}</span>
{{ else if eq $tag "gatsby" }}
<span class="tag" style="background-color: {{ $.Site.Params.gatsby }};">{{ $tag }}</span>
{{ else }}
<span class="tag" style="background-color: #000000;">{{ $tag }}</span>
{{ end }}
I've tested this, most present version of hugo. Your IF statement needs an {{ end }} AND your RANGE statement needs an {{ end }} (see below), with that you should be fine.
{{ range $tag := .Params.tags }}
{{ if eq $tag "hugo" }}
<span class="tag" style="background-color: {{ $.Site.Params.hugo }};">{{ $tag }}</span>
{{ else if eq $tag "gatsby" }}
<span class="tag" style="background-color: {{ $.Site.Params.gatsby }};">{{ $tag }}</span>
{{ else }}
<span class="tag" style="background-color: #000000;">{{ $tag }}</span>
{{ end }}
{{ end }}
Based on this blogpost, I am trying to generate a pseudo-random thumbnail for each new post. First, in my data folder I have a bg.json which contains information about the colours and SVGs like so:
{
"colours": [
"#dfe6e9",
"#00b894"
],
"patterns": [
"data:image/svg+xml..."
]
}
Next, in the partials folder, I created a new partial called thumbnail.html which contains the following code:
{{ $hash := split (md5 .Title) "" }}
{{ $totalColours := len .Site.Data.bg.colours }}
{{ $primaryIndex := index $hash 1 }}
{{ $basedPrimaryIndex := printf "%x" $primaryIndex }}
{{ $modIndex := mod $basedPrimaryIndex $totalColours }}
{{ $primary := index .Site.Data.bg.colours $modIndex }}
{{ $secondaryIndex := index $hash 2 }}
{{ $basedSecondaryIndex := printf "%x" $secondaryIndex }}
{{ $modIndex := mod $basedSecondaryIndex $totalColours }}
{{ $secondary := index .Site.Data.bg.colours $modIndex }}
{{ $bgIndex := mod (printf "%x" (index $hash 0)) (len .Site.Data.bg.patterns) }}
{{ $bg := replace (replace (replace (replace (index .Site.Data.bg.patterns $bgIndex) "%3C" "<") "%3E" ">") "%23" "" | safeHTML) "data:image/svg+xml," "" }}
{{ $colouredBg := replace $bg "9C92AC" $secondary }}
<style>
.post__header {
--color: {{ $primary }};
--bg: url("data:image/svg+xml;charset=utf-8;base64,{{ base64Encode $colouredBg }}");
}
</style>
My theme generates portfolio cards in another partial called portfolio.html. I looked through the file and replaced the original img src with a path to my partial like so:
<div class="box-masonry">
{{ if and (isset .Params "image") .Params.image }}
{{ if eq .Params.showonlyimage true }}
<a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay">
{{ else }}
<a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
{{ end }}
<img src="{{ partial "thumbnail.html" . }}" alt="" class="img-responsive">
</a>
(...)
However, I am not seeing any images when I run my hugo server. I thought this would be the neatest way to approach things, but I think the post title (which is hashed to pick a random palette/pattern) is not being passed. How can I fix this?
My repo is hosted here: https://github.com/thedivtagguy/archives
The repo for the original blogpost's code is hosted here: https://github.com/trys/random-to-a-point
I have some code, in Python and sqlite, which when executed and printed, returns the correct data. But when I try pass it to HTML, it is retrieving data from the wrong table and displaying it to the HTML.
For example, I execute the following python code:
comments = c.execute('''SELECT * FROM comments''')
conn.commit
for each in comments:
print(each)
newsubs = c.execute('''SELECT * FROM submissions WHERE Signiture = signiture AND Client_ID = client_ID ORDER BY date DESC''')
conn.commit()
print("hello")
var = "hello,!"
return render_template('profile.html', comments = comments, newsubs = newsubs)
Then, I have the following HTML code calling in comments and newsubs to display the data:
{% for y in newsubs %}
<br>
<div id="subcss">
<legend><strong> {{ y[2] }} </strong> {{ y[4] }} <br><br></legend>
{{ y[3] }} <br><br>
<p id = "sig"><strong>Signiture:</strong> {{ y[5] }}</p>
{{ y[1] }} <br><br>
<div id="subcss">
<form action="/comments" method="post">
<textarea name="comment" rows="7" cols="76">Write a comment...</textarea><br>
<input type="submit" value="Submit"><br><br><br>
<button onclick="myFunction()">View Comments</button>
<div id="comdiv">
{% for z in comments %}
<strong>Date:</strong> {{ z[0] }} <br>
<strong>Comment:</strong> {{ z[1] }} <br><br>
{{ z[2] }}
<br>{ z[3] }} {{ z[4] }}
<br>
{% endfor %}
</form><br>
</div>
{% endfor %}
</div>
</div>
The problem is is that the output to the webpage from this code:
{% for z in comments %}
<strong>Date:</strong> {{ z[0] }} <br>
<strong>Comment:</strong> {{ z[1] }} <br><br>
{{ z[2] }}
<br>{ z[3] }} {{ z[4] }}
<br>
{% endfor %}
Is displaying data from the submissions table, not the comments table.
Any help or anything is greatly appreciated.