Lavender's Blog

浩瀚众星,皆降为尘

好故事,值得慢一点

新增页面:个人随笔页面(说说)

#前言

在一个静态框架中,实现随笔页面随时发布状态
参考官方文档 Artitalk.js - 开始使用

#实现

#新建页面

  • hexo 文件夹中,新建页面

    hexo new page talking

#关闭评论

  • 关闭评论:在 front-matter 里加入 comment: false 关闭本页面的评论;

以下部分内容直接复制的官方文档,复制过来保证完整性
参考官方文档 Artitalk.js - 开始使用

#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 权限设置为指定用户,输入你刚才输入的用户名会自动匹配。为了安全起见,将 delete 和 update 也设置为跟它们一样的权限。
  6. 然后新建一个名为 atComment 的 class,权限什么的使用默认的即可。
  7. 点击 class 下的 _User 添加列,列名称为 img ,默认值填上你这个账号想要用的发布说说的头像 url,这一项不进行配置,说说头像会显示为默认头像 —— Artitalk 的 logo。
  8. 在最菜单栏中找到设置 -> 应用 keys,记下来 AppID 和 AppKey ,一会会用。
  9. 最后将 _User 中的权限全部调为指定用户,或者数据创建者,为了保证不被篡改用户数据以达到强制发布说说。

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

到此步是官方文档中的配置内容

#开始使用

  • 在 index.md 中加入以下代码
{% raw %}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>
<div id="artitalk_main"></div>
<script>
      new Artitalk ({
            appId: '',  		//appid
            appKey: '',  		//appkey
            serverURL: '',		//国际版需要
            pageSize: 10,
            shuoPla: ' 发布一些东西吧~',  //相当于 placehoder,发布时显示在输入框
            color1: 'url ("https://xxxxxxxx.png")',  //背景为图片形式
            color2: 'linear-gradient (-45deg, #3A405A, #AEC5EB, #F9DEC9, #E9AFA3) 0% 0% / 400% 400%',  //背景为渐变形式
            color3: '#111'  //字体颜色
})
</script>
{% endraw %}
  • 其他配置项,可以参考官方文档:配置项 | Artitalk.js

#问题的修复

  • 此时生成后,但是存在一个问题,第一次加载页面会加载不出来,查看报错,显示 artitalk 未定义
  • 解决办法(目前,感觉应该有其他优化方法,不过这个方法目前可行,影响不大)
  • 找见 layout/_partials/head/head.njk ,在 link 标签下新增外部引用的 js
<link rel="alternate" type="application/rss+xml" title="{{config.title}}" href="{{ full_url_for('/rss.xml') }}" />
<link rel="alternate" type="application/atom+xml" title="{{config.title}}" href="{{ full_url_for('/atom.xml') }}" />
<link rel="alternate" type="application/json" title="{{config.title}}" href="{{ full_url_for('/feed.json') }}" />

修改为(新增)

<link rel="alternate" type="application/rss+xml" title="{{config.title}}" href="{{ full_url_for('/rss.xml') }}" />
<link rel="alternate" type="application/atom+xml" title="{{config.title}}" href="{{ full_url_for('/atom.xml') }}" />
<link rel="alternate" type="application/json" title="{{config.title}}" href="{{ full_url_for('/feed.json') }}" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>

目前解决问题

完成!

更新于 阅读次数 … 次

请我喝[茶]~( ̄▽ ̄)~*

Lavender 微信支付

微信支付

Lavender 支付宝

支付宝