Можно ли интегрировать комментарии disqus html в блоге с помощью github-страниц? Мне нравится идея использования github, jekyll и markdown для управления моим сайтом и блогом для простоты. Тем не менее, я хотел бы включить возможность комментирования disqus. Однако, поскольку markdown генерирует html - как включить код html/js для disqus?
Как использовать комментарии disqus в блоге github pages (Markdown)?
Ответ 1
Самый простой и чистый способ сделать это - создать частичный с HTML, который disqus предоставляет в вашей папке _includes/
(например, _includes/disqus.html
), а затем просто включить его в файл макета сообщений (например, _layouts/post.md
)
{% include disqus.html %}
Здесь вы можете увидеть пример: post layout и disqus partial.
Ответ 2
Существует "официальный" способ выполнить эту задачу. Вы можете найти индикацию Disqus в эту ссылку.
Подробнее, процедура следующая:
Добавьте переменную с именем comments
в переднюю материю YAML (т.е. заголовок вашего почтового файла) и установите ее значение true
. Образец фронтального объекта может выглядеть так:
layout: default
comments: true
# other options
Создайте новый файл шаблона (т.е. disqus.html
) и поместите туда Universal Embed Code, между % if page.comments %
и % endif %
Включите файл disqus.html
в шаблон публикации.
Надеюсь, это поможет:)
Ответ 3
Включите комментарий disqus в свой post.html
и установите идентификатор ссылки на комментарий:
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '<your-disqus-name>';
var disqus_identifier = '{{ page.id }}';
...
</script>
В вашем шаблоне default.html
укажите количество комментариев script:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<your-disqus-name>';
...
</script>
Затем добавьте ссылку на комментарии, используя атрибут data-disqus-identifier
, чтобы счетчик комментариев появлялся после каждого сообщения на главной странице вашего блога:
<a href="{{post.id}}" data-disqus-identifier="{{post.id}}">Leave a comment</a>
Ответ 4
Настоящий Jekyll отобразит HTML из ваших файлов Markdown (локально используя Jekyll или удаленно, нажав на gh-страницы). Однако это не имеет особого значения, поскольку этот тип кода должен быть в слое, поэтому не в исходном файле 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
Следуя этому древовидному представлению, вы сможете отображать свои файлы Markdown, используя макет сообщения, который может содержать ваш Disqus script.
Ответ 5
Откройте config.yml и добавьте следующую строку кода
disqus_shortname: username
. Замените username
своим коротким именем Disqus.
Создайте файл с именем disqus_comments.html
в папке Jekylls _includes
и добавьте свой универсальный код для диска Disqus между тегами {% if page.comments %}
и {% 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="#" onclick="location.href='http://disqus.com/?ref_noscript'; return false;">comments powered by Disqus.</a></noscript>
{% endif %}{% endraw %}
Вы просто добавляете comments: false
в любые сообщения front-matter, чтобы отключить комментарии к сообщению.
Наконец, откройте файл post.html и добавьте следующий тег include, расположенный сразу после тега </article>
.
{% if site.disqus_shortname %}
{% include disqus_comments.html %}
{% endif %}
Вы можете следить за моим подробным сообщением в блоге о том, как добавить комментарии Disqus к Jekyll, если вы застряли.