In
locale/lang.json I have
{
"title": "Title",
"image": "service-corporate_thumb-v2.jpg",
"alt": "alt",
"imageFooter": "Some caption %",
"imageFooterCTA": "author",
"imageFooterURL": "https://example.com/author",
},
I'm trying to generate the author like, like so:
<img :src="require(`~/assets/img/services/${service.image}`)" :alt="service.alt" class="mb-8">
<p>{{ service.imageFooter.replace('%', `${service.imageFooterCTA}`) }}</p>
But this prints out in the generated HTML:
{{ service.imageFooter.replace('%', `${service.imageFooterCTA}`) }}
How can I generate html inside the {{ expresion }} ?
You need to use v-html for generating html in a template.
More info here.
For your example try this
<p class="mb-8">
<a v-html="service.imageFooter.replace('%', '$' + service.imageFooterCTA + '')">
</p>
Notes:
the tag that has a v-html directive will be replaced, so you could use anything, not only a
the value for v-html needs to be valid JS code that will be executed in the current context. This the reason I treated the tag inside as a string and removed the interpolation {.
Related
I have a Hugo SSG website.
My JSON file is saved in: /data/source.json
I created a template file: /layouts/test.html that has this content:
<!-- Data is in /data/source.json -->
{{ range .Site.Data.source }}
{{ range .names }}
<!-- person_name -->
<p>{{ .identifier.person_name }}</p>
{{ end }}
{{ end }}
How do I render this .html content to the website?
The Hugo documentation here doesn't explain what I need to do after making the .html file.
It looks like you have two range operations when you need only one. You are not ranging over multiple source.json files, correct?
Assuming you have a file data/source.json like this:
{
"names": [
{
"identifier": {
"person_name": "Joe Wilson"
}
},
{
"identifier": {
"person_name": "Nancy Wilson"
}
}
]
}
Then it should be possible to render those names like this:
{{ range .Site.Data.source.names }}
<p>{{ .identifier.person_name }}</p>
{{ end }}
Add that to a layout in your themes/{theme-name}/layouts and it will render on the pages using that template.
I have added custom text field inside layout header using json :
{
"type": "text",
"id": "my_text",
"label": "MyText"
}
Then I have called it inside luquid file like this:
{% if settings.my_text%}
<li class="test">{{ 'layout.header.my_text' }}</li>
{% endif %}
In return I'm getting same (layout.header.my_text ) not the value which I added from customizer
So the solution is I changed : layout.header.my_text to settings.my_text .
My goal is to generate a tool tip using the title attribute of a span class, but to have the title content change depending on the span class.
Today, I have a JSON file that has an attribute of status, which is represented with status color (e.g. gray, blue, orange, etc). Example:
{
"area":"Grouping",
"title": "Information Architecture",
"link": "#",
"password": "",
"designer": "Some Name Here",
"status": "purple",
"dateupdated": "2019-07-18"
},
Then I use angular to show this data. Here is the status column:
<ng-template
let-row="row"
let-value="value"
#statusColumnTemplate>
<span class="{{ value }}" title="Test title"></span>
</ng-template>
Obviously with this code, no matter what class color is passed in the title will be the same. Ideally, I'd like a different message in the title for each class, but I am unsure how to do this.
Any help is greatly appreciated!
So you have 2 possibilities to achieve that:
You can write your condition directly into the title-tag like this:
<span class="{{ value }}" [title]="value === 'something' ? 'Tooltip on match' : 'Tooltip on else'">
</span>
You can write your entire spans conditionally with an *ngIf structural directive:
<span *ngIf="value === 'something'" class="{{ value }}" title="First Tooltip">
</span>
<span *ngIf="value !== 'something'" class="{{ value }}" title="Second Tooltip">
</span>
The goal is to use the variables defined in the front-matter section in a particular page.
Here my structure of the file system:
_Components
c1.html
c2.html
Here I have defined the attributes in the front-matters.
_Includes > Components
c1.html
Here I want to use a loop to refer to a variable defined in the _Components > c1.html page.
How can I achieve this goal ?
In my _Includes > Components > c1.html I have the following code:
<body class="full">
{% assign fullcomponents = site.components %}
{% for component in fullcomponents | where:"title","c1html" %}
{% component.title %}
{% endfor %}
<div class="container-fluid" id="componentscontainer">
<div class="col-md-12">
<div class="panel panel-primary" id ="panelcomponentlarge">
<div class="panel-heading" >
Chart C3 Line
</div>
etc...
Surely I'm missing some trivial things.
SECOND ATTEMPT
I figured out that I can provide a data layer for that so, I tried to split this information into a new data file.
Here the content of components.json
{
"Components": [
"ChartC3Line":{
"component":"ChartC3Line",
"description":"This is an attempt"
},
"ChartC3Lines":{
"component":"ChartC3Lines",
"description":"This is an attempt"
}
]
}
And I'm trying to get this information with the following code:
{% assign comp = site.data.components.Components[ChartC3Line] %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
but anything is coming up.
THIRD ATTEMPT
I found a solution but I don't like it at all here my new json file
{
"ChartC3":[
{
"component":"ChartC3Line",
"description":"This is an attempt"
}],
"ChartC4":[
{
"component":"ChartC3Line",
"description":"This is an attemptSSSSSSS"
}]
}
I don't want to have an object of several arrays of one element!
Here the code to retrieve the right information:
{% assign comp = site.data.components.ChartC4[0] %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
SOLVED
Following the structure of a json file, I changed my structure in an easier way:
{
"ChartC3":
{
"component":"ChartC3Line",
"description":"This is an attempt"
},
"ChartC4":
{
"component":"ChartC3Line",
"description":"This is an attemptSSSSSSS"
}
}
Now I can easily have access to the right object.
{% assign comp = site.data.components.ChartC3 %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
I would like to know how to shorten text content retrieved to get a preview instead of getting a block of text in the html template
From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
To:
aaaaaaaaaaaaaaaaaaaaaaaaaaa....
The code that is used to retrieve the contents is :
<a class="list_content" href="/qna/view" onclick="document.forms['q_title_{{ q.id }}'].submit(); return false" title="{{ q.content }}">{{ q.content }} </a><br/>
Many thanks!
If you are using Django 1.4, truncatechars filter will be the best way to go:
{{ q.content|truncatechars:25 }}
Assuming that "q.content" is a string you could use the slice command:
{{ q.content|slice:":255" }}
truncatechars template filter for django 1.4