I am unable to get Disqus working for my Jekyll Blog. I followed the instructions on the Disqus website.
I added comments to the post layout
---
layout: default
comments: true
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>
{{ content }}
{% include disqus.html %}
with disqus.html using the code generated by Disqus website
{% if page.comments %}
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = {{ page.url }}; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = {{ page.id }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://rohit-gupta-blog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
{% endif %}
Here is an example of a blog post on my website post. Here is my git hub repository if it is needed.
It looks like the page.url and page.url should be strings, but they aren't in quotes. Here's the config that is rendered on your page:
var disqus_config = function () {
this.page.url = /blog/2020/01/15/rohit-gupta-blog-launched;
this.page.identifier = /blog/2020/01/15/rohit-gupta-blog-launched;
};
This is likely what you want:
var disqus_config = function () {
this.page.url = 'https://rohitkumargupta.com/blog/2020/01/15/rohit-gupta-blog-launched';
this.page.identifier = '/blog/2020/01/15/rohit-gupta-blog-launched';
};
Full Updated disqus.html
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = 'https://rohitkumargupta.com{{ page.url }}'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '{{ page.id }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://rohit-gupta-blog.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
Related
As you can see in the code below, I have imported a <script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script> to my Index.html.
But there are Django variables in that JS file. like: {{ sizes }} and {{ urlsPosts }}, they go from Views.py to the Index.html.
Unfortunately Django doesn't see these variables in the JS file if I keep the JS as a separate file.
If I copy paste the JS right to the HTML without separating - everything works well.
How can I include these Django variables into the separate Js file?
Index.html:
<html>
{% load static %}
{% include 'head.html' %}
<body>
<header>
</header>
</body>
<footer>
<script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script>
</footer>
</html>
Views.py:
def index(request):
posts = Post.objects.all()
sizes = ''
urlsPosts = ''
for i in range(0, len(posts)):
if i == len(posts):
sizes = sizes + str(posts[i].thumbnail.width) + 'x'
sizes = sizes + str(posts[i].thumbnail.height)
urlsPosts = urlsPosts + posts[i].thumbnail.url
else:
sizes = sizes + str(posts[i].thumbnail.width) + 'x'
sizes = sizes + str(posts[i].thumbnail.height) + ' '
urlsPosts = urlsPosts + posts[i].thumbnail.url + ' '
return render(request,'index.html',{'posts':posts, 'sizes':sizes, 'urlsPosts':urlsPosts)
posts_lazy_loading.js:
var images = document.getElementsByClassName('cover_main_page'),
posts = document.getElementsByClassName('post'),
descriptions = document.getElementsByClassName('description'),
description_height = descriptions[0].clientHeight;
post_content = document.getElementsByClassName('post_content'),
loading = document.getElementsByClassName('dots_portoflio'),
sizes = "{{ sizes }}",
sizeslist = sizes.split(" "),
urlsPosts = "{{ urlsPosts }}",
urlslist = urlsPosts.split(' '),
ratios = [],
viewport_width = document.documentElement.clientWidth,
newwidth = 0,
margin = 3, //each post has 3vw margin left and 3vw margin right
mobile = 0,
mobilewidth = 94;
.... a lot of code here ....
Yup, django will generate this line as follows:
It won't open the JS as this will ask the browser to load the JS, to use django inside your JS, you have one of two options
Use {%include 'JSFILE'%} but in this case, your JS file shall be in the templates folder
Put the JS code itself in your HTML template.
This thread here discussed using variables in inline JavaScript in templates. If I have separate .js files containing scripts, sitting in static folder, such as following:
utils.js
const createButton = (buttonCount) => {
containerId = "myContainerId"
container = document.getElementById(containerId)
for (var i = 0; i < buttonCount; i++) {}
newButton = document.createElement("button")
newButton.value = "Test"
newButton.id = "testButton" + i
container.appendChild(newButton)
}
}
createButton(buttonCount)
mytemplate.html
{% extends "base.html" %}
{% load static %}
{% block title %}Testpage{% endblock %}
{% block content-main %}
<link href="{% static "css/mycss.css" %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div id="myContainerId"></div>
<script src="{% static 'js/utils.js' %}"> </script>
{% endblock %}
If I have a variable buttonCount passed into this template via a view function's context, how do I pass it to the utils.js file to be called by function createButton()?
views.py
def button_view(request):
...
buttonCount = 5
return render(request, 'mytemplate.html', {'buttonCount': buttonCount})
There can be a few ways:
Using Input Field
<input id="buttonCount" value = "{{buttonCount}}" style="display:none;">
Then read value of element with id= buttonCount in utils.js.
Inline Script **Not Suggested,Use Document.onload instead.
<script>
set_button_count({{buttonCount}});
</script>
But this will create a problem when your utils.js is not loaded yet.
document.onload
Place the script source in <head></head>
<script src="{% static 'js/utils.js' %}" defer> </script>
<script>
document.addEventListener('onload',function(
{set_button_count({{buttonCount}});
})
</script>
set_button_count() is to be placed in utils.js
Defer will ask browser to only fire document load when utils.js
is complete and it will be fetched and loaded after the document is
loaded.
Warning: Inline scripts are to be used with strict CSP (Content Security Policy).Any inline script can be given a src as nonce.
CSP can be done on Server Side on apache or Nginx which are very common web server/reverse proxy or you can also mention the same in HTML if you don't have control on that.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'nonce-{{nonce}}';">
and this nonce can be generated something like this:
import random,base64
def usersession_processor(request):
user = request.user
unbaked_nonce = '%32x' % random.getrandbits(16*8)
unbaked_nonce = unbaked_nonce.encode('utf-8')
baked_nonce = base64.b64encode(unbaked_nonce)
baked_nonce = baked_nonce.decode('utf-8')
Then <script src="{{nonce}}"></script> can be used for safe inlines.
I don't think this is recommended but you could do something like this if you're using the django template context. Put the script at the bottom of the page and include the buttoncount as a Django Templating Language variable. I don't think it's recommended to mix Django template variables with javascript though.
You can put a new block in your 'base.html' file, at the bottom inside the body tag like this:
{% block inline_javascript %}
{% enblock inline_javascript %}
Then inside the page you want the function to run on you put the script inside the same tags at the bottom of that page outside the 'block content' like:
{% block inline_javascript %}
<script>
const createButton = ({{ buttonCount }}) => {
containerId = "myContainerId"
container = document.getElementById(containerId)
for (var i = 0; i < {{ buttonCount }}; i++) {}
newButton = document.createElement("button")
newButton.value = "Test"
newButton.id = "testButton" + i
container.appendChild(newButton)
}
}
</script>
{% enblock inline_javascript %}
I built a site using Jekyll hosted on Github Pages:
site,
repo
Jekyll _config.yml:
# Comments
disqus_shortname: bad3r
Disqus configuration in _layout/post.html :
<div class="comments-wrapper">
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
var disqus_config = function() {
this.page.url = '{{ absolute_url }}{{ page.url }}'; /*Replace PAGE_URL with your page's canonical URL variable*/
this.page.identifier = '{{ page.url }}'; /*Replace PAGE_IDENTIFIER with your page's unique identifier variable*/
};
(function() { /* dont endit below this line */
var d = document,
s = d.createElement('script');
/* https://bad3r.disqus.com/embed.js */
/* 'https://{{ site.disqus_shortname }}.disqus.com/embed.js' */
s.src = 'https://{{ site.disqus_shortname }}.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
<!-- /.comments-wrapper -->
I have enabled comments in the post Jekyll front-matter:
---
layout: post
title: "Welcome to my new blog"
date: 2018-05-25
excerpt: "working on building my blog, here is an example post"
image: "/images/workProgress.jpg"
comments: true
---
link to the post where disque shows an error message here, code on github here
if you open the console on the page you will see the error:
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”).
i didnt have a Content Security Policy when i first encountered the error
but i tried to implement one and i added the CSP in the _includes/head.html :
<!-- CSP(Content Security Policy) -->
<META HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' ; script-src 'self' 'unsafe-inline' *.disqus.com a.disquscdn.com requirejs.org www.google-analytics.com; style-src 'self' 'unsafe-inline' a.disquscdn.com; img-src 'self' *; media-src 'self' ; frame-src disqus.com;">
and the _includes/head.html is included in the start of all _layouts/*.html
I have no idea why this error still occurs.
Looks like you may be entering an incorrect this.page.identifier. Here is a copy of the Disqus code on a working blog:
_includes/disqus.html:
{% if page.comments %}
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = "{{ site.url }}{{ page.url }}"; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = "{{ page.id }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://DIRSETUP.disqus.com/embed.js'; // YOUR ACCOUNT
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
</div>
</div>
{% endif %}
The above code you'll need to copy from Disqus because it will include the URL for the site setup but in your code you have it as variable from the config. I think you may be having an issue by the reference so try changing '{{ page.url }}' to "{{ page.id }}". In the directory _layouts I just pass the include of {% include disqus.html %} to post.html. In _posts I have a template of:
---
layout: post
published: false
comments: true
title: ""
excerpt: ""
date:
categories: ['']
tags: ['', '']
---
If you want the comment count you could also add:
<script id="dsq-count-scr" src="//{{ disqusShort }}.disqus.com/count.js" async></script>
before the closing </body> tag to _layouts/default.html. Then you can add disqusShort: username to _config.yml. In _layouts/post.html add:
{% if page.comments %} • 0 Comments{% endif %}
When I set mine I referenced "Adding Disqus to a Jekyll Blog". I get no errors so hope this helps.
When using Turbolinks 5 and the default Disqus comments embed code, you'll get a "Browser not supported" error and a warning in the console: "Use DISQUS.reset instead of reloading embed.js please."
When using the AJAX example in the Disqus docs, the embed.js warning goes away but not the "Browser not supported" warning.
How can I fix this without disabling Turbolinks?
To fix this, please take the default Disqus embed code:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
And add this:
s.setAttribute('data-turbolinks-track', 'reload');
So the code becomes:
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
s.setAttribute('data-turbolinks-track', 'reload');
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
Here is the Turbolinks documentation about data-turbolinks-track="reload"
I'm having a strange problem with one of my scripts. In the script parameters I'm trying to creating a link which makes up for the "read more" link on the frontend. Using the Jed Foster Read More script I'm trying to override the default "moreLink" and "lessLink" as was documented.
The default setting works perfect but when an override in the parameters is used somehow the closing tag is removed and the link is parsed empty.
This is how the script looks like:
<script type="text/javascript" src="{{ url('gantry-theme://js/readmore.js') }}"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
{% if particle.title %}
var $dropspeed = {{ particle.dropdownspeed|raw }};
var $collapsedheight = {{ particle.collapsedheight|raw }};
var $readmore = '"Read Moreeeee";
$j(document).ready(function() {
$j('.g-employee-text').readmore({
speed: $dropspeed,
collapsedHeight: $collapsedheight,
heightMargin: 30,
moreLink: 'Read More',
});
});
{% endif %}
</script>
And this is how its shown in the developer tools:
var $j = jQuery.noConflict();
var $dropspeed = 3000;
var $collapsedheight = 150;
var $readmore = '<a href="#">"Read Moreeeee";
$j(document).ready(function() {
$j('.g-employee-text').readmore({
speed: $dropspeed,
collapsedHeight: $collapsedheight,
heightMargin: 30,
moreLink: '<a href="#">Read More',
});
});
As you can see the closing tag is not available. The HTML looks as follows:
An empty link doing nothing.
Some notable information:
Read More script by Jed Foster
Gantry 5 framework
Hope someone can help me out here.
var $readmore = '"Read Moreeeee";
Why do you need the double quotes ?
Have you tried removing them ?
var $readmore = 'Read Moreeeee;