I'm currently building a Grav theme, in which a div should have the particle background from particle.js.
As stated by the setup manual, the actual function call in the js to render the particles, requires a config file in .json format
/* particlesJS.load(#dom-id, #path-json, #callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
However, I'm unsure how I can provide the path to the json file.
When I tried to pass a regular html relative path (like in the example above), the GET command in the console returned a 404 error.
When I tried a Static Asset Path using {{ url("theme://assets/particles.json") }}, the GET returned a 403 (Forbidden) error.
How can I provide the path in the external script?
Found the solution myself: Instead of providing a relative path or using the stream functions, you can provide a "semi-relative" path to the theme's asset folder (if you use one):
/user/themes/<theme-name>/assets/particles.json
EDIT: In response to the comment by #motizukilucas, I now had a look back at my code (this has been quite a while back, so I try to be as precise as possible; also I don't know if this is still the correct and most elegant way to do it).
For the .twig file of the main page that this is used in:
{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<!DOCTYPE html>
<html class="h-full" lang="{{ grav.language.getActive ?: theme_config.default_lang }}">
<head>
...
{% do assets.addJs('theme://js/vendor/particles.js', 80) %}
{% do assets.addJs('theme://js/frontend_js.js', {'priority':80, 'group':'bottom'}) %}
</head>
...
{% block bottom %}
{{ assets.js('bottom') }}
{% endblock %}
For the frontend.js file (this is where the relative path goes that I mentioned in my initial answer); in the manual this is called app.js:
/* particlesJS.load(#dom-id, #path-json, #callback (optional)); */
particlesJS.load('particles-js', '/user/themes/<theme-name>/assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
Then just place the particles.js in the //js/vendor/ folder in the theme (see relative path in the .twig file above) and your config (particles.json) in the mentioned /user/themes/<theme-name>/assets/ folder.
Related
I've added the cookie consent code from here
It has
<script>
...
if(readCookie('cookie-notice-dismissed')=='true') {
{% include ga.js %}
{% include chatbutton.js %}
}
...
</script>
in the html. This is placed within _includes but I can't figure out how to include javascript like /js/foo.js, located in another directory. I believe this is bundled with bundler within the jekyll assets.
Up to now, I've added javascript on my layouts in the following way, but haven't used {% include %} for this yet and I don't know how to let the _includes/cookie_consent.html know ẁhere to find it.
<script src="/js/foo.js"></script>
<script>
$(function(){
new Foo(".js-foo");
});
</script>
I can see two options to solve this
you create a file in _includes that contains the links to the extra JS you want.
For example:
# /_includes/bar.html
<script src="/js/foo.js"><\/script>
Inside _cookie_consent.html you can then add{% include bar.html %}
You add the link directly to your body.
if(readCookie('cookie-notice-dismissed')=='true') {
const js = '<script src="/js/foo.js"></script>'
document.body.appendChild(js)
}
I am currently working on a 11ty project and really like it. But I have a problem with the links when I deploy the output. I'd like to deploy it to 2 different locations on separate servers. One of the locations is in the root directory, the other one in a sub-folder.
Is it possible to have relative links in the output?
I already tried pathPrefix, but either I don't use it properly or it just doesn't give me the result I am looking for.
.eleventy.js:
module.exports = eleventyConfig => {
...
// Include our static assets
eleventyConfig.addPassthroughCopy("images")
return {
pathPrefix: "/subfolder/",
templateFormats: ["md", "njk"],
markdownTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
passthroughFileCopy: true,
dir: {
input: 'site',
output: 'dist',
includes: 'includes',
data: 'globals',
}
}
}
When I run eleventy --config=eleventy.config.js --serve, an additional folder gets generated with the name _eleventy_redirect, including an index.html file with:
<!doctype html>
<meta http-equiv="refresh" content="0; url=/subfolder/">
<title>Browsersync pathPrefix Redirect</title>
Go to /subfolder/
When I run eleventy --config=eleventy.config.js (without the --serve), that folder isn't there.
However, either way all the links are absolute (e.g. Home is href="/"), and the site doesn't work on the server.
Is there a way to have either relative links (e.g. Home is href="./" on the root index.html and href="../" on sub pages) or at least include the subfolder in the urls (e.g. Home is href="./subfolder/")?
Not quite what I was looking for, but it helps with some parts of my issue.
The url filter normalizes absolute paths, e.g.
href="{{ "/" | url }}"
See the eleventy github for more details.
I came across the same problem and found a solution: use Liquid Template variables (which already come in Eleventy) to insert the relative part of the path.
Suppose you have:
The index.html page at the root of the directory.
The contact.html page, whose index ends up being created inside the /contact directory.
The _head.html file that imports some css's and is included in both pages.
You could do it as follows:
_head.html :
<link rel="stylesheet" href="{{ relative_prefix }}/scss/styles.min.css">
<link rel="shorstcut icon" href="{{ relative_prefix }}/favicon.ico">
index.html :
{% assign relative_prefix = '.' %}
{% include _head.html %}
<body>
...
contact.html (that turns into /contact/index.html) :
{% assign relative_prefix = '..' %}
{% include _head.html %}
<body>
...
This way, you can choose to always use relative paths, and never use absolute paths. Consequently, you can simply copy the files generated by Eleventy to several different directories and it will work for all of them. The cool thing is that the site also works on your local machine without a running server, that is, you can open the site in the browser as follows: file:///C:/myProjectDir/_site/index.html
So I was trying to add an audio recording function to my website developed with django.
I wanted to do something similar as https://github.com/addpipe/simple-web-audio-recorder-demo so I started by trying to run it without modification.
I took the same html as in the git linked above, put the js/ folder in my static/ folder, and simply changed the following lines (index.html, line 32-33)
<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>
for
{% load static %}
<script src={% static "js/WebAudioRecorder.min.js" %}></script>
<script src={% static "js/app.js" %}></script>
These js files load correctly, but the problem is that when I click record on my website, I get a "GET /myapp/record/js/WebAudioRecorderWav.min.js HTTP/1.1" 404 error in my django server.
WebAudioRecorderWav.min.js is called within WebAudioRecorder.min.js. I tried to use the {% load static %} trick in the js file, but it doesn’t work.
What would be the correct way to work around this?
Thanks in advance.
You should use the workerDir setting to set the correct path to the other imported js files. Probably your recorder is initialised in app.js, where you cannot use template tags like {% static %}. The best way is to create a global variable in your template before loading app.js:
In your HTML template:
<script>var jsFilesPath = "{% static 'js/' %}"</script>
<script src="{% static 'js/app.js' %}"></script>
In your app.js:
if (typeof jsFilesPath !== "undefined") {
audioRecorder = new WebAudioRecorder(sourceNode, {
workerDir: jsFilesPath // must end with slash
});
}
In a search to optimize the possibility of my application made with symfony2, I choose the JMSTwigJsBundle to allow the usage of twig template both frontend or backend.
I use composer to install bundles and symfony (it is the 2.7.3 version)
I began to follow a tutorial who bring me to add both FOSJsRoutingBundle and JMSTwigJsBundle. The first one, installed first, work perfectly, but the second brought me different kinds of problem, beginning with "Uncaught ReferenceError: goog is not defined". I resolved it by adding the following content :
these two lines on app/autoloader.php as described in the official documentation ( http://jmsyst.com/bundles/JMSTwigJsBundle ):
$loader->add('JMS', __DIR__.'/../vendor/jms/twig-js-bundle');
$loader->add('TwigJs', __DIR__.'/../vendor/jms/twig-js/src');
The app/AppKernel.php is set with the following line :
new JMS\TwigJsBundle\JMSTwigJsBundle(),
I also add to my app/config.yml these lines :
Filters:
twig_js:
resource: "%kernel.root_dir%/../vendor/jms/twig-js-bundle/JMS/TwigJsbundle/Resources/config/services.xml"
apply_to: "\.twig$"
So, we can found inside my layout.html.twig the following lines
{% javascripts
'js/fos_js_routes.js'
'%kernel.root_dir%/../vendor/jms/twig-js/twig.js
'#NameSpaceNameBundle/Resources/views/customFolder/example.html.twig'%}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
And, thank to the filters on the config file, we don't need to add the filter line.
These modifications are from : https://github.com/schmittjoh/JMSTwigJsBundle/pull/13 post 3
I also do modifications presentend here : https://github.com/schmittjoh/twig.js/issues/35 post 2 :
I found a way to fix this issue by copyng the file
/Symfony/vendor/bundles/JMS/TwigJsBundle/Resources/config/services.xml
to
/Symfony/vendor/bundles/Symfony/Bundle/AsseticBundle/Resources/config/filters/twig_js.xml
and changing the service id from twig_js.assetic_filter to
assetic.filter.twig_js.
Every of theses modifications bring me to a new error :
Uncaught SyntaxError: Unexpected token %
on the created file "exemple.html.twig.js:1". For information, the twig file looks like :
{% twig_js name="example" %}
the html code
And the content generated on the new file is... exactly the same content than the twig's file.
So, please, what did I have to do to make it work ? Thank's
To make it work to and have a compiled version of any .twig, I had to include the "YUIcompressor" to the app/config/config.yml :
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
yui_js
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
and add the appropriate file to the associate path.
Then I add to the layout.html.twig
{% javascripts filter='?yui_js'
'js/fos_js_routes.js'
'%kernel.root_dir%/../vendor/jms/twig-js/twig.js
'#NameSpaceNameBundle/Resources/views/customFolder/example.html.twig'%}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Finally I use the app/console assets:install and app/console assetic:dump to check if they're is nothing wrong, refreshed and it was ok (at least for me).
I've been trying figure out how to get a static website generator with built-in hash routing solution. I guess I could only describe it as a poor mans 'client side javascript framework with routing that works locally with out a server'.
My main goal is to avoid pages from being reloaded unnecessarily. While some pages would be refreshed, my hope is that the majority would not. Additionally, I still wanted to maintain page markup via markdown formatted pages.
I tried to do this with pure client side javascript and templates, but couldnt get any frameworks to parse markdown for me.
This is my hacked up solution perhaps some of you have a setup that works better or more elegant. Perhaps using Jekyll plus another routing framework like angular?
Note: I created a layout named 'empty' for hash routed pages because if the doctype, head, etc are duplicated then the pages will not load.
Problem: Files in other directories that load images - These files load images from their own directory, but when called via pagify.js to another directory their links are all broken
Jekyll + Pagify.js with Liquid include 'root' for relative urls (thanks to kikito):
root include:
{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}
load scripts:
<script type="text/javascript" src="{{ root }}/js/jquery.js"></script>
<script type="text/javascript" src="{{ root }}/js/pagify.js"></script>
setup core html:
{% include root %}
<h1>Pagify.js<small>A jQuery plugin for single page web sites</small></h1>
<nav>
<a href='{{ root }}#about'>About</a>
<a href='{{ root }}#usage'>Usage</a>
<a href='{{ root }}#options'>Options</a>
<a href='{{ root }}#gallery'>Gallery</a>
<a href='{{ root }}#Showcase/VM'>Showcase</a>
</nav>
load script from pagify.js at end of core html:
<script>
$(document).ready(function() {
$('#page_holder').pagify({
pages: [
'about',
'usage',
'options',
'gallery',
'Showcase/VM'
],
animation: 'fadeIn',
'default': 'about',
cache: true
});
});
sample YAML heading from a hash routed page:
---
layout: empty
title : about
root: .\
---
{% include root %}
this is what the layout named 'empty.html' looks like:
{% include root %}
<div class="page-header">
<h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1>
</div>
{{ content }}
I created a Jekyll plugin to ease this process a bit. It takes away the need to manually specify all the pages you want to link to. Let me know what you think of it.