Как установить комментарии Lazy Load Disqus в Blogger

Как установить Lazy Load Disqus Comments - это один из способов ускорить загрузку блога. Принцип его работы и его использование аналогичны медленной загрузке объявлений AdSense . Кажется, я часто обсуждаю комментарии Disqus. Начиная с публикации сообщений о событиях Disqus Onclick и заканчивая тем, как возвращать комментарии Disqus в комментарии Blogger . Дискуссии, связанные с комментариями Disqus, также часто встречались в различных блогах с различными точками зрения и способами их установки. Но важно знать одну вещь: если вы решитесь опубликовать комментарии Disqus в Blogger / blogspot, то неизбежно придется принять участие в доработке Disqus при загрузке страниц блога.

Потому что, полнота предлагаемых функций в сочетании с его слабыми сторонами, замедляют работу сайта.

Тем не менее, с помощью ленивой загрузки Disqus Comments, мы добьёмся быстрой загрузки страниц блога

ДЕМОНСТРАЦИЯ

Применение Lazy Load Disqus Комментарии на Blogger / Blogspot

В этом случае я предполагаю, что вы уже создали учетную запись для комментариев Disqus для одного из своих блогов. Если нет, зарегистрируйтесь по адресу https://disqus.com/admin/create/, затем запишите короткое имя комментария Disqus для блога.

Шаг 1: Поместите форму комментария Disqus

Этот код является вызывающим Disqus.

Поиск кода <b:includable id='commentPicker' var='post'> или <b:includable id='commentPicker' var='post'/>

Если вы найдете код, <b:includable id='commentPicker' var='post'>добавьте следующий код тега div ниже:

<b:if cond='data:view.isSingleItem'> <div id='disqus_thread'> <div id='disqus_empty'/> </div> <b:if cond='data:blog.isMobileRequest == "true"'><b:include data='post' name='disqus-comment'/></b:if> </b:if>

Однако, если вы найдете код, <b:includable id='commentPicker' var='post'/> удалите его и замените его следующим образом:

<b:includable id='commentPicker' var='post'> <b:if cond='data:view.isSingleItem'> <div id='disqus_thread'> <div id='disqus_empty'/> </div> <b:if cond='data:blog.isMobileRequest == "true"'><b:include data='post' name='disqus-comment'/></b:if> </b:if> </b:includable>

Примечание.Для шаблонов Blogger, которые по-прежнему используют более старые версии комментариев, пожалуйста, найдите код <b:includable id='comment_picker' var='post'> или <b:includable id='comment_picker' var='post'/>. Затем следуйте инструкциям для добавления кода формы комментария Disqus, как указано выше.

Шаг 2. Добавление URL-адреса Blogger Disqus

Этот код полезен для загрузки содержимого комментариев Disqus на исходную страницу / URL. Хотя содержимое комментариев Disqus сделано и просматривается на разных устройствах.

Например, если содержимое комментария Disqus создается с помощью мобильного URL-адреса, который обычно формирует URL-адрес с дополнительным символом ? M = 1 , например https://tekhnologiya.blogspot.com/2020/04/uslovnyj-teg-blogger-dlya-mobilnyh-ustrojstv.html?m=1 - тогда содержимое комментария Disqus по-прежнему будет отображаться на других устройствах с фактическим URL.

Для установки найдите код <b:includable id='comments' var='post'>...</b:includable>
или <b:includable id='comments' var='post'/> и замените следующим кодом:

<b:includable id='disqus-comment' var='post'> <script type='text/javascript'> var disqus_blogger_current_url = "<data:blog.canonicalUrl/>"; if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = "<data:blog.url/>"; } var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>"; var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>"; </script> </b:includable>

Шаг 3: Добавить JavaScript

Найдите код </body> или </body> поместите этот код над кодом:

<b:if cond='data:view.isSingleItem'> <script> //<![CDATA[ function load_disqus( disqus_shortname ) { var y = document.getElementById('disqus_empty'), t = document.getElementById('disqus_thread'), e = document.createElement('script'), d = document.createElement('script'), h = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]); if( t && y ) { e.type = 'text/javascript'; e.async = true; e.src = '//' + disqus_shortname + '.disqus.com/embed.js'; h.appendChild(e); d.type = 'text/javascript'; d.async = !0; d.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js'; h.appendChild(d); y.remove(); } } window.addEventListener('scroll', function(e) { var currentScroll = document.scrollingElement.scrollTop; var t = document.getElementById('disqus_thread'); if( t && (currentScroll > t.getBoundingClientRect().top - 150) ) { load_disqus('YOUR_DISQUS_SHORTNAME'); console.log('Disqus loaded.'); } }, false); //]]> </script> </b:if>

Примечание:
Замените YOUR_DISQUS_SHORTNAME на короткое имя Disqus для своего блога.
Не заменяйте тег <script> в коде JavaScript выше <script type='text/javascript'>. Потому что, расстроит нагрузку на disqus.com/blogger_item.js di tampilan mobile.

Шаг 4: Редактировать CSS

Добавьте следующий CSS над кодом </style> или ]]></b:skin>.

#disqus_thread{margin:25px auto; padding: 10px; background-color:#fff;}

Шаг 5: Сохранить изменения

Сохраните изменения шаблона, нажав кнопку « Сохранить тему» или значок сохранения.

Шаг 6. Отключите комментарии Blogger

До шага 5, описанного выше, шаги установки для отложенной загрузки комментариев Disqus завершены.

Таким образом, чтобы комментарии Disqus не перекрывались комментариями Blogger по умолчанию, отключите комментарии Blogger следующим образом.

Зайдите в Настройки > Сообщения, комментарии.

Затем в области комментариев выберите « Скрыть» .

После этого нажмите кнопку Сохранить после в верхнем правом углу.

Расширенные настройки

Disqus комментарии не появляются?

Означает, что в шаблоне тег вызова по умолчанию для комментариев был удален. Для этого, пожалуйста, найдите код </article> и добавьте следующий код:

<b:include cond='data:view.isSingleItem' data='post' name='comment_picker'/>

или

<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>

Примечание:
условные теги data:view.isSingleItem будут отображать комментарии на стороне поста и страницы / статической страницы. Если вы хотите отображать только пост, замените код на data:view.isPost.

В новых темах Blogger всё работает, проверял на теме Contempo

Cancel