I'm looking to use Gulp to render my Nunjucks templates with either gulp-nunjucks or gulp-nunjucks-render. Is there a way I can pass one or a series of .json files to the templating package to use the JSON data in my nunjucks templates?
Ideally I'd have a models/ directory with each page having corresponding page.json file with contents to be used in that template.
I'd like to know if it's possible with either of the above plugins and if so how it can be implemented. Any examples for a single or series of .json files would be very useful.
Look into using gulp-data https://www.npmjs.org/package/gulp-data it produces JSON from a any source, be it a JSON file, or database, that sends it down the stream via a new attribute on the file object (file.data). Your nunjucks plugin will need to be modified to consume that data property.
This worked for me, but in my case it didn't do quite everything I needed. With my gulpfile like the following:
//Compile Nunjucks Templates
gulp.task('nunjucks', function() {
nunjucksRender.nunjucks.configure(['templates/'])
return gulp.src('src/pages/*.html')
.pipe(nunjucksRender(nunjucksOptions))
.pipe(gulp.dest(output.html))
.pipe(reload({stream:true}));
});
Using gulp-data here to inject my JSON only provides data to the pages, and not to partials and macros I'm including. In my case, I'm using a central JSON settings file to emulate, for example, what my front end will look like when a user logs in:
{
"loggedin":false
}
and
{% if data.loggedin %}
<a href="#" class="nav__item nav__item--login">
<div class="nav__item--login_img">
<img src="http://pipsum.com/200x200.jpg" alt="" />
</div>
<p class="nav__item--login_user">JohnDoe345</p>
</a>
{% else %}
<a href="#login" data-lity class="nav__item nav__item--login">
<div class="nav__item--login_cta">Sign In</div>
</a>
{% endif %}
To make the file accessible to all templates/pages/partials/macros/etc. I'm using gulp-nunjucks-render's manageEnv setting as follows:
nunjucksOptions = {
path: ['src/pages/', 'src/templates/'],
watch:true,
manageEnv:function(env){
var data = JSON.parse(fs.readFileSync('states.json'));
env.addGlobal('data',data);
}
}
Thanks to Alex Ward for the tip on using fs for keeping my JSON from being cached.
Related
I am trying to use some shortcodes inside my CSS so I can change them all at once with fat free variables.
For example from my config.ini:
accentColor=8f0
And in my style.css would be:
.addToCart:hover {
background-color: #[[accentColor]];
}
in my header.htm view file:
<link rel="stylesheet" href="{{#BASE}}/ui/css/style-user.php">
style-user.php:
<?php
header("Content-type: text/css; charset: UTF-8");
$fullpath='http://'.$_SERVER['SERVER_NAME'].'/ui/css/style.css';
if(file_exists('style.css')){
$search=array('[[accentColor]]','[[protectPhotoOpacity]]','[[protectPhotoPosition]]');
$replace=array('{{ #accentColor }}','0.3', '30');
echo str_replace($search,$replace,file_get_contents($fullpath));
} else {
echo "body {background-color: white;}";
}
?>
It's finding style.css fine and the other shortcode changes are working. {{ #accentColor }} is not working in the style-user.php file but works fine in header.htm. What am I missing?
Is there a better way to go about doing this?
EDIT:
I put the .php in the root folder instead of the /ui/css folder. Here's what I ended up with:
<?PHP
$f3=require('lib/base.php');
$f3->config('options.ini');
$f3->set('CACHE',TRUE);
echo Template::instance()->render('ui/css/style.css','text/css');
?>
And then inside the css file, just use the {{ #accentColor }} template variables like normal.
It's finding style.css fine and the other shortcode changes are working. {{ #accentColor }} is not working in the style-user.php file but works fine in header.htm. What am I missing?
I assume that you are using F3's templating system to render header.htm. It looks like you are not using the template system to render the CSS file.
I would propose to utilize the template system and template variables (like {{ #accentColor }}). Then you would be able to cache the parsed template files and/or the resulting CSS files for performance reasons.
Your code could look similar to the following snippet:
<?php
// Setup F3 here.
// You could utilize the routing system or skip routing and return only the CSS file.
// I would prefer the routing system with a cached route.
echo Template::instance()->render(
'style.css', // Your CSS file stored in one of the `UI` directories
'text/css',
[
'accentColor' => '#123456', // Specify variables or forward variables from a configuration file
]
);
Of course, there are other solutions. I would either register a CSS route or provide a PHP file that is bootstrapping F3 to render the CSS file with your variables.
I use expressjs and hbs(Handlebars) as the template engine.
One of the parameters that are passed to the template when loading the page contains HTML code.
When the page loads, instead of processing the parameter and displaying the elements, it is displayed as text.
How can I solve this?
//Server-side:
let parameter = "<h2 id="how-to-use">How To Use</h2>";
//HTML:
<div id="container">{{parameter}}</div>
//--------------------------------------
//result after page load
<h2 id="how-to-use">How To Use</h2>
//Instead of
How To Use
got it.
use the triple {{{ }}} brackets
I'm developing an internal application and I would like to be able to nest my views to keep everything nice and organized. I plan on doing this by keeping different parts of the page in their own HTML files with their own Views (separate sidebar and navbar, separate charts, etc).
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
import Recall.data_logger.models as DLM
class ReportHome(TemplateView):
template_name = 'data_logger/index.html'
class SelectorSidebar(TemplateView):
template_name = 'data_logger/sidebar.html'
def get(self, request, *args, **kwargs):
companies = DLM.Company.objects.order_by('company_name').all()
return render(request, self.template_name, {'companies':companies,})
index.html
<html>
<head></head>
<body data-gr-c-s-loaded="true">
{% include 'data_logger/navbar.html' %}
<div class="container-fluid">
<div class="row">
{% include 'data_logger/sidebar.html' %} <!-- This is the part I need help with-->
</div>
</div>
</body>
</html>
sidebar.html
<div class="col-sm-3 col-md-1 sidebar">
<ul class="nav nav-sidebar">
{% for company in companies %}
<li>{{ company.company_name }}</li>
{% endfor %}
</ul>
</div>
I understand that by just using {% include 'data_logger/sidebar.html' %} it's just loading the HTML and bypassing SelectorSidebar, how do I direct it through the View?
I'd like a solution that allows me to access anything from a simple list of names to relitively large datasets being fed into a D3 chart.
Solution
This is what I ended up using:
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
crossorigin="anonymous"></script>
<script>
$.get("_sidebar", function(data, status){
$("#_sidebar").html(data);
});
</script>
</head>
<body data-gr-c-s-loaded="true">
{% include 'data_logger/navbar.html' %}
<div class="container-fluid">
<div class="row" id="_sidebar"></div>
</div>
</body>
</html>
Where _sidebar is the URL to SelectorSidebar:
urlpatterns = [
path('', v.ReportHome.as_view(), name='ReportHome'),
path('_sidebar', v.SelectorSidebar.as_view(), name='SelectorSidebar'),
]
I think you are making some confusion on how Django templates and views work together.
In very simple terms a Django template is what defines the HTML code that makes up a page. You can keep your templates very modular and organized; to do this you can use the include template tag or you can use template inheritance, which is a very powerful way to have "modular" templates.
A Django view is basically a function (or a class of you are using class based views) that receive an HTTP request and build an HTTP response.
It doesn't make much sense to have "nested" views because usually you have just one HTTP request and you want to build just a response with the HTML needed to display the page.
So I think that you can happily use Django templates to put together all the modules that make up your page (header, sidebar, etc.), but each page should correspond to a single Django view.
Another approach could use AJAX and Javascript to make different HTTP requests and build up the page client-side, but I think that this is not the approach you are considering here.
As #baxeico answered, you can't have multiple views to serve a page, because one HTTP request is one view.
If you have content that needs to appear on a lot of pages, like your sidebar, and that content also requires some context information to render (like a list of companies to fetch from the db), you have two options:
If the stuff required to add to the sidebar is fairly limited, create a template context processor that you add to the list of context processors in your settings (TEMPLATES setting).
def sidebar_context(request):
return {'companies': DLM.Company.objects.order_by('company_name').all()}
and in your settings, you'd add something like 'myapp.custom_contexts.sidebar_context' at the top of the list.
Now, every single template has access to the context variable companies, including your sidebar template.
If the stuff shown in the sidebar is more dynamic, or more complex, you should consider fetching the data from within the browser using AJAX. You would create a view that returns JSON instead of HTML and in your sidebar template add javascript to fetch the data and populate the sidebar.
The view is as simple as your current one:
def sidebar(request):
return JsonResponse({'companies': Company.objects.all().values('name', 'id')})
which will return a list of dicts containing name and id of each company. In your AJAX handler for the successful response (which receives the data), you can then loop through data and access data[i].name and data[i].id which you can use to populate your list.
I won't go as far as posting the full javascript (please search for jQuery, ajax and django) but here's a bit to give you an idea, assuming jQuery:
$(window).on('load', function() {
$.ajax({
url: "{% url 'sidebar' %}", // assuming this is inside a template, if not {% url %} won't work and you'll have to get it in a different way
success: function(data) {
if (data.length > 0) {
for (var i=0; i<data.length; i++) {
var elem = $("<li>" + data[i].name + "</li>")
$("#companies").append(elem)
}
}
})
})
I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?
My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:
|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc
|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta
When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.
I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.
You don't have to update the index.html file.
You can create dynamic content.
You can use PHP:
You can learn it here:
https://www.w3schools.com/php/default.asp
And here is how to read a file
http://php.net/manual/en/function.fread.php
Or if you cant use PHP you can use Javascript:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
$.ajax({
url:'your-config-file.xt',
success: function (data){
console.log(data); //this is the config file. just for loop it and modify the dom
}
});
});
</script>
But your config file must contains the string how the links should be shown.
For example:
|catergory one
yt: https://www.youtube.com
In my Angular 4 app, I am using innerHTML to show description of the exercises which are in HTML format.
<li *ngFor="let exercise of exercises">
<div [innerHTML]="exercise.longDescription"></div>
</li>
These descriptions can also contain images
<img src="/file/na\6ad7k4ynon6yh2qcibcdqxwcey.jpg">
and that is where I am struggling because I need to set the base href for these images to localhost:8080 where my backend is. Angular is trying to get them from standard localhost:4200 (ng serve) so I am getting errors.
Any idea how to do that?
Found a solution, not sure if is the cleanest one but it gets the job done.
I created a function in my exercise model that adds environment.URL to the src (which is localhost:8080 for development and server's API for production).
public getHTML () {
return this.longDescription.replace(/<img src="([^"]+)">/, '<img src="'+environment.URL+'$1">');
}
and I access it like this
<div [innerHTML]="exercise.getHTML()"></div>
instead.
Environment const looks like this:
export const environment = {
production: false,
URL: 'http://localhost:8080'
};