解决来必力评论系统加载慢的问题

解决来必力评论系统加载慢的方法

必力评论加载慢如何解决?

灵感：大家平常说的加载慢，其实是因为来必力这个框架它是等读者把滚动条拉到文末评论的位置的时候才开始加载。
如果是让他从我们点进文章的时候就开始加载，那么等读者看完文章，评论也早就加载完了（除非有人一进来就去底下看评论）

所以只要我们在文章章加载后就去加载来必力评论系统，等看完文章，评论也早就加载完了，也不会察觉到它的加载

¶方法

方法其实很简单，但是我实验了好久才找到这个，先说方法

我们打开\yourhexo\themes\next\layout_partials\comments.swig

找到来必力的评论模块

将这段代码

<div class="comments" id="comments">
  <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
</div>

改成

<iframe title="livere" src="https://was.livere.me/comment/city?id=city&refer={{page.permalink}}&uid={{theme.livere_uid}}&site={{page.permalink}}&title={{page.title}}" scrolling="" frameborder="0" id="lv-comment-399" style="min-width: 100%; width: 100px; min-height: 400px; overflow: auto; border: 0px; z-index: 124212; height: 800px;" ></iframe>

然后就ok啦重新编译和提交博客内容，不过需要先清除缓存

博客根目录命令行打开

hexo clean
hexo d -g

¶方法二

¶出现的问题

昨天发现用的iframe框架没法自适应高度，如果评论多了，只能在页面滚动展现

所以我有找了个方法，不过这个方法比较麻烦

不推荐！

喜欢折腾的朋友可以尝试

就是将上面说的\yourhexo\themes\next\layout_partials\comments.swig

将这段代码

<div class="comments" id="comments">
  <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
</div>

换成

 <div id="container" data-id="city" data-title="{{page.title}}" data-logo="" data-desc="" data-uid="{{theme.livere_uid}}" data-site="{{page.permalink}}" data-refer="{{page.permalink}}" data-redirectorigin="" data-highlightseq="" data-discuss="false" data-facebookpageid="" data-facebookuploadurl="">
        <script type="text/javascript">
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-75302230-1', { sampleRate: 1 });
            ga('send', 'pageview');
      </script>
    <noscript>Please enable JavaScript to view the LiveRe comments</a></noscript>
 </div>

<link type="text/css" rel="stylesheet" href="https://cdn-city.livere.com/css/comment.zero.css">
<link type="text/css" rel="stylesheet" href="https://cdn-city.livere.com/css/theme/realblack.zero.css">
<script type="text/javascript" src="https://cdn-city.livere.com/js/lib.zero.js"></script>
<script type="text/javascript" src="https://cdn-city.livere.com/js/comment.zero.zh-cn.dist.js"></script>

就是直接将框架里的代码复制出来，不用框架。
但是这也会造成一个问题，没了框架的保护，来必力提供的外联样式表会与本地 css 样式冲突，导致本地的部分样式变形。

这就需要你自己动手去调整本地的样式！

所以会有前端基础的朋友可以试试

我是用chrome浏览器，控制台检查本地出错样式的name

然后在themes\next\source\css\custom\custom.styl文件里自己写样式
具体怎写就不细说了，可能不同主题博客也不一样
看想不想折腾了

¶安装来必力评论系统

想起来由于最新版hexo-next主题已经包含了next插件，所有这里就不再啰嗦配置

¶注册 LiveRe

进入LiveRe，注册账号。

LiveRe

LiveRe 有两个版本：

City 版：是一款适合所有人使用的免费版本；
Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。
我们 City 版就够了。

安装，获取 uid：

兰州小红鸡

填写完成后，进入到管理页面 -> 代码管理 -> 一般网站代码中，data-uid 即为所需 uid。

添加 LiveRe 插件

首先在_config.yml 文件中添加如下配置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

其中 livere_uid 即上一步获取到的 uid。

然后就是解决加载慢的问题，回到上面的教程跟着走就好了