I have this as my template:
{{ partial "header.html" . }}
<div style="padding-top:50px"></div>
<div class="grid">
<div style="background-color: #fce473; padding: 10px" class="{{ .Params.left_col_size }}">
<h1>left</h1>
<div class="grid">
<div id="content2"></div>
{{ partial "ui-components/barchart_content2.html" }}
</div>
</div>
<div style="background-color: #7bbf51; padding: 10px" class="{{ .Params.right_col_size }}">
right
</div>
</div>
{{ .Content }}
{{ partial "footer.html" . }}
which successfully loads the partial "ui-components/barchart_content2.html".
However, what I really want to is something like this:
....
<div id="content2"></div>
{{ partial "ui-components/{{ Params.ui-component }}" }}
....
and then in the content do this:
+++
....
ui-component = "barchart_content2.html"
+++
so that the content editors can choose which partial is rendered without having to touch the html template.
Is something like this possible in Hugo? thanks
Yes, you can use the printf function to do this. Try this:
{{ partial (printf "ui_components/%s" .Params.ui_component) . }}
And the corresponding front matter:
+++
ui_component = "barchart_content2.html"
+++
Note that I have changed your variable of ui-component to ui_component, as hyphens are not allowed in Hugo variable names.
Related
I am trying to write code in “moto” list.html section. I would like to display all pages from “auta” section with paging. So, I need to display posts from another section with paging.
I use hugo v0.96.
I am not sure, why it’s not working with paging.
Not working code with paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ $paginator := .Paginate $cars }}
{{ range $paginator.Pages}}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Working code without paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ range $cars }}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Where’s the problem?
Please, help me. Thank you very much
The problem has been solved. .Paginate can be only one time on same page.
I had .Paginate in header (out of this code). And it's not posibble override (by official docs of Hugo)
According to the Hugo content summary guide, I can define a summary in 3 ways (listed in order of highest preference):
Use the <!--more--> tag to tell how much of the article Hugo should use as the summary
Use the summary variable in the front matter in order to use a custom summary
Let Hugo by default use the first 70 words of the article
First and foremost, here is the template I have for individual pages:
{{ partial "header" . }}
{{ partial "nav" . }}
<section class="section">
<div class="container">
<div class="subtitle tags is-6 is-pulled-right">
{{ if .Params.tags }}
{{ partial "tags" .Params.tags }}
{{ end }}
</div>
{{if not .Date.IsZero }}
<h2 class="subtitle is-6">{{ .Date.Format "January 2, 2006" }}</h2>
{{ end }}
<h1 class="title">{{ .Title }}</h1>
{{ if .Site.Params.Info.related }}
<div class="related">{{ partial "related" . }}</div>
{{ end }}
<div class="content">
<h1 id="summary">Summary</h1>
{{ .Summary }}
<h1 id="toc">Table of Contents</h1>
{{ .TableOfContents }}
{{ .Content }}
</div>
</div>
</section>
{{ partial "footer" . }}
Here is a sample article I made:
---
title: "Test"
date: 2019-11-23T19:51:44-06:00
draft: true
summary: "This is a simple placeholder summary defined in the front matter"
---
This is a simple placeholder written in the article
# Section 1
Hello world!
The title and date render just fine, however, the summary is ignored and the words from the article as used as the summary:
I then used the <!--more--> tag like so:
---
title: "Test"
date: 2019-11-23T19:51:44-06:00
draft: true
summary: "This is a simple placeholder summary defined in the front matter"
---
This is a simple placeholder written in the article
<!--more-->
# Section 1
Hello world!
It worked like a charm...
So methods 1 and 3 for content summaries work, but method 2 does not. Is there a reason why I can't get the summary front matter to render?
This feature was introduce in Hugo 0.55.0 via issue #5800.
Upgrade to Hugo 0.55.0 or above to solve the issue
I made a migration from Symfony3.4 to SF4/Flex.
I was using assetic/bundle in SF3.4 but now I try to replace it with symfony/webpack-encore.
when I started using everything was okay but in my page I can't display the values returned in my webservice.
In my topTripsController a used a webservice to get a list of objects then I try to render them
<div ng-controller="topTripsController as homeNotLogged">
<div data-ng-repeat="trip in homeNotLogged.trips track by $index" >
<a ng-if="trip.cover.url " id="trip-||$index||">
<h2 class="trip-title" style="font-size: 14px; font-weight: bold" ng-bind="trip.name | capitalize">
</h2>
<div class="trip-date">
<span class="trip-title-first_name" ng-bind="trip.profile.name"> </span>
<span > · </span>
<span class="trip-title-from-date" ng-bind="trip.fromDate | date:'MMM, y'"> </span>
</div>
</a>
</div>
</div>
{% block javascripts %}
{{ parent() }}
<script src="{{ absolute_url(asset('build/js/pages/index.js')) }}" ></script>
{% endblock %}
when I write {{trip }} i got this result
{"Id":15,"Profile":{"Id":2,"Name":"Alex Fergusson","URLname":"alex","Picture":{"Url":"d2d1117d023f81739aa7681fb60b98e92208d8c7.jpeg","Alt":""}},"Slug":"the-ultimate-one-week-istanbul-itinerary-and-guide","Themes":[{"Id":938,"Name":"Art & Design","Slug":"art-design"},{"Id":943,"Name":"History","Slug":"history"},{"Id":944,"Name":"Local Culture","Slug":"local-culture"}],"Name":"The Ultimate 5 Days Istanbul Itinerary and Guide","Cover":{"Url":"cb33d105cb7eaa59a912fac1df5e9c86d1562588.jpeg"},"Description":"vaoila dsvdvsdvsdv","FromDate":1480118400000,"NbrViews":1405,"NumCheckin":38,"NumPhoto":209,"NumLike":203,"NumComment":24,"Tigr":61.808134736842,"Published":true,"MapLines":true,"ToDate":1511005270,"DatesKnown":true,"Duration":358,"CreatedAt":"2017-07-17T09:05:47+02:00","UpdatedAt":"2018-04-02T15:37:34+02:00","Disable":false,"GooglestaticUrl":"the-ultimate-one-week-istanbul-itinerary-and-guide-travel-itinerary-1509033384.png","MonthViews":0}
if I do {{trip.id}} {{trip.name}} or trip.anything i have no results but I know that these attributes are not empty.
this issue appears only when I used wepback with angularJS#1.5.8 in SF4 project.
Any Ideas?
As the Json suggests, you should do,
{{trip.Id}} {{trip.Profile.Id}} {{trip.profile.Name}}
I am very new to angularjs, i have done some experimental projects in Polymer 0.5, so new to Polymer 1.0 as well.
I am facing an issue like inside ng-repeat i want to display some paper-card.
This issue is only on Chrome browser, In Firefox and IE-edge it is coming fine.
<paper-card heading="{{ team.name }}">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
//--------------------------- HTML ----------
<div class="row content">
<div><h3>Teams <img ng-show="loading" ng-src='images/loader2.gif' width="30px" height="30px"/></h3></div>
<div ng-repeat="team in teams" ng-repeat="team in teams | filter:teamsFilter">
<div>
<style>
.collapse-content {
padding: 15px;
border: 1px solid #dedede;
}
</style>
<paper-card heading="{{ team.name }}">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
</div>
</div>
</div>
//--------------------------- HTML -------------
I am using ng-polymer-element module,
I have the below code in my application app.js
angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
paperCard: {
ngModel: function property(element) {
return element.hasAttribute('multi') ? 'selectedValues' : 'selected';
},
ngHeading: '=heading'
}
});
window.addEventListener('WebComponentsReady ', function() {
angular.bootstrap(wrap(document), ['myApp']);
});
The Card header is coming fine but the binding variable is also displaying inside the card.
I inspect the HTML in the browser, i could see the paper-material is added twice and the second one is showing the brackets as it is.
Any help is highly appreciated. Thanks.
Most likely that Angular is not loaded properly; therefore, it hasn't kicked in to evaluate the expressions in the braces. Please post your entire HTML page.
I have an ng-repeat with 2 filters:
<div class="container">
<div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}
</div>
</div>
How can i add an ng-show or ng-hide to the with class="container" to only show this element if the length of items repeated in the ng-repeat is greater than zero?
You need to assign the filter results to a new variable in order to account for the length of the filtered list.
Then you can use the new variable to show/hide the section.
Working Fiddle
<div class="container" ng-show="filtered.length > 0">
<div ng-repeat-start="addresses
in filtered = (Address.Entries
| filter:{IsRegistered: true}
| filterDate:'InfoDetails')">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}
</div>
</div>
Try to write a separate function which will send back the true/false (which will determine the ng-show) in your controller.
Something like following,
<div class="container" ng-show="functionToDeterminetheState()">
<div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}