Waline+live2D部署

教程

评论系统

官网服务端配置参考文档 Waline

参考官方说明文档在LeanCloud创建数据库 在vercel创建项目

本主题修改

在 Cactus 主题中，可以通过 themes\cactus_config.yml 开启并配置 Waline：

1
2
3
4
5
6
7
8
9
10
11
12
13
waline:
  enabled: true # 是否开启
  serverURL: '' # Waline Vercel服务端地址，替换为自己的服务端地址
  avatar: mm # 头像风格
  meta: ['nick', 'mail', 'link'] # 自定义评论框上面的三个输入框的内容
  pageSize: 10 # 评论数量多少时显示分页
  lang: zh-CN # 语言, 可选值: en, zh-CN
  # Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.
  visitor: false # 文章阅读统计
  comment_count: false # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
  requiredFields: [nick, mail] # 设置用户评论时必填的信息，[nick,mail]: [nick] | [nick, mail]
  emoji: https://npm.elemecdn.com/@waline/emojis@1.2.0/bilibili

配置文件的属性可以参考：https://waline.js.org/reference/client/props.html

接下来修改 themes\cactus\layout\_partial\comments.ejs 支持 Waline：将文件内代码更改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if(page.comments && theme.disqus.enabled){ %>
    <div class="blog-post-comments">
        <div id="disqus_thread">
            <noscript><%= __('comments.no_js') %></noscript>
        </div>
    </div>
<% } %>
<% if(page.comments && theme.utterances.enabled){ %>
    <div class="blog-post-comments">
        <div id="utterances_thread">
            <noscript><%= __('comments.no_js') %></noscript>
        </div>
    </div>
<% } %>
<% if(page.comments && theme.waline && theme.waline.enabled){ %>
    <div class="blog-post-comments">
        <div id="waline_thread"></div>
    </div>
<% } %>

其实就是追加了一个waline_thread。page.comments 表示当前页面是否支持评论，在文章前面设置，Cactus 主题默认在文章中开启，在其他页面中关闭； 这个是在每个文章前边设置

1
2
3
4
5
6
7
8
title: Tags and Categories
date: 2017-12-24 23:29:53
tags:
- Foo
- Bar
categories: 
- Baz
comments: true // 则为开启评论 默认开启

修改css样式，在themes/cactus/layout/_partial/head.ejs 文件底部增加waline.css样式

1
2
3
4
5
6
7
8

    <!-- Waline Comments -->
    <% if (theme.waline.enabled){ %>
<!--        <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>-->
        <!--        下方为使用国内加速版本-->
        <link rel="stylesheet" href="https://s4.zstatic.net/npm/@waline/client@2.15.8/dist/waline.css"/>
    <% } %>

修改js样式，在themes/cactus/layout/_partial/scripts.ejs文件底部增加引用waline.mjs文件

注意: `mjs`文件与`js`文件不同，引用的是mjs文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!-- Waline Comments -->
<% if (theme.waline.enabled){ %>
<script type="module">
    import { init } from 'https://s4.zstatic.net/npm/@waline/client@2.15.8/dist/waline.mjs';

    var EMOJI = ['//unpkg.com/@waline/emojis@1.2.0/qq']
    var META = ['nick', 'mail', 'link'];
    var REQUIREDFIELDS = ['nick', 'mail', 'link'];

    var emoji = '<%= theme.waline.emoji %>'.split(',').filter(function(item){
        return item !== ''; // filter()返回满足不为空item
    });
    emoji = emoji.length == 0 ? EMOJI : emoji;

    var meta = '<%= theme.waline.meta %>'.split(',').filter(function(item){
        return META.indexOf(item) > -1; // filter()返回满足META.indexOf(item) > -1为true的item
    });
    meta = meta.length == 0 ? META : meta;

    var requiredFields = '<%= theme.waline.requiredFields %>'.split(',').filter(function(item){
        return REQUIREDFIELDS.indexOf(item) > -1; // filter()返回满足META.indexOf(item) > -1为true的item
    });
    requiredFields = requiredFields.length == 0 ? REQUIREDFIELDS : requiredFields;

    document.addEventListener('DOMContentLoaded', function () {

        const walineElement = document.getElementById('waline_thread');

        if (walineElement) {
            init({
                el: '#waline_thread',
                serverURL: '<%= theme.waline.serverURL %>', // Waline 的服务端地址
                path: '<%= theme.waline.path %>' == '' ? window.location.pathname : '<%= theme.waline.path %>', // 当前文章页路径，用于区分不同的文章页，以保证正确读取该文章页下的评论列表
                lang: '<%= theme.waline.lang %>' == '' ? 'zh-CN' : '<%= theme.waline.lang %>', // 多语言支持，未设置默认英文
                emoji: emoji,
                dark: '<%= theme.waline.dark %>', // 暗黑模式适配
                commentSorting: '<%= theme.waline.commentSorting %>' == '' ? 'latest' : '<%= theme.waline.commentSorting %>', // 评论列表排序方式
                meta: meta, // 评论者相关属性
                requiredFields: requiredFields, // 设置必填项，默认匿名
                login: '<%= theme.waline.login %>', // 登录模式状态
                wordLimit: '<%= theme.waline.wordLimit %>', // 评论字数限制
                pageSize: '<%= theme.waline.pageSize %>' == '' ? 10 : '<%= theme.waline.pageSize %>', // 评论列表分页，每页条数
                imageUploader: '<%= theme.waline.imageUploader %>', // 自定义图片上传方法
                highlighter: '<%= theme.waline.highlighter %>', // 代码高亮
                placeholder: '<%= theme.waline.placeholder %>',
                avatar: '<%= theme.waline.avatar %>',
                visitor: '<%= theme.waline.visitor %>',
                comment_count: '<%= theme.waline.comment_count %>',
            });
        }
    });
</script>
<% } %>

然后部署就可以了

参考文章sx1ang.github.io

嘉然live2D

在themes/cactus/layout/_partial/footer.ejs文件底部引用嘉然的js和css

1
2
3
4
5
6
7
8
9
10

<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/TweenLite.js"></script>
<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/live2Dcubismcore.min.js"></script>
<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/pixi.min.js"></script>
<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/cubism4.min.js"></script>
<link href="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.0/static/pio.css" rel="stylesheet" type="text/css"/>
<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/pio.js"></script>
<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/pio_sdk4.js"></script>
<script src="https://s4.zstatic.net/npm/aboyzy-live2d@1.0.1/static/load.js"></script>

参考文章blog.vincy1230.net和https://www.moeshou.com/310/