前言

因为在平时我会刷到一些有趣信息想要分享，所以我第一时间想到了发即刻短文，但是一般发即刻短文都类似发动态一样，然后我就想，可以给一条即刻短文附上它的属性，让这条短文有它自己指向的话题，之后我就立马加上了这个话题标签。

在加上话题标签之后，我又看了看即刻短文的作者标签，感觉这个标签有点多余呀~，想到这里，我开始联想作者这个标签能和什么有关联呢？灵感闪现，如果让读者在看短文的内容时就像是在听作者在旁边绘声绘色讲似的，这样会不会体验感更好，也更能让读者读到此时作者的心情和状态，然后我就马不停蹄地给作者这个标签加上了可以选择表情的样式，让作者在发布的时候可以选择自己当前的心情。

效果预览

修改添加作者心情和短文话题的代码

由于即刻短文不是btf主题原生的页面，所以也找不到原生对照，下面我就直接附上调整过的pug代码了，在essay.pug文件中找到代表标签的代码段，然后添加如下代码：

hr
.bber-bottom
  .bber-info
    .bber-info-time
      - var datedata = new Date(item.date).toISOString()
      i.far.fa-clock
      time.datatime(datetime= item.date)= datedata
+    if item.feel
+      .bber-info-feel
+        if item.feel == "laugh-beam"
+          i.far.fa-laugh-beam
+        else if item.feel == "smile-wink"
+          i.far.fa-smile-wink
+        else if item.feel == "laugh-wink"
+          i.far.fa-laugh-wink
+        else if item.feel == "grin-wink"
+          i.far.fa-grin-wink
+        else if item.feel == "angry"
+          i.far.fa-angry
+        else if item.feel == "grin-squint-tears"
+          i.far.fa-grin-squint-tears
+        else if item.feel == "thumbs-up"
+          i.far.fa-thumbs-up
+        else if item.feel == "lightbulb"
+          i.far.fa-lightbulb
+        else if item.feel == "grin-alt"
+          i.far.fa-grin-alt
+        else if item.feel == "frown"
+          i.far.fa-frown
+        else if item.feel == "dizzy"
+          i.far.fa-dizzy
+        else if item.feel == "laugh-squint"
+          i.far.fa-laugh-squint
+        else if item.feel == "grin-stars"
+          i.far.fa-grin-stars
+        else if item.feel == "surprise"
+          i.far.fa-surprise
+        else if item.feel == "paper-plane"
+          i.far.fa-paper-plane
+        span="Shine"
+    if item.topic
+      .bber-info-topic
+        i.far.fa-hashtag
+        span=item.topic

其中的关键影响作者心情标签和话题标签的代码为如下这一段：

//- 作者心情标签和话题标签的页面结构代码
if item.feel
  .bber-info-feel
    if item.feel == "laugh-beam"
      i.far.fa-laugh-beam
    else if item.feel == "smile-wink"
      i.far.fa-smile-wink
    else if item.feel == "laugh-wink"
      i.far.fa-laugh-wink
    else if item.feel == "grin-wink"
      i.far.fa-grin-wink
    else if item.feel == "angry"
      i.far.fa-angry
    else if item.feel == "grin-squint-tears"
      i.far.fa-grin-squint-tears
    else if item.feel == "thumbs-up"
      i.far.fa-thumbs-up
    else if item.feel == "lightbulb"
      i.far.fa-lightbulb
    else if item.feel == "grin-alt"
      i.far.fa-grin-alt
    else if item.feel == "frown"
      i.far.fa-frown
    else if item.feel == "dizzy"
      i.far.fa-dizzy
    else if item.feel == "laugh-squint"
      i.far.fa-laugh-squint
    else if item.feel == "grin-stars"
      i.far.fa-grin-stars
    else if item.feel == "surprise"
      i.far.fa-surprise
    else if item.feel == "paper-plane"
      i.far.fa-paper-plane
    span="Shine"
if item.topic
  .bber-info-topic
    i.far.fa-hashtag
    span=item.topic

如何自行添加作者心情图标

在下面这个网站中就可以找到一些其他的心情图标了，将他们替换到上面的关键代码中，就可以完成修改添加作者心情图标的操作了。

https://fontawesome.com/v5/icons/categories/emoji?f=classic&s=regular

添加表情的操作类似如下这样：

if item.feel
  .bber-info-feel
+    if item.feel == "laugh-beam"
+      i.far.fa-laugh-beam
+    else if item.feel == "smile-wink"
+      i.far.fa-smile-wink
+    else if item.feel == "laugh-wink"
+      i.far.fa-laugh-wink
+    else if item.feel == "grin-wink"
+      i.far.fa-grin-wink
+    else if item.feel == "angry"
+      i.far.fa-angry
+    else if item.feel == "grin-squint-tears"
+      i.far.fa-grin-squint-tears
+    else if item.feel == "thumbs-up"
+      i.far.fa-thumbs-up
+    else if item.feel == "lightbulb"
+      i.far.fa-lightbulb
+    else if item.feel == "grin-alt"
+      i.far.fa-grin-alt
+    else if item.feel == "frown"
+      i.far.fa-frown
+    else if item.feel == "dizzy"
+      i.far.fa-dizzy
+    else if item.feel == "laugh-squint"
+      i.far.fa-laugh-squint
+    else if item.feel == "grin-stars"
+      i.far.fa-grin-stars
+    else if item.feel == "surprise"
+      i.far.fa-surprise
+    else if item.feel == "paper-plane"
+      i.far.fa-paper-plane
    span="Shine"

添加作者心情和话题的样式

由于不是原生的btf样式，所以贴上整理过的样式代码，在essay.css文件中添加如下的css样式代码：

/* 作者心情标签和话题标签的css样式 */
#bber > section > ul > li > div .bber-info-feel {
  color: var(--anzhiyu-fontcolor);
  font-size: 0.7rem;
  background-color: var(--anzhiyu-gray-op);
  padding: 0px 8px;
  border-radius: 20px;
  cursor: default;
  display: flex;
  align-items: center;
  margin-right: 4px;
  margin-top: 4px;
}
#bber > section > ul > li > div .bber-info-topic {
  color: var(--anzhiyu-fontcolor);
  font-size: 0.7rem;
  background-color: var(--anzhiyu-gray-op);
  padding: 0px 8px;
  border-radius: 20px;
  cursor: default;
  display: flex;
  align-items: center;
  margin-right: 4px;
  margin-top: 4px;
}

#bber .bber-info .far.fa-hashtag {
  margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-feel span,
#bber > section > ul > li > div .bber-info-feel {
  margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-topic span,
#bber > section > ul > li > div .bber-info-topic {
  margin-right: 4px;
}

#bber .bber-info-feel i {
  margin-right: 4px;
}

如何使用作者心情标签和话题标签

使用作者心情标签和话题标签的示例如下：

- class_name: Short Text
  essay_list:
    - content: xxxxxx
      date: 2023/09/25 2:13:00
      feel: thumbs-up
      topic: 分享
    - content: xxxxxx
      date: 2023/09/25 2:13:00
      feel: laugh-beam
      topic: 分享