^

liuyonghu.com

Stay hungry,Stay foolish,Stay young

刘勇虎的官方网站

网站内容包含大前端、服务器开发、Python开发、iOS开发、Android开发、网站维护等技术文章。专注于分享技术经验，职业心得体会，IT优秀文章与教程创作。

添加评论-集成valine

题记

从青岛回来已是凌晨两点，累坏了，打开了放着孔雀鱼的塑料透明碗，发现我家鱼生了，也是高兴。回到公司，改了下代码，下班了弄了下博客。用valine设置了网站的评论系统，感觉还不错.

言归正传

1 获取appid、appkey

leancloud注册地址

2 HTML 片段

修改初始化对象中的appId和appKey的值为上面刚刚获取到的值即可(其他可以默认)。


<head>
    ...
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    ...
</head>
<body>
    ...
    <div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: '<API_ID>',
            appKey: '<API_Key>'
        })
    </script>
</body>

2.1 配置


new Valine({
    el: '#vcomments' ,
    appId: '<APP_ID>',
    appKey: '<APP_KEY>',
    notify:false, 
    verify:false, 
    avatar:'mm' 
    placeholder: 'just go go',
    path:window.location.pathname, 
});

2.2 npm

Valine 现已发布到npm，可以直接用命令安装：

# Install leancloud's js-sdk
npm install leancloud-storage --save
# Install valine
npm install valine --save
// Register AV objects to the global
window.AV = require('leancloud-storage');

// Use import
import Valine from 'valine';
// or Use require
const Valine = require('valine');

new Valine({
    el:'#vcomments',
    // other config
})

2.3 评论数据管理

由于Valine 是无后端评论系统，所以也就没有开发评论数据管理功能。请自行登录Leancloud应用管理。

3 hexo主题集成

3.1 用npm安装valine

# Install leancloud's js-sdk
npm install leancloud-storage --save

3.2 配置

comment:
    use: valine
    shortname: http-miccall-tech 
    duoshuo_thread_key_type: path
    duoshuo_embed_js_url: "https://static.duoshuo.com/embed.js"
    changyan_appid:
    changyan_conf:
    changyan_thread_key_type: path
    # 使用 valine 请先执行 npm install valine --save
    valine: # Valine Comment System https://github.com/xCss/Valine
       on: true
       appId: 'appId'
       appKey: 'appKey'
       notify: true
       verify: false
       placeholder: Please leave your footprints
       avatar: ''
       avatar_cdn: https://gravatar.loli.net/avatar/ # avatar CDN address, default gravatar.loli.net
       pageSize: 10 # comments of one page

ok ~

上一篇: learning.py报错
1.本站所有文章除特殊声明外均为原创，未经允许禁止转载!
2.站内文章如有侵权异议，请与我联系，我将在确实后处理！
换个声音
停止播放