深入浅出 Valine（三）编写代码

前言

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

初始化和配置

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

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

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

1
2
3
4
5
6
7
8

<!-- 方法 1 -->
<script>
    new Valine({
        el:'#vcomment',
        appId: 'Your appId',
        appKey: 'Your appKey'
    })
</script>

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

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

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

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

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 appId 和 Your 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 评论系统。快去试试吧！