Refactored inclusion of disqus script

- Added ARIA setting `aria-live="polite"` to comment output
- Removed duplicate <div id="disqus_thread"> from page/post templates
- Moved blocking JavaScript loading to the end of the document body.
- Merged JavaScript code for index and pages/posts using conditionals
- Moved global JavaScript disqus variables into the anonymous function to stop pollution of global namespace
This commit is contained in:
Frederic Hemberger 2011-09-21 13:37:59 +02:00
parent b2828eb039
commit 2a30d9a1eb
6 changed files with 44 additions and 44 deletions

View File

@ -0,0 +1,22 @@
{% comment %} Load script if disquss comments are enabled and `page.comments` is either empty (index) or set to true {% endcomment %}
{% if site.disqus_short_name and page.comments != false %}
<script type="text/javascript">
(function () {
var disqus_shortname = '{{ site.disqus_short_name }}';
{% if page.comments == true %}
{% comment %} `page.comments` can be only be set to true on pages/posts, so we embed the comments here. {% endcomment %}
// var disqus_developer = 1;
var disqus_identifier = '{{ site.url }}{{ page.url }}';
var disqus_url = '{{ site.url }}{{ page.url }}';
var disqus_script = 'embed.js'
{% else %}
{% comment %} As `page.comments` is empty, we must be on the index page. {% endcomment %}
var disqus_script = 'count.js'
{% endif %}
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
{% endif %}

View File

@ -1,13 +1 @@
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_short_name }}';
var disqus_identifier = '{{ site.url }}{{ page.url }}';
var disqus_url = '{{ site.url }}{{ page.url }}';
//var disqus_developer = 1;
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

View File

@ -9,6 +9,7 @@
</div> </div>
</div> </div>
<footer>{% include footer.html %}</footer> <footer>{% include footer.html %}</footer>
{% include disqus.html %}
{% include google_analytics.html %} {% include google_analytics.html %}
{% include google_plus_one.html %} {% include google_plus_one.html %}
{% include twitter_sharing.html %} {% include twitter_sharing.html %}

View File

@ -27,7 +27,7 @@ layout: default
{% if site.disqus_short_name and page.comments == true %} {% if site.disqus_short_name and page.comments == true %}
<section> <section>
<h1>Comments</h1> <h1>Comments</h1>
<div id="disqus_thread">{% include post/disqus_thread.html %}</div> <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
</section> </section>
{% endif %} {% endif %}
</div> </div>

View File

@ -17,10 +17,10 @@ single: true
{% endunless %} {% endunless %}
</footer> </footer>
</article> </article>
{% if site.disqus_short_name and page.comments != false %} {% if site.disqus_short_name and page.comments == true %}
<section> <section>
<h1>Comments</h1> <h1>Comments</h1>
<div id="disqus_thread">{% include post/disqus_thread.html %}</div> <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
</section> </section>
{% endif %} {% endif %}
</div> </div>

View File

@ -3,35 +3,24 @@ layout: default
--- ---
<div class="blog-index"> <div class="blog-index">
{% assign index = true %} {% assign index = true %}
{% for post in paginator.posts %} {% for post in paginator.posts %}
{% assign content = post.content %} {% assign content = post.content %}
<article> <article>
{% include article.html %} {% include article.html %}
</article> </article>
{% endfor %} {% endfor %}
<nav role="pagination"> <nav role="pagination">
<div> <div>
{% if paginator.next_page %} {% if paginator.next_page %}
<a class="prev" href="{{paginator.next_page}}">&larr; Older</a> <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
{% endif %} {% endif %}
<a href="/blog/archives">Blog Archives</a> <a href="/blog/archives">Blog Archives</a>
{% if paginator.previous_page %} {% if paginator.previous_page %}
<a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a> <a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a>
{% endif %} {% endif %}
</div> </div>
</nav> </nav>
{% if site.disqus_short_name %}
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_short_name }}';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{% endif %}
</div> </div>
<aside role=sidebar> <aside role=sidebar>
{% if site.blog_index_asides.size %} {% if site.blog_index_asides.size %}