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.
Related
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...
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
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?
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.
I'm using an AJAX request to handle some part of my app that deals with managing photos...the user can click on a '<' or '>' button to change the ordering of the photos. All works well, but only for the first time I click the button...subsequent clicks do not trigger anything.
Main template:
<script type="text/javascript">
$(function() {
$(".manage_photo").click(function(event) {
event.preventDefault();
var id = $(this).attr("id");
var action = $(this).attr("name");
var data = { id: id, action: action };
$.ajax({
type: "POST",
url: "{% url managePhotos %}",
data: data,
success: function(results) {
$("#list").html(results);
},
});
})
})
</script>
....
{% if photos %}
<p><strong>{{ photos.count }} photo(s) added</strong></p>
<div class="highslide-gallery">
<div id="list">
{% include "ajax/photos.html" %}
</div>
</div>
<div class="cleaner"></div>
{% else %}
<h5>Photos not yet added</h5>
{% endif %}
Code for ajax/photos.html:
{% for photo in photos %}
<div class="vehicle_photo">
<button class="manage_photo" name="incr" id="{{ photo.id }}"
{% if forloop.first %} disabled="disabled"{%endif %} style="float: left">
<
</button>
<button class="manage_photo" name="decr" id="{{ photo.id }}"
style="float: right">
>
</button>
<br />
<a href="{{ photo.original_image.url }}" class="highslide"
onclick="return hs.expand(this)">
<img class="ui-corner-all" src="{{ photo.thumbnail_image.url }}" />
</a>
<br />
{{ photo.position_number }}
</div>
{% endfor %}
My view returns a render_to_response version of photos.html after changing the ordering for the selected photo, with results containing the queryset for all photos in that photo's set, and a status message ie. success, failed:
return render_to_response('ajax/photos.html', results)
What could be my issue? I tried the suggestions at: this SO question, but none work out for me. Any insight would be very much appreciated since I've been at this since yesterday.
when you do the $(function...) things that are in the DOM get bound, but when you replace stuff with other stuff, the new stuff is not bound. You could use the .live command to make it work for old and new stuff, or you could bind the new stuff again (run the $(".manage_photo").click(...) again after the ajax.
BTW, you could replace the block of ajax with a simple $("#list").load("{% url managePhotos %}")