给Hexo添加说说功能

news2024/12/23 0:33:31

首发博客地址

官网地址


效果

alt

👀 前言


GitHub 仓库:Artitalk.js

🎉 特性

  • 增删查改全方面支持
  • 支持针对每条说说的评论
  • 支持 Markdown/html 语法
  • 支持图片上传

🚀 快速使用


下列主题已将本项目整合进去,可以直接使用。 感谢以下主题对本项目的支持~

hexo-theme-volantis

hexo-theme-cards

hexo-theme-butterfly

hexo-theme-matery

gridea-theme-dark

hexo-theme-MengD

🚀 开始使用


🌈 LeanCloud 的相关准备

TIP

「🎃 与 Valine 在同一个页面使用」

如果迫切需要将 Artitalk 与 Valine 在同一个页面使用,可以通过 Artitalk 与 Valine 使用同一个 LeanCloud 的应用来解决。

「🌍 建议使用国际版的 LeanCloud」

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

👀 与valine在同一页面使用

如果有这个需要,可以将 artitalk 与 valine 存放在同一个应用中。可以有效避免同一个页面使用两个leancloud应用所产生的冲突。

  1. 前往 LeanCloud 国际版,注册账号。
  2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
  3. 绑定完成之后点击 创建应用,应用名称随意,接着在 结构化数据中创建 class,命名为 shuoshuo
  4. 在你新建的应用中找到 结构化数据下的 用户。点击 添加用户,输入想用的用户名及密码。
  5. 回到 结构化数据中,点击 class 下的 shuoshuo。找到权限,在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户,输入你刚才输入的用户名会自动匹配。为了安全起见,将 deleteupdate 也设置为跟它们一样的权限。
  6. 然后新建一个名为 atComment的class,权限什么的使用默认的即可。
  7. 点击 class 下的 _User 添加列,列名称为 img,默认值填上你这个账号想要用的发布说说的头像url,这一项不进行配置,说说头像会显示为默认头像 —— Artitalk 的 logo。
  8. 在最菜单栏中找到设置-> 应用 keys,记下来 AppIDAppKey ,一会会用。
  9. 最后将 _User 中的权限全部调为指定用户,或者数据创建者,为了保证不被篡改用户数据以达到强制发布说说。

❗ 关于设置权限的这几步

这几步一定要设置好,才可以保证不被 “闲人” 破解发布说说的验证

🌼 开始使用

🎅 配置项的说明

可以通过修改配置项快捷更改部分功能,点我查看详细说明

🔨 测试使用

如果上面的配置没有问题,打开你的页面,点击页面右下角的登录输入用户密码后,在输入框中输入说说,点击发布即可。

🔨 说说内容的删除

登录后点击说说内容框右上角的 x,点击确定删除即可。

🔨 说说内容的修改

点击想要修改的那条说说的头像,会自动跳转到只有一条提示语以及输入框的界面,在输入框中编辑完之后点击保存即可

注:说说内容的修改与删除在 LeanCloud 后台也可进行操作

🔨 评论的使用

点击每条说说右下角的评论图标即可查看针对本条说说的评论或者对本条说说发起评论,再次点击会刷新页面已达到返回的作用

填写邮箱以获得 gravatar 的头像

🦄 在 Typecho 中使用


  1. 登陆后台后新增独立页面

  2. 标题随意填,内容填为

  3. 发布页面

🍖 在 Vue 单页项目中使用


例如 vuepress Gridsome 等博客框架是由 Vue 构建的。

在Gridsome中的准备

gridsome.config.js中引入 artitalk

在普通Vue项目中的准备

<YOUR_PROJ>/public/index.html中引入 artitalk

新建 src/components/Artitalk.vue(VuePress: .vuepress/components/Artitalk.vue),添加以下内容

如果需要加入 Artitalk 的页面为 .md(例如 VuePress),直接在其中写入 <Artitalk /> 即可。

如果为 .vue (开发项目) 除了写入 <Artitalk />,还需要加入以下内容

🚀 安全性


由于 leancloud 的机制,应用的 Appid 以及 Appkey 均会暴漏在前端,可能会遭受到其他人的恶意攻击。 如果你在担心这个问题,你可以使用Artitalk_SafeMode

🕸 使用 cdn


🕸 UNPKG

⭐ 获取最新

🍳 获取指定版本

使用指定版本,在版本号填上对应版本即可,例如:https://unpkg.com/artitalk@1.1.15/artitalk.js

关于版本可查看:https://unpkg.com/artitalk/

🕸 JsDelivr(国内无法使用!!!)

⭐ 获取最新

🍳 获取指定版本

使用指定版本,在版本号填上对应版本即可,例如:https://cdn.jsdelivr.net/npm/artitalk@1.1.15

关于版本可查看:https://cdn.jsdelivr.net/npm/artitalk/

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/964501.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux——常用命令大汇总(带你快速入门Linux)

纵有疾风起&#xff0c;人生不言弃。本文篇幅较长&#xff0c;如有错误请不吝赐教&#xff0c;感谢支持。 &#x1f4ac;文章目录 一.终端和shell命令解析器终端和shell命令解析器概述终端提示符的格式常用快捷键 二.Linux命令格式帮助文档&#xff1a;man 三.目录基础知识Wind…

什么是RTC

参考&#xff1a; https://zhuanlan.zhihu.com/p/377100294 RTC&#xff08;Real time communication&#xff09;实时通信&#xff0c;是实时音视频的一个简称&#xff0c;我们常说的RTC技术一般指的是WebRTC技术&#xff0c;已经被 W3C 和 IETF 发布为正式标准。由于几乎所…

tableau基础学习2:时间序列数据预处理与绘图

文章目录 数据预处理1. 原始数据2. 合并数据集2. 创建计算字段 绘图分析1. 趋势分析2. 计算字段趋势分析 这一部分&#xff0c;我们记录一些分析时序趋势的分析步骤 数据预处理 1. 原始数据 原始数据是excel表格&#xff0c;其中包含三个Sheet页&#xff0c; 这里我们选择两…

老程序员教你如何笑对问题,轻松培养逻辑思考和解决问题的能力

原文链接 ​​​​​​​老程序员教你如何笑对问题&#xff0c;轻松培养逻辑思考和解决问题的能力 故事发生在一个阳光明媚的午后&#xff0c;我们的主人公&#xff0c;老李&#xff0c;一位拥有十年工作经验的 Python 老程序员&#xff0c;正悠哉地在喝着咖啡。 这时&#x…

VisualStudio配置pybind11-Python调用C++方法

个人测试下来Debug生成的dll改pyd&#xff0c;py中import会报错gilstate->autoInterpreterState 如果遇到同样问题使用Release吧 目录 1.安装pybind11 1.pip&#xff1a; 2.github&#xff1a; 2.配置VS工程 2.在VC目录中的包含目录添加&#xff1a; 3.在VC目录中的库目录…

Debezium的三种部署方式

Debezium如何部署 debezium 有下面三种部署方式,其中最常用的就是 kafka connect。 kafka connect 一般情况下,我们通过 kafka connect 来部署 debezium,kafka connect 是一个框架和运行时: source connectors:像 debezium 这样将记录发送到 kafka 的source connectors…

JavaScript基础语法04——输入输出语法

嗨&#xff0c;大家好&#xff0c;我是雷工。 今天学习JavaScript基础语法&#xff0c;输入输出语法&#xff0c;以下为学习笔记。 1、输出语法&#xff1a; 1.1、alert&#xff08;&#xff09; 作用&#xff1a;界面弹出警告对话框。 示例&#xff1a; <script>aler…

数据结构入门 — 队列

本文属于数据结构专栏文章&#xff0c;适合数据结构入门者学习&#xff0c;涵盖数据结构基础的知识和内容体系&#xff0c;文章在介绍数据结构时会配合上动图演示&#xff0c;方便初学者在学习数据结构时理解和学习&#xff0c;了解数据结构系列专栏点击下方链接。 博客主页&am…

Linux centos7 bash编程(循环与条件判断)

在编程训练中&#xff0c;循环结构与条件判断十分重要。 根据条件为真为假确定是否执行循环。 有时&#xff0c;根据条件的真假结果&#xff0c;决定执行哪些语句&#xff0c;这就是分支语句。 为了训练分支语句与循环语句&#xff0c;我们设计一个案例&#xff1a; 求一组…

Python库-coverage测试覆盖率

Coverage.py 是用于测量Python程序代码覆盖率的工具。它 监视程序&#xff0c;注意代码的哪些部分已执行&#xff0c;然后 分析源以识别可以执行但未执行的代码。 覆盖率测量通常用于衡量测试的有效性。它 可以显示测试正在执行代码的哪些部分&#xff0c;以及哪些部分是 不。…

CentOS配置Java环境报错-bash: /usr/local/jdk1.8.0_381/bin/java: 无法执行二进制文件

CentOS配置Java环境后执行java -version时报错&#xff1a; -bash: /usr/local/jdk1.8.0_381/bin/java: 无法执行二进制文件原因是所使用的jdk的版本和Linux内核架构匹配不上 使用以下命令查看Linux架构&#xff1a; [rootlocalhost ~]# cat /proc/version Linux version 3.1…

C语言:大小端字节序存储

一、大小端字节序存储介绍 大端字节序存储模式&#xff1a;把一个数据低位字节处的数据存放在高地址处&#xff0c;数据高位字节处的数据存放在低地址处 小端字节序存储模式&#xff1a;把一个数据低位字节处的数据存放在低地址处&#xff0c;数据高位字节处的数据存放在高地址…

经管博士科研基础【12】包络定理

当我们知道一个函数的最优解时&#xff0c;我们要求解这一个函数的值函数关于函数中某一个参数的导数&#xff0c;那么就可以使用包络定理。 1. 无约束条件下的包络定理 函数在其极值点处对一个参数&#xff08;参数不是自变量&#xff09;取偏导数的结果&#xff0c;等价于这…

5G NR:RACH流程 -- Msg1发送时RA-RNTI的计算及功率控制

前言 如果阅读了这两篇博文《如何产生PRACH preamble》和《如何选择合适的时频资源发送preamble》&#xff0c;那么对msg1有了基本了解&#xff0c;但是真到了Msg1发送的时候&#xff0c;该怎么处理呢&#xff0c;这里涉及到两个问题&#xff1a; 问题1&#xff1a;发…

5、Spring之Bean生命周期源码解析(销毁)

Bean的销毁过程 Bean销毁是发送在Spring容器关闭过程中的。 在Spring容器关闭时,比如: AnnotationConfigApplicationContext context = new AnnotationConfigApplicationContext(AppConfig.class); UserService userService = (UserService) context.getBean("userSe…

【CLIP详读】

个人网站&#xff1a;https://tianfeng.space 一、前言 OpenAI的CLIP项目自从推出以来&#xff0c;CLIP引起了广泛的关注。它的方法看似简单&#xff0c;但效果非常出色&#xff0c;许多结果令人惊叹。例如&#xff0c;预训练模型可以在任何视觉分类数据集上实现出色的效果&a…

python中super()用法

super关键字的用法 概述作用语法使用示例1.通过super() 来调用父类的__init__ 构造方法&#xff1a;2.通过supper() 来调用与子类同名的父类方法2.1 单继承2.2 多继承 概述 super() 是python 中调用父类&#xff08;超类&#xff09;的一种方法&#xff0c;在子类中可以通过su…

Zookeeper 入门

第 1 章 Zookeeper 入门 1.1概述 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它负责存储和管理大家都关心的数据&#xff0c;然后接受观察者的注册&#xff0c;一旦这些数据的状态发生变化&#xff0c;Zookeeper就将…

Keysight PXA 常用 visa指令

Keysight PXA N9030B 保存图片

栈和队列篇

目录 一、栈 1.栈的概念及结构 1.1栈的概念 1.2栈的结构示意图 2.栈的实现 2.1支持动态增长的栈的结构 2.2压栈&#xff08;入栈&#xff09; 2.3出栈 2.4支持动态增长的栈的代码实现 二、队列 1.队列的概念及结构 1.1队列的概念 1.2队列的结构示意图 2.队列的实…