Hello,碎语TALK

嗯,最近折腾一下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,分别起名 shuoshuozan

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

正在加载AI对本文的看法
说说 归档 标签 朋友 关于
arrow_up
theme