Is it possible to integrate disqus html comments in a blog using github-pages? I like the idea of using github, jekyll and markdown to manage my site and blog for simplicity. However, I'd like to include disqus commenting capability. However, since markdown generates the html - how do I include the html/js code for disqus ?
The easiest and cleanest way to do it is to create a partial with the HTML that disqus provides in your _includes/ folder (e.g. _includes/disqus.html) and then just including it in your posts layout file (e.g. _layouts/post.md):
{% include disqus.html %}
You can see an example here: post layout and disqus partial.
There is an "official" way to accomplish this task. You can find the Disqus indication at this link. In details, the procedure is the following:
Add a variable called comments to the YAML Front Matter (i.e. the header of your post file) and set its value to true. A sample front matter might look like:
layout: default
comments: true
# other options
Create a new template file (i.e. disqus.html) and put the Universal Embed Code there between {% if page.comments %} and {%- endif -%}.
Include the disqus.html file into your post template.
Hope it helps :)
Include the disqus comment in your post.html, and set an identifier for the comment count link:
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '<your-disqus-name>';
var disqus_identifier = '{{ page.id }}';
...
</script>
In your default.html template include the comment count script:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<your-disqus-name>';
...
</script>
Then add the link to the comments using the data-disqus-identifier attribute, so that the comment count will show up after each post in your blog's main page:
Leave a comment
To summarise:
Use 3rd comment service Disqus, create one its account
Associate your site, that is your github site, with disqus
Get Disqus shortname in admin/settings/general/
Edit your _config.yml of github, make sure it contains following content:
disqus:
shortname: <your disqus short name>
Make sure there is disqus.html under _includes and it looks like:
{% if page.comments %}
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus.shortname }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
{% endif %}
Include disqus.html in _layouts/post.html
To enable comment, add comments:true on your post yaml front matter.
Disable it by setting comments: false or by not including the comments option at all.
Open config.yml and add the following line of code
disqus_shortname: username. Replace username with your Disqus shortname.
Create a file called disqus_comments.html in Jekyll’s _includes folder and add your Disqus Universal Embed Code in between a {% if page.comments %} and a {% endif %} liquid tag
{% raw %}{% if page.comments != false %}
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_shortname }}';
var disqus_identifier = '{{ page.url }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
{% endif %}{% endraw %}
You simply add comments: false in any posts front-matter to turn off that post comments.
Finally, open your post.html file and add the following liquid include tag just after the end </article> tag.
{% if site.disqus_shortname %}
{% include disqus_comments.html %}
{% endif %}
You can follow my detailed blog post on how to add Disqus comments to Jekyll if you get stuck.
That's true Jekyll will render HTML from your Markdown files (locally using Jekyll or remotely by pushing to gh-pages). However it doesn't really matter as this kind of code has to be in a layer, so not in the Markdown source file.
_layouts
`- default.html
`- post.html <- `layout: default` in the YAML header
_posts
`- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header
By following this tree view, you'll able to render your Markdown files by using your post layout, which can contain your Disqus script.
Related
I have followed the instruction on the Disqus page on how to install disqus comment but, it does not load up when I deploy my blog site.
I put the disqus universal code into the includes folder and then added it in the post.html file.
I changed the following code in the universal disqus code:
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.url }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
In the post.html file I have:
{% include comments.html %}
Is there something else I am missing?
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.url }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
I had to put the this.page.url into strings quotes as you can see from the code above. The same goes for the this.page.identifier
I want to call a method in views.py from my HTML file in templates when the user is authenticated. I don't know what HTML syntax I should use here. I don't think a form or button would work since I want to simply call that method without letting the user click any button.
{% block content %}
{% if user.is_authenticated %}
<!-- I want to call the method here-->
<div id="user-logout">Hi {{ user.username }}! logout</div>
{% block chess_page %}
{% endblock %}
<!-- else redirect to the login page -->
{% else %}
<meta http-equiv="REFRESH" content="0; {% url 'login' %}">
{% endif %}
{% endblock %}
The only ways I could see this being done is either to write a custom template tag (something you should probably ask a specific question with your use case about) or use something like Ajax and POST to do something once the page is loaded with Javascript. You would want to do something like this:
This example uses JQuery
Template Code
$(document).ready(function(){
$.ajax({ url: "{% url 'thing_you_want_2_do' %}",
context: document.body,
method : "POST",
success: function(){
alert("done");
}});
});
The above code executes a POST request to the given URL.
urls.py
path('/todoitem', views.thing_you_want_to_do, name='thing_you_want_2_do'),
This just routes that request to the particular block of Python code you want to handle it.
View Code
#require_http_methods(["POST"])
def thing_you_want_to_do (request):
#do thing you want to do when the page loads
return #whatever you want to return
This does whatever it is you want to do.
I'm setting up an HTML.twig page extension and I want to take a text from page body with gtag
This is for a shopware page
I've already tried this but it does not seem to work:
gtag('config', 'GA_MEASUREMENT_ID', {
'page_title' : 'homepage',
'page_path': '/home'
});
but this code is alright: gtag('config', 'Example');
Instead of "Example" I want to take some text from the page body.
{% if page.product.name %}
gtag('product', '{{ page.product.name }}'); // for example :)
{% endif %}
I've created a blog type page using Jekyll and hosting it using GitHub pages. I've recently tried to add disqus comments; when inside my directory and I run a Jekyll serve and I access my page via localhost:4000 the comments are there and are fully functional. My problem comes when I push my changes and try to access it via my browser (grilla99.github.io), the changes are then not displayed. Why would this be happening?
My post.html looks like this
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
<p class="post-meta">
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
{{ page.date | date: date_format }}
</time>
{% if page.author %}
• <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
{% endif %}</p>
</header>
<div class="post-content" itemprop="articleBody">
{{ content }}
</div>
{% include disqus_comments.html %}
</article>
And my disqus_comments.html file looks like this:
{% 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 = grilla99-github-io;
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://grilla99-github-io-1.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 %}
On my posts page inside my YAML I have set
comments: true
Why is it not displaying when online and how can I fix this?
Replace the following code
this.page.identifier = grilla99-github-io;
with
this.page.identifier = '{{ page.url | absolute_url }}';
I see that you're using the default Jekyll theme for your site.
Simply adding the following to your config file should be enough..
disqus:
shortname: my_disqus_shortname
I have a project set up like this:
and I'm using gulp-nunjucks-render for templating. My gulpfile.js looks like this:
gulp.task('nunjucks', function() {
// Gets .html and .nunjucks files in pages folder
return gulp.src('pages/**/*.+(html|nunjucks)')
// Renders template with nunjucks
.pipe(nunjucksRender({
path: ['templates']
}))
// output file to main folder
.pipe(gulp.dest('./'));
});
It works well, and creates an index.html in my root folder.
However, whenever i want to include a partial from templates/partials/bottomnav.nunjucks, nothing happens. The index file is created, but the bottomnav html is not included.
I have been following this guide and so my index.nunjucks looks like this:
<!-- index.nunjucks -->
{% extends "layout.nunjucks" %}
{% block content %}
<h1>This is the index page</h1>
{% include "partials/bottomnav.nunjucks" %}
{% endblock %}
-- but why is the partial not included? Is the path wrong?
Well, it turns out the setup above actually works.