jekyll - ¿Cómo uso los comentarios disqus en github pages blog(Markdown)?

github-pages

Question

¿Es posible integrar los comentarios html de disqus en un blog usando github-pages? Me gusta la idea de usar github, jekyll y markdown para administrar mi sitio y mi blog por simplicidad. Sin embargo, me gustaría incluir la capacidad de comentarios disqus. Sin embargo, dado que markdown genera el html, ¿cómo incluyo el código html / js para disqus?

Answer 1

Abra config.yml y agregue la siguiente línea de código disqus_shortname: username . Reemplace el username con su username corto de Disqus.

Cree un archivo llamado disqus_comments.html en la carpeta _includes de Jekyll y agregue su Código de incrustación universal Disqus entre un {% if page.comments %} y una etiqueta líquida {% endif %}

{% 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 <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}{% endraw %}

Simplemente agregue comments: false en cualquier publicación de la parte delantera para desactivar los comentarios de esa publicación.

Finalmente, abra su archivo post.html y agregue la siguiente etiqueta de inclusión líquida justo después de la etiqueta final </article> .

{% if site.disqus_shortname %}
{% include disqus_comments.html %}
{% endif %}

Puedes seguir mi blog detallado sobre cómo agregar comentarios de Disqus a Jekyll si te quedas atascado.

Answer 2

Es cierto que Jekyll renderizará HTML de sus archivos de Markdown (localmente utilizando Jekyll o de forma remota presionando las páginas gh). Sin embargo, realmente no importa ya que este tipo de código tiene que estar en una capa, por lo que no está en el archivo fuente de Markdown.

_layouts
`- default.html
`- post.html <- `layout: default` in the YAML header
_posts
`- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header

Al seguir esta vista de árbol, podrá renderizar sus archivos de Markdown usando su diseño de publicación , que puede contener su secuencia de comandos Disqus.

Answer 3

Hay una manera "oficial" de realizar esta tarea. Puedes encontrar la indicación Disqus en this enlace.

En detalles, el procedimiento es el siguiente:

Agregue una variable llamada comments a la materia del frente de YAML (es decir, el encabezado de su archivo de publicación) y establezca su valor en true . Una muestra de la materia delantera podría verse así:

layout: default
comments: true
# other options

Cree un nuevo archivo de plantilla (es decir, disqus.html ) y coloque allí el Código de incrustación universal , entre un % if page.comments % y un % endif %

Incluya el archivo disqus.html en su plantilla de publicación.

Espero eso ayude :)

Answer 4

Incluya el comentario disqus en su post.html y establezca un identificador para el enlace de recuento de comentarios:

<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = ''<your-disqus-name>'';
var disqus_identifier = ''{{ page.id }}'';
...
</script>

En su plantilla default.html incluya el script de conteo de comentarios:

<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = ''<your-disqus-name>'';
...
</script>

Luego, agregue el enlace a los comentarios usando el atributo data-disqus-identifier , para que el recuento de comentarios se muestre después de cada publicación en la página principal de su blog:

<a href="{{post.id}}" data-disqus-identifier="{{post.id}}">Leave a comment</a>

Answer 5

Resumir:

1. Utilice el 3er servicio de comentarios Disqus, cree una cuenta.
2. Asocie su sitio, que es su sitio github, con disqus
3. Obtenga el nombre corto de Disqus en admin/settings/general/
4. Edite su _config.yml de github, asegúrese de que contenga el siguiente contenido:

disqus:
shortname: <your disqus short name>

5. Asegúrese de que haya disqus.html en _includes y se vea así:

   {% 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 <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
   </div>
   {% endif %}

   6. Incluir disqus.html en _layouts/post.html

   7. Para habilitar el comentario, agregue comments:true en su publicación yaml asunto de primera. Deshabilítelo configurando comments: false o al no incluir la opción de comentarios.

Answer 6

La forma más fácil y limpia de hacerlo es crear un parcial con el HTML que disqus proporciona en su carpeta _includes/ (por ejemplo, _includes/disqus.html ) y luego incluirlo en su archivo de diseño de publicaciones (por ejemplo, _layouts/post.md ) :

{% include disqus.html %}

Puedes ver un ejemplo aquí: diseño de post y disqus parcial .