We use VueJS inside Django templates. Every template has it's own VueJS app.
base.html
<div id="vue">
{% block content %}
{% endblock %}
</div> ...
page.html
{% extends "base.html" %}
{% block content %}
...
<div v-if="..."..</div>
{% endblock %}
<script>
new Vue({...
</script>
The problem is that PyCharm doesn't recognize that we use Vue so it doesn't highlight or autocomplete things like v-if etc...
In*.vue files, everything works correctly.
Is there a way to inject the language to the file or another way to tell PyCharm that we use Vue?
EDIT
When I go to Editor -> File Types -> Vue.js Template, there is only *.vue pattern. So I try to add *.html but PyCharm warns me This wildcard is already registered by HTML filetype Reassign wildcard?
Related
I’m using Grav modular pages to build a site but can’t find how to target a specific module to add a css class.
I have found this https://learn.getgrav.org/16/content/media but can’t see if there’s a way to do this.
What I’m trying to achieve is have a different background for each modular div in the page.
In the template : shared class for all modules
As a module implies, for its displaying, to browse the paren'ts page collection in the Twig template of that parent, you can add any HTML and CSS there.
For instance, here is one way of looping through the collection :
{% for module in page.collection %}
<section class="module">
{{ module.content }}
</section>
{% endfor %}
In the template : specific class
You can customize the CSS class by playing with a Twig variable. The most secure way is to use the slug of the page, wich has already escaped characters :
{% for module in page.collection %}
<section class="module_{{module.slug}}">
{{ module.content }}
</section>
{% endfor %}
In the markdown
You can use the already existent options to define CSS :
classes: module1
and then use it in the Twig, by using the header() function :
{% for module in page.collection %}
<section class="module_{{module.header.classes}}">
{{ module.content }}
</section>
{% endfor %}
Target a specific module
Now, for targetting a specific module in Twig, you have to import a page.
Here's the generic way of accessing an other page or sub-page content :
{% set imported_page = page.find("/route/to/the/page") %}
You can then use the header() and content() functions to access that imported page's frontmatter and content :
<section class="module_{{imported_page.header.classes}}">
{{ imported_page.content }}
</section>
I would like to create a component / section for the hero using the page.title
I have separated this out into a section with the following.
<div class="contain--small">
<h1 class="h1 hero__title text--center">{{ page.title }}</h1>
</div>
</div>
and then have included it into my page like this
{% section 'hero' %}
I cant see the page title on the page - the component is included and I can see it in the src when I check the CMS.
What am I missing here?
Do props need to be passed in or something? How can I do that?
I'm still new to Vue and I need to pass for loop data to a Vue component through Django template, but I don't know
exactly how.
In my html page I'm looping a vue component with Django, like this:
{% for employee in object_list %}
<app-card name={{ employee.name }} skills-all={{ employee.skils.all }} skill={{ employee.skils.all.name }}></app-card>
{% endfor %}
Note: skills-all is a list with lists of skills, and I just wanted to loop through all the skills and show all skills
names in my html list
And my Vue component looks like this:
<template>
<div id="card">
<h1>{{ name }}</h1>
<ul>
<li v-for="skill in skillsAll">{{ skill }}</li>
</ul>
</div>
</template>
<script>
export default {
props: ["name", "skillsAll", "skill"]
};
</script>
Everything works just fine until I try to make that for loop inside the vue component. Actually I'm very confused about
how am I supposed to loop something inside Vue when the data needs to come from outside the component
I am studying how to build meeting web application on express. In the lecture, he uses swig, but I prefer to use jade instead of swig since I am trying to get use to it.
I am trying to convert swig code to jade, I am stuck in these code.
//In swig,
<div class="col-md-12 column list-group">{% for note in notes %}
<div class="list-group-item">
<div>Note from <em><strong>{{ note.memberName }}</strong></em> on: {{ note.createdOn.toDateString() }}
- for project: <strong>{{ note.project }}</strong>
</div>
<div><strong>Work yesterday:</strong> {{ note.workYesterday }}</div>
<div><strong>Work today:</strong> {{ note.workToday }}</div>
<div><strong>Impediment:</strong> {{ note.impediment }}</div>
</div> {% endfor %}
I guess {% for note in notes %} will be like for note in notes in jade file. however, I cannot convert other part such {{note.project}} and other codes start with {{ note..
Can anyone help with it?
Thanks in advance!
According to the Jade reference your foreach loop would look like this: each note in notes. And the properties of note should also be accessible as note.project. At least if they're Javascript objects.
I've a context processor which adds objects (i.e. site) to the template context but the value is not rendered inside the {% blocktrans %} template tag. Outside the template tag, the value prints just fine.
<h1>{% trans "About" %} {{ site.domain }}</h1> <!-- works -->
{% blocktrans %}
{{ site.domain }} <!-- doesn't work -->
{% endblocktrans %}
How do I get the object's attribute / variable to render inside {% blocktrans %}?
Interpolated variables cannot be dotted expressions - you need something like this:
{% blocktrans with site_domain=site.domain %}{{ site_domain }} is a ...{% endblocktrans %}
See also:
Django documentation: blocktrans template tag
Question: django blocktrans and i18n in templates