MENU

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

August 20, 2017 • Read: 7512 • 网络笔记

正所谓活到老学到老,即使专业不对口,兴趣在就蛮好,所以今天我又看到了一个新的好东西,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 Modified: August 23, 2017
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

12 Comments
  1. 您的评论系统也还好看啊

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

  2. 看起来还是很不错的呢

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

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

    2. @空白网络好吧,原来是自带的,谢谢 ::aru:thumb::

  4. 咨询个问题,我也申请了这个,我把代码直接添加到HTML页面上,好像没有评论框啊

  5. 没整明白

    1. @Www.Last.City哪个步骤呢?

  6. 非

    非ヾ(≧∇≦*)ゝ

  7. 文中君 文中君

    评论数怎么调取?

  8. 11111 11111

    @(滑稽)喜欢这些表情