My disqus comments count isn't showing up. What's wrong? - jekyll

This is my repo and here is my live site. As you can see on my live site... the comments count never loads. It always reads Comments loading...
What is the ...#disqus_thread part doing in the a tag?
Here is my jekyll code that iterates through all posts:
<div class="posts">
{% for post in paginator.posts %}
<article class="post">
<h1 class="post-title">{{ post.title }}</h1>
<div class="entry">
<span> {{ post.excerpt }} [...] </span>
</div>
<span class="date front-page-date">{{ post.date | date: "%B %d, %Y" }}</span>
Comments Loading...
</article>
{% endfor %}
</div>
Here is my disqus layout/partial:
{% if site.disqus %}
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_identifier = document.location.pathname.split("/").slice(1,5).join('');
var disqus_shortname = '{{ site.disqus }}';
(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 %}
And here is my disqus_count partial that is right above my closing body tag:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '{{ site.disqus }}';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
Each of my posts includes the disqus layout and so that works fine. But I am trying to show the number of comments that each post has in my jekyll index page. How do I do this? My spans do not seem to be working and in each of my disqus sections, I am using a disqus identifier which based off the url. What am I doing wrong?

Related

use js variable in Django

userlist.html
<a id="{{user.id}}" href="/followerPosting?id={{following.id}}" class="btn">profile</a>
I want to pass the id value to the url when the btn is clicked.
followerPosting.html
<script type="text/javascript">
var url = require('url');
var queryData = url.parse(request.url, true).query;
var fid = queryData.id;
</script>
So I parsed the URL and stored the id value in a variable (fid).
{% for twit in twits %}
{% if twit.User.id == fid %}
<div class="twit">
<div class="twit-content">{{twit.content}}</div>
</div>
{% endif %}
{% endfor %}
I want to use this variable in html (django)
how can I use this value?
I tried to use Ejs but it didn't work well...

Disqus comments on Jekyll show when hosted on localhost but not when hosted on GitHubPages

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

Not able to get disqus comments secton on my website(jekyll)

I created my website on Lanyon, but while I was trying to configure the disqus comment box it did not appeared on the site.
I made following changes:
_layouts/default.html
<!DOCTYPE html>
<html lang="en-us">
{% include head.html %}
<body>
{% include google_analytics.html %}
{% include sidebar.html %}
<!-- Wrap is the content to shift when toggling the sidebar. We wrap the
content to avoid any CSS collisions with our real content. -->
<div class="wrap">
<div class="masthead">
<div class="container">
<h3 class="masthead-title">
{{ site.title }}
<small>{{ site.tagline }}</small>
</h3>
</div>
</div>
<div class="container content">
{{ content }}
{% include comments.html %}
</div>
</div>
<label for="sidebar-checkbox" class="sidebar-toggle"></label>
<script>
(function(document) {
var toggle = document.querySelector('.sidebar-toggle');
var sidebar = document.querySelector('#sidebar');
var checkbox = document.querySelector('#sidebar-checkbox');
document.addEventListener('click', function(e) {
var target = e.target;
if(!checkbox.checked ||
sidebar.contains(target) ||
(target === checkbox || target === toggle)) return;
checkbox.checked = false;
}, false);
})(document);
</script>
</body>
</html>
_includes/comments.html
{% if page.comments %}
<!-- Add Disqus comments. -->
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'yathartha22-github-io'; // required: replace example with your forum shortname
var disqus_identifier = "{{ site.disqusid }}{{ page.url | replace:'index.html','' }}"
/* * * DON'T EDIT BELOW THIS LINE * * */
(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>
comments powered by <span class="logo-disqus">Disqus</span>
{% endif %}
These are the two files in which I made changes for disqus to integrate, but I an unable to get it. Can anyone please help me out. I even made comments = true in every post. Here is the link to my blog
Fixing disqus comments include in _includes/comments.html:
{% if page.comments %}
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'yathartha22-github-io' ;
/* * * DON'T EDIT BELOW THIS LINE * * */
(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 %}
Also in index.html change the way you generate the links to posts:
Change
<a href="{{ site.baseurl }}/{{ post.url }}">
to this
<a href="{{ post.url | absolute_url}}">
Disqus comments won't appear in the homepage posts list, but in each post, so inside each post you will see the comment box, e.g. here http://localhost:4000/gsoc-preparation or https://yathartha22.github.io/gsoc-preparation.

How do I use disqus comments in github pages blog (Markdown)?

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.

Saving an Entity using json in Google App Engine NDB Datastore

Hello Developers I am using Python Flask , Knockout.js and Google App Engine. Now I am making the basic program which is poster I am just posting some stuff using poster. But It seems that Google App Engine Datastore does not takes the values from request.json['...']
when form.validate_on_submit() is also in if condition of the view.
Here is my Flask View code
#app.route('/post/new',methods=['POST','GET'])
def post_it():
form = CreatePost(request.form)
use_db = ndb.Key(model.User, current_user.name)
if **form.validate_on_submit()** and request.method=='POST':
posting = model.Post(
name = use_db,
poster = request.json['post'],
postbody = request.json['postbody'],
posturl = request.json['posturl'],
)
try:
posting.put()
flash("Poster has been populated", category='info')
return jsonify({ "post": request.json['post'],"postbody": request.json['postbody'], "posturl": request.json['posturl'] })
except CapabilityDisabledError:
flash('Error Occured while posting')
return redirect(url_for('post_it'))
return render_template('poster.html', form=form, use_db = use_db, post_db = post_db)
#app.route('/posts',methods=['GET'])
def all_posts():
post_db = model.Post.query()
return jsonify(post_db=post_db)
My poster.html code
<form id="new_postform" action="{{ url_for('post_it') }}" data-bind="submit: addPost" class="navbar-form form-inline" method="post" >
{{ form.csrf_token }}
<fieldset>
{{ form.hidden_tag() }}
<div class="control-group">
<p>Post</p>
<div class="controls">
<p>
{{ form.poster(id='post',class='form-control required ',placeholder="My Post", autocomplete=True , size=3,**{'data-bind': 'value: post'})}}</p>
{% if form.poster.errors %}
<ul class="errors">
{% for error in form.poster.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="control-group">
<p>postbody<p>
<div class="controls">
<p>{{ form.postbody(id='postbody',class='form-control required ',placeholder="Post Description", autocomplete=True , size=3, **{'data-bind': 'value: postbody'} )}}</p>
</div>
</div>
<div class="control-group">
<p>post url</p>
<div class="controls">
<p>
{{ form.posturl(id='posturl',class='form-control required ',placeholder="My Post", autocomplete=True , size=3, **{'data-bind': 'value: posturl'} )}}</p>
{% if form.posturl.errors %}
<ul class="errors">
{% for error in form.posturl.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="control-group">
<div class="controls">
<br><input type="submit" id="postit" name="postit" value"poster" class="btn btn-primary" /><br><br>
</div>
</div>
</fieldset>
</form>
<ul data-bind="foreach: posts, visible: posts().length > 0">
<p data-bind="text: post"></p>
<p data-bind="text: postbody"></p>
<p data-bind="text: posturl"></p>
</ul>
<div class="controls">
</div>
{% block tail_script %}
<script src="{{ url_for('static', filename='bootstrap/js/jquery.validate.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap/js/additional-methods.js') }}"></script>
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function Post(data) {
this.post = ko.observable(data.post);
this.postbody = ko.observable(data.postbody);
this.posturl = ko.observable(data.posturl);
}
function PostViewModel() {
var self = this;
self.posts = ko.observableArray([]);
self.post = ko.observable();
self.postbody = ko.observable();
self.posturl = ko.observable();
console.log(self.post)
self.addPost = function() {
self.save();
self.post("");
self.postbody("");
self.posturl("");
};
$.getJSON('/posts', function(postModels) {
var t = $.map(postModels.posts, function(item) {
return new Post(item);
});
self.posts(t);
});
self.save = function() {
return $.ajax({
url: '/post/new',
contentType: 'application/json',
type: 'POST',
data: JSON.stringify({
'post': self.post(),
'postbody': self.postbody(),
'posturl': self.posturl(),
}),
success: function(data) {
console.log("Pushing to post array");
self.posts.push(new Post({ post: data.post, postbody: data.postbody, posturl: data.posturl }));
return;
},
error: function() {
return console.log("Failed");
}
});
};
}
// Activates knockout.js
ko.applyBindings(new PostViewModel());
</script>
{% endblock %}
{% endblock %}
is there any way to run form.validate_on_submit() with request.json['....'] , I am unable to figure where I am going wrong.