空白网络

#教程#Valine简约的第三方评论系统
正所谓活到老学到老,即使专业不对口,兴趣在就蛮好,所以今天我又看到了一个新的好东西,Valine,由@云淡风轻以及...
扫描右侧二维码阅读全文
20
2017/08

#教程#Valine简约的第三方评论系统

正所谓活到老学到老,即使专业不对口,兴趣在就蛮好,所以今天我又看到了一个新的好东西,Valine,由@云淡风轻以及@Deserts Pan所构建,十分感谢。

使用须知

1.LeanCloud账号 点此注册
2.一个网站
3.仔细看,仔细琢磨,如果出现错误,打开浏览器开发者工具找寻
4.不要做一个永远的伸手党

创建应用

vi.png

vi1.png

部署应用

点此一键部署

github地址:https://github.com/panjunwen/Valine-Admin.git

vi3.png

设置环境变量

vi4.png

vi5.png

设置后台用户名及密码

vi6.png

设置好后重启你的应用

vi7.png

置入代码

<div class="comment"></div>
                <!--载入js,在</body>之前插入即可-->
    <!--Leancloud-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine-->
    <script src="/assets/js/Valine.min.js"></script>
    <script src="https://cdnjs.cat.net/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
    
    <script>
        new Valine({
        
            av: AV, 
            el: '.comment',
            app_id: 'your id',
            app_key: 'your key',
            placeholder: 'ヾノ≧∀≦)o来啊,快活啊!',
        });
    </script>

案例

本次案例中使用Ghost博客来测试,如果你没有VPS,请点击此处
如果你要搭建Ghost博客,请点击此处

编辑你的主题post.hbs文件,将上述代码插入在你文件<body>之前

vi8.png

获取你的app_id/key

vi9.png

刷新你的博客,或者重启你的VPS,你将发现一个评论系统在你的网站活了过来。

Last modification:August 23rd, 2017 at 10:17 am
If you think my article is useful to you, please feel free to appreciate

6 comments

  1. persilee

    我也用了 valine 但是表情和你的不一样,还有 ,你回复的时候 博主 是怎么实现的

    1. 空白网络
      @persilee

      耿直boy 我只是记录这个过程又没代表一定要使用啊… 这是ty的原生评论

      1. persilee
        @空白网络

        好吧,原来是自带的,谢谢

  2. 上海seo

    看起来还是很不错的呢

  3. LYgui

    您的评论系统也还好看啊

    1. 空白网络
      @LYgui

      嘿嘿,主题自带的,没有学过css,所以没进行过修改

Leave a Comment