【Hexo】matery添加Artitalk说说

1. 前言

在Hexo的matery主题中，添加Artitalk说说功能。

主要两个步骤：

1. 后台准备，将说说的数据存于LeanCloud中；
2. 页面引入，将Artitalk的js引入页面即可使用。

2. 后台准备

2.1 主要思路

1. 创建用来发布说说的用户；
2. 创建存储说说数据的表shuoshuo，并设置权限；
3. 创建存储说说评论的表atComment；
4. 记录应用的AppId和AppKey。

2.2 具体步骤

先登录LeanCloud国际版，没有的先注册。

登录之后，点击应用 –> 创建应用。

应用名称，自己可以随便取（Arititalk），默认是开发版就行，点击创建。

点选你创建好的应用。（鼠标箭头移至Artitalk点击）

选择结构化数据，点击创建Class , 新建一个shuoshuo表。

选择用户，点击添加用户，用户名自己随便取名(oyaye)，用来页面登录发布说说。

给用户表添加一个img列，用来存放用户的头像。创建好后，把图片url添加进去就行。

修改shuoshuo表的访问权限。
点击结构化数据，选择shuoshuo表，再选择权限，点击访问权限的修改按钮。

选择指定用户，输入oyaye选择用户，点击添加。

上面默认修改的是add_fields的权限，下面的create,upddate,delete也一样修改。

然后再添加一个atComment表，用来存储说说的评论数据。

最后记录以下AppId和AppKey，下面需要用到。
点击设置 –> 应用Keys，便能看到。

3. 页面引入

3.1 主要思路

1. Hexo新建 arrtitalk 页面；
2. 修改matery配置文件中的menu；
3. 在layout下添加arrtitalk.ejs引入说说。

3.2 具体步骤

进入Hexo项目目录，创建Page。

使用命令或手动创建，在source目录给出artitalk/index.md文件。
命令如下：

hexo new page "artitalk"

会在source目录下，创建一个artitalk目录以及该目录下的index.md文件。

source/artitalk/index.md文件内容如下：

---
title: 微语
type: artitalk
layout: artitalk
date: 2020-10-06 09:14:09
---

修改themes/matery/_config.yml

在menu下添加Artitalk

menu:
  Index:
    url: /
    icon: fa-home
  Tags:
    url: /tags
    icon: fa-tags
  Categories:
    url: /categories
    icon: fa-bookmark
  Archives:
    url: /archives
    icon: fa-archive
  About:
    url: /about
    icon: fa-user-circle-o
  Contact:
    url: /contact
    icon: fa-envelope
  Friends:
    url: /friends
    icon: fa-address-book
  Artitalk:
    url: /artitalk
    icon: fa-envelope

修改themes/matery/layout/_partial/navigation.ejs

在menuMap添加Artitalk，让菜单显示中文。

<%
    var menuMap = new Map();
    menuMap.set("Index", "首页");
    menuMap.set("Categories", "分类");
    menuMap.set("Tags", "标签");
    menuMap.set("Archives", "归档");
    menuMap.set("AV", "视听");
    menuMap.set("List", "清单");
    menuMap.set("Galleries", "相册");
    menuMap.set("About", "关于我");
    menuMap.set("Contact", "留言板");
    menuMap.set("Friends", "友情链接");
    menuMap.set("Navi","快捷导航")
    menuMap.set("Artitalk","微语")
%>

新增themes/matery/layout/artitalk.ejs

把下面的appId和appKey替换成自己的。

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

<main class="content">

<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<div id="artitalk_main" class="container"></div>
<script>
    new Artitalk({
        appId: 'your leancloud appId',
        appKey: 'your leancloud appKeys',
    })
</script>

</main>

运行hexo clean && hexo s , 本地运行项目测试。