给博客添加个树洞吧

有时来点思绪，有时发点感叹，有时想留点痕迹，有时诉点苦闷，发微博和朋友圈还要考虑可见和是否合适，那么在博客中留下点生活足迹也是不错的…

事发突然

之前在浏览别人的博客时，看到有一个闲言的一块记录一点心情随笔，感觉挺棒的，于是抽空便想折腾一下。这过程中遇到的一些问题和解决办法，记录在这里希望方便后人。当然感谢这个功能的作者付出。最后的呈现是类似这样的：

部署后端

目前这个功能只提供了腾讯云CloudBase版本。于是我们只能按照这个手册来搞了。我使用的是手工部署的方式，你按自己情况来。如果你按上文部署后，访问自己域名尝试POST一条消息时，可能会有如下报错：

1
{“errorCode”:1,"errorMessage":“user code exception caught”,”stackTrace”:"TypeError: Cannot read property ‘content’ of undefined\n at /var/user/index.js:54:40\n at processTicksAndRejections (internal/process/task_queues.js:97:5)\n at async Runtime.exports.main [as handler] (/var/user/index.js:53:24)","statusCode":430}

这是因为前端没有处理好拉取列表为空的异常，为了避免这个问题，你可以先手工在云开发控制台的数据库->选择你创建的数据库->添加文档。或者你直接无视这个错误也是可以的。

总体，后端部署还是简单的，就是基于这一套CloudBase响应很慢。

修改前端

前端视你博客的不同主题，虽然它内容简单，但差异化比较大，我就遇到几个问题，一会细说。

页面模版

按作者的建议，把这个bb.html页面放在了我的layouts/_default下。不过我改名叫talks.html了，我不喜欢哔哔，哈哈 :)

然后建一个Markdown文件，把它放到首页目录中。（像我用stack主题的话，就是定义如下main就会在首页)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
---
title: 
layout: "talks"
menu:
    main:
        weight: -80
        params: 
            icon: clock
---
平常的一些闲言碎语

问题一：啥都不显示咋办？

打开开发者模式，从控制台可以看到一些报错， $ not define 类似的玩意。于是调试看，是其bber.js中使用了jQuery，但是我当前使用的主题是完全不用jQuery的，但bb.html它没做好引用。修改如下：

1
2
3
4
5
6
7
8
<script>
  const app = cloudbase.init({
    env: "[你的云开发环境的环境ID]", //这里是你的环境id
  })
</script>
<!-- 你可能要添加下面这一行引用jQuery -->
<script type="text/javascript" src='https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js'></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lmm214/bber@0.0.6/bber.js"></script>

问题二：记录没显示出来？

我们之前手工插入了一条记录，但为啥没显示出来呢？继续debug发现，拉取数据库解析后报错。报错原因是我们前面随手插入的一条记录没有日期啥字段。在云开发数据库后台，手工删除那条记录即可。（如果前面你没手工添加就不会有这问题吧？）

问题三：主题light/dark切换没效果？

这块就比较麻烦一点，我们从bb.html看到有一段样式定义：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  .timeline ul {margin:0;}
  .timeline ul li {background:#3b3d42;list-style-type:none;position:relative;width:3px;margin-left:2em;padding:0.8em 0 2em;}
  .timeline ul li::after {transform: rotate(45deg);content:'';background-color: #3b3d42;display: block;position: absolute;top: 10px;left: -5px;width: 0.8em;height: 0.8em;outline: 15px solid #fff;}
  .timeline ul li div {position:relative;top:-13px;left:3em;width:670px;padding:0px 16px 0px;}
  .timeline ul li p.datatime{color: #fafafa;font-size: 0.75em;font-style: italic;background-color: #3b3d42;display: inline-block;padding:0.25em 1em 0.2em 1em;}
  .timeline ul li p.datacont{white-space: pre-wrap;margin:0.65em 0 0.3em;}
  .timeline ul li p.datacont img{display:block;max-height:340px !important;}
  .timeline ul li p.datacont img[src*="emotion"]{display:inline-block;width:auto;}
  .timeline ul li p.datafrom{color: #aaa;font-size: 0.75em !important;font-style: italic;}
  .timeline ul li p{margin:0;font-size:16px;letter-spacing:1px;color: #3b3d42;}
  button{border-radius:0;}
  .dark-theme .timeline ul li div p{color:#fafafa;}
  .dark-theme .timeline ul li div p svg{fill:#fafafa;}
  .dark-theme .timeline ul li p.datafrom{color: #aaa;}
  .dark-theme .timeline ul li{background:#3b3d42;}
  .dark-theme .timeline ul li::after{outline: 15px solid #292a2d;}
  @media (max-width:860px) {
    .timeline ul li{margin-left:0;}
    .timeline ul li div{width:calc(100vw - 75px);left:30px;}
  }
</style>

这里hard code的颜色等可能和主题不相符，并且也单独定义了.dark-theme样式。简单看了一下Stack主题关于主题切换是更换了默认的一些变量来实现的。本着对前端也不太了解，但还是想着照葫芦画瓢搞一下，本来就是折腾嘛，最后还成了。

按hugo-theme-stack主题的说明，新的自定义样式要写在assets/scss/custom.scss中。我们把自己关于bber的样式移到talks.scss文件中，然后让custom.scss引用它。同时为了和主题统一颜色，复用了主题相关的全局变量/颜色（有空是不是折腾点自己喜欢的色彩啊，然而我对色彩一无所知）。

下面是custom.scss的内容，就一句话:

1
@import "talks.scss";

下面是talks.scss内容，相比原来有所改动:

 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
.timeline {
    ul {
        margin: 0;
        li {
            // background: #3b3d42;
            background: var(--card-background-selected);
            list-style-type: none;
            position: relative;
            width: 3px;
            margin-left: 2em;
            padding: 0.8em 0 2em;

            div {
                position: relative;
                top: -13px;
                left: 3em;
                width: 670px;
                padding: 0px 16px 0px;
                // color: var(-card-text-color-secondary);

                p {
                    @include respond(md) {
                        // color: #fafafa;

                        svg {
                            fill: #fafafa;
                        }
                    }
                }
            }

            p {
                margin: 0;
                font-size: 16px;
                letter-spacing: 1px;
                // color: #3b3d42;
            }
        }
    }
}

.timeline ul li::after {
    transform: rotate(45deg);
    content: "";
    // background-color: #3b3d42;
    background-color: var(--accent-color);
    display: block;
    position: absolute;
    top: 10px;
    left: -5px;
    width: 0.8em;
    height: 0.8em;
    outline: 15px solid var(--body-background);
}

.count {
    color: var(--card-text-color-main);
}

.datatime {
    font-size: 0.75em;
    font-style: italic;
    background-color: var(--card-background-selected);
    display: inline-block;
    padding: 0.25em 1em 0.2em 1em;
}

.datacont {
    color: var(--card-text-color-main);
    white-space: pre-wrap;
    font-size: 1.2em !important;
    margin: 0.65em 0 0.3em;
    img {
        display: block;
        max-height: 340px !important;
    }
    img[src*="emotion"] {
        display: inline-block;
        width: auto;
    }
}

.datafrom {
    color: var(--card-text-color-tertiary);
    font-size: 0.75em !important;
    font-style: italic;
}

@media (max-width: 860px) {
    .timeline ul li {
        margin-left: 0;
    }
    .timeline ul li div {
        width: calc(100vw - 75px);
        left: 30px;
    }
}

现在就让它和我们主题比较一致了。

问题四：关于时间的显示

人家显示的是一天前等，我们是直接显示绝对时间。感觉最近N天有个倒计时还是挺好的，但现有不支持。看了一下代码改应该不难，只是那代码为什么把大堆html的拼凑在逻辑中处理。虽然仅简单学了点Vue概念，UI和逻辑分离，数据绑定的思想还是有的。因此暂时不想在当前代码下修改了，等有时间重写一下整块前端好了。

问题五：加载时间比较长

感觉每次要几秒才刷新出来，这有点难受啊。可以通过Chrome的开发工具网络查看消耗：主要原因有一是单个请求执行慢，二是消息是串行执行的。从源码来看有一定并行可能性，但提效应该有限，最需要改进的是后端基于CloudBase，似乎访问DB也出奇的慢。好在整个数据的存取结构简单清晰，未来动手写个服务部署在自己的k8s集群中应该能大缓解这问题。