嘘~ 正在从服务器偷取页面 . . .

Matery 添加ArtiTalk说说模块


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,记下来 AppIDAppKey ,后面主题配置文件里会用。

最后将 _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.cssartitalk.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、色彩美化

最简单的使用是修改配置里的 color1color2color3 即可。

比如我的配置:

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/

配色: https://colordrop.io/

或者自己搜索在线配色工具。



版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Small-Rose / 张小菜 !
评论
  目录