arritalk

前言

看到别人有弄这个说说这个小页面,心想自己要不实现一个?

  • 效果是这样滴:
    在这里插入图片描述

  • 传送门:
    说说心情页,开源项目: artitalk.js.org

设置记录参考

申请leancloud国际版账号

  1. 前往leancloud国际版,注册账号。(需要验证邮箱)
  2. 创建应用
    在这里插入图片描述
  3. 验证手机号在右上角,方便消息管理跟之后信息找回。
    在这里插入图片描述

后台设置

  1. 可以收藏这个地址:https://console.leancloud.app/#/apps(直达书签任务栏)
    在这里插入图片描述

  2. 添加用户(存储->结构化数据->_User->添加行
    在这里插入图片描述

  3. 添加用户

  4. 权限设置(存储->结构化数据->_User->权限
    在这里插入图片描述

    前4个都设置为指定的 指定用户、用户名

在这里插入图片描述在这里插入图片描述

完成之后

在这里插入图片描述

  • 获得 应用秘钥AppIDAppkey 在这里插入图片描述

  • 可以设置你的域名,如果有的话(设置->安全中心->下滑找到Web安全域名)(可选)

    在这里插入图片描述

博客配置

:我的是butterfly主题

  1. 配置butterfly.yml配置文件
    这里给出配置主题目录作为导航source_data\butterfly.yml
    在这里插入图片描述

  2. 创建页面source\artitalk\index.md

    根据使用文档中的设置:Artitalk使用文档

    配置说明:

    1. 必须:修改img、appID、appKey、usernam
    2. 选做:还可以修改placeholder提示和url图片地址

    index.md文件具体可以参考的我的自行修改

---
title: 微语
type: artitalk
noDate: 'true'
comments: 'false'
img: https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/bt-sonny.jpg
---
<head>
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
  <body>
      <script>
        var imgurl = "https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/bt-sonny.jpg"; //说说旁边显示的头像
        var appID = "你的appid";
        var appKEY = "你的Appkey";
        var per = "5"; //每页显示说说的数量
        var username = "bt-sonny"; //Leancloud中设置的用户名
        var placeholder1="只有bt-sonny才能评论哦"; //在编辑说说的输入框中的占位符
        var placeholder2="没有密码,不能评论!";  //在编辑密码的输入框中的占位符
        var lazy =1; //是否开启懒加载动画
        var bgimg = "https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/artitalk_bg.gif"; //背景动画
      </script>
      <div id="lazy"></div>
      <div id="artitalk"></div>
      <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/drew233/artitalk/source/v1.0.0/artitalk.js"></script> -->
      <script type="text/javascript" src="https://unpkg.com/artitalk@1.2.6/artitalk.js"></script>
      <!-- <script type="text/javascript" src="https://unpkg.com/artitalk"></script> -->
  </body> //根据自己的需要修改版本
</html>


发说说心情

点biu,即可成功发布说说。

有图片的话,也可以预览再发布哟~

说明:

我这里用的是1.2.6的版本,所以要做一下小改动
去到官方的更新日志:传送门

更新时间: 2020.5.26 16:05 (1.2.5版本,在这个版本基础上做修改)

操作

  • bug修复,老用户的话需要操作一下。具体操作如下:
    1. 进入shuoshuo class

    2. 点击批量操作->增加条件->选择列增加条件imgurl(如果你的选择列中没有这一列,新建一个列命名为imgurl即可)->条件里面选does not exist->测试条件->下一步

    3. 选择操作类型->更新数据->选择要更新的列imgurl->set->然后输入你的默认头像链接->下一步(头像链接如果填错了,可以通过同样的操作进行修改)
      在这里插入图片描述

    4. 选中跳过所有权限校验机制然后点击连续运行,等它执行完就可以进行下一步了。

    5. : 最后在1.2.6版本发布说说,若出现头像未定义,请在你发布说说那里重新登录,或者清除浏览器缓存,这样就可以正常加载了

    6. 提醒:需要删除发布的说说数据的话,就去后台登录删除就OK了

彩带

我的是本地备案,徐然听起来很傻叉,嗯。。。以后会考虑一下子滴!

你可以cmd一步一步的去到你的博客目录下运行,不过这里我呢给个快速开始的快捷方式,去到你的博客根目录下,cmd回车

在这里插入图片描述然后hexo s本地运行,效果是这样滴:

在这里插入图片描述参考:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值