Hello,碎语TALK

2022/11/20
阅读：0次

嗯，最近折腾一下BLOG，看到别人用到这种类似微博的碎碎念，感觉很不错，然后我在我用的主题上发现内置了[Artitalk 3.3.4]，试用了一下，感觉良好，他是一个基于leancloud的一个JS做的碎碎念系统，用了几天，感觉有些功能不是很满意，于是乎决定改动一下，然后pull request，但是写着写着，感觉很有约束(他已经很多版本了)，内置的上传图床也是一个我平时不用的，看到原项目用的是MIT协议，所以我觉定花点时间来做一个自己的吧，嗯，说动就动。

写了2-3天，感觉要学习的东西还很多，当然，顺便托原作者的福，学习了一下一直想学习却没来及学习的 gulp

项目地址

https://github.com/afyi/sytalk

最新版本号

1.2.2 2022-12-06

更新记录

1.2.2 [2022-12-06]
  • 添加点赞时间间隔参数
1.2.0 [2022-12-02]
  • 新增加基于learncloud和localstorage的点赞功能[测试中]
  • 可以定制自己的操作系统名称啦
1.1.1 [2022-11-20]
  • 修复了sy-day5 图标命名错误的BUG
1.1.0 [2022-11-19]
  • 将CSS样式表外置，进行压缩
  • 统一SVG图标大小，然后将svg上传至iconfont
  • 将时间图标从9个改成5个，去掉几个粗细不统一的图标
1.0.0 [2022-11-18]
  • 精简Artitalk的部分代码，做一个初步功能的雏形

对比Artitalk的不同

  1. 删除了原Artitalk中的文件上传部分，个人感觉用不到
  2. 重构了Artitalk中部分代码，新增，删除，加载没必要全部重新加载，减小重载损耗
  3. 重构了Artitalk的MARKDOWN解析部分，让解析更快速
  4. 修复了之前Artitalk设备判定部分的小小BUG
  5. 修改了部分样式命名，防止和引用的部分冲突

目前考虑不再加的功能

  1. 评论，个人感觉没必要了，因为一般来说博客都有评论功能，没必要单独做一个评论给说说了

还在考虑要不要补的功能

  1. 说说的编辑

文件结构

src
├─ main.js                   # Sytalk 的主要 js 部分
├─ css											 # 样式文件夹	
    ├─ sytalk.css						 # 主样式文件
├─ img											 # 静态图，其实就是提示框的图片文件夹	
├─ svg                       # SVG图标的源文件
├─ emoji                     # 表情图所在文件夹
└─ plugins                   # 第三方 js
    ├─ av-min.js             # LeanCloud 提供的 SDK
    ├─ browser.js            # 返回用户操作系统
    └─ showdown.min.js       # Markdown 转换

使用说明

  1. 打包

    git clone git@github.com:afyi/sytalk.git
    cd sytalk && yarn build

    然后从 dist/js/sytalk.min.js 放至于你能访问到的地方即可

  2. 初始化

    <div id="artitalk_main"></div>
    <script src="https://fastly.jsdelivr.net/gh/afyi/sytalk/dist/sytalk.min.js"></script>
    <script>
    	sytalk.init({
      	appId: '从leancloud项目中拿来的appid',
       appKey: '从leancloud项目中拿来的appkey',
       serverURL: "从leancloud项目中拿来的REST域名",
       // 每次加载数10个，默认就是10个
       pageSize: 10,
       // 表情CDN路径，非必填，默认就是下面这个
       emojiServer: "https://fastly.jsdelivr.net/gh/afyi/sytalk/dist/emoji/",
       // 信息框背景图，默认就是下面的图
       bgImg: "https://fastly.jsdelivr.net/gh/afyi/sytalk/dist/img/bgImg.webp",
       // 外链CSS地址，这里与artitalk不同，如果这里填，会直接中断内置样式
       cssUrl: "",
       // 信息框placeholder文字
       shuoPla: "",
       // 默认头像，默认值是gravator的默认头像
       avatarUrl: "https://cravatar.cn/avatar/0?s=128",
       // 定制系统名称 1.2.0新增，可以单独定制某几个，也可以全部定制
       osName: {android: "Android", macos: "MacOS", windows: "Windows", linux: "Linux", other: "other"},
       // 点赞间隔，单位：秒，点赞时间间隔，默认是1天，如果设置为0，则只要有记录就不会清除
       zanIntval: 24 * 3600, 
      	// 加载完成回调
        onLoad: () => {},
        // 登陆成功后的回调
        onLogin: () => {},
        // 发布说说成功后的回调
        onPublished: () => {}
      });
    </script>

  3. learncloud设置说明 [重要]

  • 需要一个用户，用于更新说说

位置：申请一个应用 -> 应用概况 -> 内建帐户 -> 添加用户

  • 需要2个class，分别起名 shuoshuo 和 zan

class shuoshuo 表结构

列名 类型 说明
atContentHtml string HTML格式的说说内容
atContentMd string markdown格式的说说内容
avatar string 头像
userBrower string 用户浏览器
userOs string 用户操作系统
zanId string 点赞表中的id

class shuoshuo 权限设置

访问权限如下：

名称 值
add_fields 指定用户
create 指定用户
delete 指定用户
update 指定用户
find 所有用户
get 所有用户

默认ALC权限：

名称 值
read 所有用户
write 指定用户

class zan 表结构

列名 类型 说明
num number 点赞数

class zan 权限设置

访问权限如下：

名称 值
add_fields 指定用户
create 指定用户
delete 指定用户
update 所有用户
find 所有用户
get 所有用户

默认ALC权限：

名称 值
read 所有用户
write 所有用户

协议

MIT