jekyll - ¿Cómo uso los comentarios disqus en github pages blog(Markdown)?
github-pages (6)
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.
¿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?
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.
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 :)
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>
Resumir:
- Utilice el 3er servicio de comentarios Disqus, cree una cuenta.
- Asocie su sitio, que es su sitio github, con disqus
- Obtenga el nombre corto de Disqus en
admin/settings/general/
- Edite su _config.yml de github, asegúrese de que contenga el siguiente contenido:
disqus: shortname: <your disqus short name>
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 %}
Incluir
disqus.html
en_layouts/post.html
Para habilitar el comentario, agregue
comments:true
en su publicación yaml asunto de primera. Deshabilítelo configurandocomments: false
o al no incluir la opción de comentarios.
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 .