深入浅出 Valine(三)编写代码

前言

在前两篇文章中,我们已经完成了 Valine SDK 的配置和 Leancloud 的设置。现在,我们来学习如何编写代码以在 Hexo 博客中使用 Valine 评论系统。

初始化和配置

在 Hexo 博客中,你可以通过两种方法来初始化和配置 Valine。

方法 1:直接初始化和配置

你可以在任意位置直接使用以下代码初始化和配置 Valine:

html
1
2
3
4
5
6
7
8
<!-- 方法 1 -->
<script>
    new Valine({
        el:'#vcomment',
        appId: 'Your appId',
        appKey: 'Your appKey'
    })
</script>

请将 Your appIdYour appKey 替换为你在 Leancloud 中创建的应用所对应的 AppID 和 AppKey。

在上述代码中,el:'#vcomment' 表示将 Valine 渲染到 id 为 vcomment 的 HTML 元素中。你可以根据需要修改此值以适应你的博客主题。

方法 2:使用实例化对象进行初始化和配置

你也可以使用实例化对象的方法来进行 Valine 的初始化和配置:

html
1
2
3
4
5
6
7
8
9
<!-- 方法 2 -->
<script>
    var valine = new Valine();
    valine.init({
        el:'#vcomment',
        appId: 'Your appId',
        appKey: 'Your appKey'
    })
</script>

在上述代码中,首先我们创建了一个 Valine 的实例对象 valine,然后调用 init() 方法进行初始化和配置。同样,你需要将 Your appIdYour appKey 替换为你在 Leancloud 中创建的应用所对应的 AppID 和 AppKey。

将代码插入到 Hexo 主题的布局文件中

在选择了适合的初始化和配置方法后,你需要将上述代码插入到 Hexo 主题的布局文件中,以便 Valine 可以正确地加载和运行。一般而言,Hexo 主题的布局文件位于 your-hexo-blog/themes/your-theme/layout/ 目录中。

常见的布局文件包括 post.ejs(文章页面)、index.ejs(首页)、archive.ejs(归档页面)等。

找到你希望在其中加入 Valine 的布局文件,然后在其中的合适位置插入上述的代码。如需在多个布局文件中加入 Valine,可重复操作。

结尾

你已经学会了如何编写代码以在 Hexo 博客中使用 Valine 评论系统。快去试试吧!

深入浅出 Valine(三)编写代码

https://blog.tsinbei.com/archives/1086/

文章作者
SCH
发布于

2023-01-20

修改于

2023-07-13

许可协议

CC BY-NC-ND 4.0

# Hexo  Valine

评论

昵称
邮箱
网址
暂无