hexo(butterfly)添加说说页面(Artitalk可在线发布)

一、前言

之前有写一篇文章是如何在个人网站配置手写说说页面,这是我从drew叔
那搬运过来的,大家一直催问可不可以在线发布,终于drew叔动手了。

我看着他从leadcloud后台鼓捣到gtalk后台,再到leadcloud国际版后台,我按兵不动,他费力的造轮子,“伸手主义”的快乐。
在这里插入图片描述
今天,我 mark 了一个好东西 artitalk.js.org ,这意味稳定并开源啦, 赶快get起来!

先展示一张目前的效果图:
在这里插入图片描述


快速门:

  1. 说说心情页,开源项目: artitalk.js.org

  2. drew叔的博客: cndrew.cn说说页面

  3. 我再贴个我的: cungudafa的说说页面


二、我设置的记录参考

1.申请leancloud国际版账号

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

2.后台配置

  1. 可以收藏这个网址在书签栏,方便以后配置。https://console.leancloud.app/applist.html#/apps
    在这里插入图片描述

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

  3. 权限设置(存储->结构化数据->_User-》权限
    在这里插入图片描述
    前4个都设置为指定的 指定用户用户名
    在这里插入图片描述
    在这里插入图片描述
    完成之后:
    在这里插入图片描述

  4. 获得 应用秘钥AppID和Appkey
    在这里插入图片描述

  5. 可以设置你的域名,如果有的话(这只->安全中心->下滑找到Web安全域名
    在这里插入图片描述

3.博客配置

我这里是butterfly主题

  1. 配置主题目录作为导航source\_data\butterfly.yml
    在这里插入图片描述

    menu:
      主页: / || fa fa-home
      生活||fa fa-diamond:
        - 说说 || /artitalk/ || fa fa-comments-o
    
  2. 创建页面source\artitalk\index.md

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

    发布后的效果是这样的:
    在这里插入图片描述
    这里贴出我的说说心情页面(关闭评论)

    ---
    title: artitalk
    type: artitalk
    noDate: 'true'
    comments: 'false'
    top_img: https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg
    ---
    
    <head>
      <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
      <body>
          <script>
            var img = "https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg"; //说说旁边显示的头像
            var appID = "CiSXX5nyVSt0RIztkC1oLL9P-MdYXbMMI";
            var appKEY = "vrfkqkuHou88MuRKfF3OeExc";
            var per = "5"; //每页显示说说的数量
            var username = "cungudafa"; //Leancloud中设置的用户名
            var placeholder1="只有cungudafa才能评论哦"; //在编辑说说的输入框中的占位符
            var placeholder2="没有密码,不能评论!";  //在编辑密码的输入框中的占位符
            var lazy = 1; //是否开启懒加载动画
            var bgimg = "https://gitee.com/cungudafa/source/raw/master/img/gif/Sitich/Sitich16.gif"; //背景动画
          </script>
          <div id="lazy"></div>
          <div id="artitalk"></div>
          <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
      </body>
    

三、使用方法

1. 输入内容

  1. 文字评论可~
  2. html格式评论,可!
    (你会一点点基础知识的话就可以显示图像和视频了)
  3. Markdown,可!(5.6更新)
  4. 其他自定义

当然这里是最花哨的地方了,是否支持表情包,LateX数学公式,拖拽上传等等等,开发中啦

2.输入密码

在身份验证的输入框中填入Leancloud设置的用户密码。

3.发布说说、心情

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

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

4.功能畅想

  1. 对说说在线管理(主人:在线修改和删除)
  2. 说说点赞功能

人有多大胆,。。。。。

四、更多

5.5日记,因为Artitalk还在起步阶段,如果后序有更新,我也会补充的。
5.6日记,花了一中午重构代码,优化了Artitalk界面小细节、还适配了黑夜模式
在这里插入图片描述

欢迎大家来吃螃蟹,提issue,为开源项目打call。
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页