Matery 添加ArtiTalk说说模块

ArtiTalk

Hexo

发布日期: 2020-10-02

作者: Small-Rose / 张小菜

更新日期: 2020-10-02

文章字数: 2.7k

阅读时长: 11 分

阅读次数:

Hexo 博客 Matery 主题添加 ArtiTalk 说说模块

一、简介

ArtiTalk是基于 LeanCloud 实现的可实时发布说说/微语的小组件。

ArtiTalk 可以对已发布的说说直接进行增删查改。

ArtiTalk 可以对说说发表评论

ArtiTalk 支持 Markdown/html 语法

花了点时间已经捣鼓完成，顺便写个教程，其实官网也有，不过如果你是Matery 主题，按步骤来即可。

其实这个小组件使用就是js和css，跟什么主题没有半毛钱关系。

ArtiTalk官网：https://artitalk.js.org

代码仓库：https://github.com/ArtitalkJS/Artitalk

二、准备工作

这部分按官网说的来。

LeanCloud 的相关准备

🌍 建议使用国际版的LeanCloud

因为国际版的leancloud不需要配置serverurl，所以推荐使用国际版，速度没有区别，如果使用国内版的leancloud别忘了填写serverurl即可

前往 LeanCloud 国际版，注册账号。

注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。

绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。

在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码，这个账户就是用来发布说说用的。

回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
然后新建一个名为atComment的class，权限什么的使用默认的即可。

点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 Artitalk 的 logo。

在最菜单栏中找到设置 -> 应用 keys，记下来 AppID 和 AppKey ，后面主题配置文件里会用。

最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。

🌍 如果使用国内版的LeanCloud

需要绑定API域名。

serverurl

三、开工

1、下载

git命令下载

git clone --depth 2 git@github.com:ArtitalkJS/Artitalk.git

下载完成后有个 Artitalk 目录，dist 里面就是组件代码。

2、放入组件

理论上只要放到相关可以访问的位置，引入正确的路径即可。

在主题目录 /source/libs 目录新建一个文件夹 artitalk。

找到刚才下载 Artitalk 目录，进入dist 目录，里面有2个文件夹：css 和 js

将 /Artitalk/dist/css/ 下的 artitalk.min.css 复制到主题目录 /source/libs/artitalk下；

将 /Artitalk/dist/js/ 下的 artitalk.min.js 复制到主题目录 /source/libs/artitalk下；

完成后，主题目录 /source/libs/artitalk下就有 artitalk.min.css 和 artitalk.min.js 两个文件了。

3、引入准备

因为尽量和 matery 引入风格一致。

修改主题配置 _config.yml 文件，搜索关键词 libs

找到 css 在最后一行添加：

artitalk: /libs/artitalk/artitalk.min.css

找到 js 在最后一行

artitalk: /libs/artitalk/artitalk.min.js

我用的是目前3.1.2固定版本，如果你一直想用最新版，可以换成CDN最新版：https://cdn.jsdelivr.net/npm/artitalk

我列一下最终效果，因为原来有很多，我就不全部列出了，只要知道最后一行加就可以了，注意对齐，如下：

libs:
  css:
    fontAwesome: /libs/awesome/css/all.css # V5.11.1
    materialize: /libs/materialize/materialize.min.css # 1.0.0
    artitalk: /libs/artitalk/artitalk.min.css # 最后一行添加

  js:
    jquery: /libs/jquery/jquery.min.js
    materialize: /libs/materialize/materialize.min.js # 1.0.0
    artitalk: /libs/artitalk/artitalk.min.js  # 最后一行添加

4、引入css

找到主题目录下 /layout/_partial/head.ejs，在头部引入css

引入

<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for(theme.libs.css.artitalk) %>">

参考我的:



    <link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for(theme.libs.css.artitalk) %>">


    <link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/matery.css') %>">
    <link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/my.css') %>">

5、模块准备

在主题目录下 /layout/ 目录新建一个 artitalk.ejs 文件。

文件内容如下:


<%- partial('_partial/bg-cover') %>

<style ype="text/css">

#pubShuo {

  margin-right: 5px;
}

#operare_artitalk .shuoshuo_input_log {
    outline-style: none;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    background-color: transparent;

    color: #0bb7fbd6;
    width: 70%;
    height: 28px;
    margin-left: 10px;
}

#artitalk_main {

  margin-top: 5px ;
  margin-left: 5%;
  margin-right: 5%;

}

#lazy{
  margin-top: 40px;
}

</style>


<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.artitalk) %>"></script>

<article id="articles11" class="container  chip-container">
  <div class="row ">

      <div class=" card">
        <div class="card-content" >
          <div class="tag-title center-align">
                <i class="fas fa-pen-alt"></i> 说说
           </div>
          <div id="artitalk_main"></div>
        </div>  
      </div>

  </div>
</article>
<script>
  new Artitalk({
        appId: "<%=  theme.artitalk.appId  %>",
        appKey: "<%=  theme.artitalk.appKey  %>",
      <% if (theme.artitalk.serverURL) { %>
          serverURL: "<%=  theme.artitalk.serverURL  %>",
      <% } %>
      <% if (theme.artitalk.lang) { %>
          lang: "<%=  theme.artitalk.lang  %>",
      <% } %>
      <% if (theme.artitalk.pageSize) { %>
          pageSize: "<%=  theme.artitalk.pageSize  %>",
      <% } %>
      <% if (theme.artitalk.shuoPla) { %>
          shuoPla: "<%=  theme.artitalk.shuoPla  %>",
      <% } %>
      <% if (theme.artitalk.avatarPla) { %>
          avatarPla: "<%=  theme.artitalk.avatarPla  %>",
      <% } %>
      <% if (theme.artitalk.motion == 0) { %>
          motion: 0,
      <% } else { %>
          motion: 1,
      <% }  %>
      <% if (theme.artitalk.bgImg) { %>
          bgImg: "<%=  theme.artitalk.bgImg  %>",
      <% } %>
      <% if (theme.artitalk.color1) { %>
          color1: "<%=  theme.artitalk.color1  %>",
      <% } %>
      <% if (theme.artitalk.color2) { %>
          color2: "<%=  theme.artitalk.color2  %>",
      <% } %>
      <% if (theme.artitalk.color3) { %>
          color3: "<%=  theme.artitalk.color3  %>",
      <% } %>
      <% if (theme.artitalk.cssUrl) { %>
          cssUrl: "<%=  theme.artitalk.cssUrl  %>",
      <% } %>
          atEmoji: {
              baiyan: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/baiyan.png",
              bishi: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bishi.png",
              bizui: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bizui.png",
              chan: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/chan.png",
              daku: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/daku.png",
              dalao: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/dalao.png",
              dalian: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/dalian.png",
              dianzan: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/dianzan.png",
              doge: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/doge.png",
              facai: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/facai.png",
              fadai: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/fadai.png",
              fanu: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/fanu.png",
           },
     })
</script>

我这里因为测试因为登录窗口变形了，所以自己加了内联样式，如果使用有问题，可以尝试删除文件里的css模块：

<style ype="text/css">

#pubShuo {

  margin-right: 5px;
}

#operare_artitalk .shuoshuo_input_log {
    outline-style: none;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    background-color: transparent;

    color: #0bb7fbd6;
    width: 70%;
    height: 28px;
    margin-left: 10px;
}

#artitalk_main {

  margin-top: 5px ;
  margin-left: 5%;
  margin-right: 5%;

}

#lazy{
  margin-top: 40px;
}

</style>

6、添加配置

在主题配置文件中添加以下配置：

artitalk: 
  appId: 你的AppId
  appKey: 你的AppKwy
  serverURL: http://xxx.zhangxiaocai.cn  #leancloud绑定的安全域名，使用国际版的话不需要填写
  lang: zh # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
  pageSize: 10  #每页说说的显示数量
  # shuoPla: #在编辑说说的输入框中的占位符
  avatarPla: https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/medias/avatar.jpg #自定义头像url的输入框的占位符
  # motion: #加载动画的开关，1为开，0为关，默认为开
  # bgImg: #说说输入框背景图片url
  # color1: #说说背景颜色1&按钮颜色1
  # color2: #说说背景颜色2&按钮颜色2
  # color3: #说说字体颜色

更多配置项参考官网：配置项说明

7、创建页面

手工建页面或者执行命令

执行创建页面

hexo new page "artitalk"

在 hexo 的 source 目录多个 artitalk 文件夹，修改里面的 index.md :

生成的文件：

---
title: 说说
date: 2020-10-02 16:19:14
---

修改为：

---
title: 说说
date: 2020-10-02 16:19:14
type: "artitalk"
layout: "artitalk"
---

8、添加链接

主题配置文件里添加：

  ArtiTalk:
    url: /artitalk
    icon: fas fa-comments

比如我的，换位置自己调一下：


menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
  ArtiTalk:
    url: /artitalk
    icon: fas fa-heartbeat

9、中文显示

找到主题目录下 layout/_partial/navigation.ejs 文件

大概在第 11 行左右添加导航菜单

    menuMap.set("ArtiTalk", "说说");

加完之后：

    menuMap.set("Index", "首页");
    menuMap.set("Tags", "标签");
    menuMap.set("Categories", "分类");
    menuMap.set("Archives", "归档");
    menuMap.set("About", "关于");
    menuMap.set("Contact", "留言薄");
    menuMap.set("Friends", "友情链接");
    menuMap.set("Daohang", "导航");
    menuMap.set("ArtiTalk", "说说");

10、色彩美化

最简单的使用是修改配置里的 color1、 color2、 color3 即可。

比如我的配置：

artitalk: 
  appId: 你的AppId
  appKey: 你的AppKwy
  serverURL: http://xxx.zhangxiaocai.cn  #leancloud绑定的安全域名，使用国际版的话不需要填写
  lang: zh # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
  pageSize: 10  #每页说说的显示数量
  # shuoPla: #在编辑说说的输入框中的占位符
  avatarPla: https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/medias/avatar.jpg #自定义头像url的输入框的占位符
  # motion: #加载动画的开关，1为开，0为关，默认为开
  # bgImg: #说说输入框背景图片url
  color1: linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%)  #说说背景颜色1&按钮颜色1
  color2:  linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%)  #说说背景颜色2&按钮颜色2
  color3: black #说说字体颜色

注意，如果使用渐变色，每条说说前面的有个小箭头会消失，因为那个样式不支持渐变色。

如果想把那个小箭头显示出来，在artitalk.ejs 样式里添加内联样式覆盖默认样式，设置颜色的就是 border-right-color 属性值。

#artitalk_main .cbp_tmtimeline > li .cbp_tmlabel::after {
  right: 100%;
  border: solid transparent;
  z-index: -1;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color:  #0bb7fbd6 ;
  border-width: 10px;
  top: 4px;
}