新建一个网页，希望以卡片的方式记录下一些零碎的东西。就像发说说朋友圈一样在自己的Hexo上分享记录。
所以选中了ArtiTalk
项目地址：ArtiTalk官网、代码仓库
大概这个样子：
注册LeanCloud
LeanCloud注册地址：LeanCloud，选择国际版，国际版与国内版速度没有区别。
注册完成后，选择左上角应用-创建应用-开发版、命名，然后选择创建并打开。
选择数据存储-结构化数据-创建class-命名并直接创建。
在新建的应用中-结构化数据-用户（User）。点击添加行，输入想用的用户名及密码，这个账户就是用来发布说说用的。
回到结构化数据中，点击 class 最下面自己新建的class 。进入权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将delete和 update 也设置为跟它们一样的权限。
然后新建一个名为atComment的class，权限什么的使用默认的即可。
点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 Artitalk 的 logo。
在最左菜单栏中找到设置 -> 应用凭证，记下来 AppID 和 AppKey ，用于后续主题配置文件。
最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。
下载Artitalk
下载完成后有个 Artitalk 目录，dist 里面就是组件代码。
放入组件
在主题目录 /source/libs 目录新建一个文件夹 artitalk。
将/Artitalk/dist/css/ 下的 artitalk.min.css 复制到主题目录 /source/libs/artitalk下；
将 /Artitalk/dist/js/ 下的 artitalk.min.js 复制到主题目录 /source/libs/artitalk下；
配置主题
为了尽量和 matery 引入风格一致。
修改主题配置 _config.yml 文件，搜索关键词 libs
找到 css 在最后一行添加：
artitalk: /libs/artitalk/artitalk.min.css找到 js 在最后一行
artitalk: /libs/artitalk/artitalk.min.js如果一直想用最新版，可以换成CDN最新版：https://cdn.jsdelivr.net/npm/artitalk
新建页面
在主题目录下 /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>在主题配置文件中添加以下配置：
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: #说说字体颜色更多配置项参考官网：配置项说明
手工建页面或者执行命令
执行创建页面
hexo new page "artitalk"在 hexo 的 source 目录多个 artitalk 文件夹，修改里面的 index.md :
生成的文件并修改：
---
title: 说说
date: 2020-10-02 16:19:14
type: "artitalk"
layout: "artitalk"
---主题配置文件里添加：
ArtiTalk:
url: /artitalk
icon: fas fa-comments 色彩美化
最简单的使用是修改配置里的 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;
}更多颜色参考：
配色相关链接：
本站收藏色彩：https://zhangxiaocai.cn/color/
或者自己搜索在线配色工具。
