给订阅转换器加上 Twikoo 评论并适配暗黑模式

给订阅转换器加上 Twikoo 评论并适配暗黑模式

CM 已经教了大家如何搭建自己的订阅转换器后端 API 和前端页面，今天给大家分享一点进阶玩法，给订阅转换器前端页面添加 Twikoo 评论模块并适配暗黑模式

  • 样式预览：明亮模式

image.png

  • 样式预览：暗黑模式

image.png

🏅 前置条件

  • 已经部署了订阅转换器后端 API，详见 CM教程，这步不是必须的，你也可以使用其他大佬搭建好的后端
  • 已经部署了 Twikoo 评论模块，详见 官方教程，推荐使用 Vercel 一键部署

🏅 部署魔改前端

仓库地址：yutian81/sub-web: 带评论的Subconverter

部署步骤：

  • Fork 上面的仓库
  • 修改 src/views/Subconverter.vue 文件约 1417 行，将 envID 替换为你自己部署的地址
1
envId: 'https://twikoo.24811213.xyz/',  // 此处替换为你自己额 twikoo 地址
  • 登录 Vercel 链接你 fork 的仓库，以默认参数直接部署

关于如何修改默认后端、默认转换配置文件，参考 CM的部署教程 即可，不复述

🏅 为评论适配暗黑模式

部署完成后，转换器前端底部已经有了评论模块，它在明亮模式下是正常的，但是，默认情况下，它的暗黑模式按钮、图标等部分元素是深色的，看不清楚，看着闹心

如果你是 fork 我的仓库部署的，那么这个问题不存在，会跟我的截图是一样的效果

关键是 src/assets/css/dark.min.css 文件的改动，加入 twikoo 暗黑模式样式，在原有 CSS 文件顶部加入以下代码 （我的仓库已经修改过）：

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
99
100
101
102
103
104
105
106
107
108
109
110
111
/* ======================= */
/* Twikoo 暗黑模式变量 */
/* ======================= */
.dark-mode {
  --twikoo-bg: rgba(0, 0, 0, 0);
  --twikoo-text: #e0e0e0;
  --twikoo-border: #42444a;
  --twikoo-button-bg: #363636;
  --twikoo-button-text: #e0e0e0;
  --twikoo-link: #66b1ff;
  --twikoo-hover: #2c2c2c;
  --twikoo-icon-filter: invert(0.8);
}

/* ======================= */
/* Twikoo 专属暗黑样式 */
/* ======================= */
/* 评论容器 */
.dark-mode .twikoo .tk-comments-container > .tk-comment,
.dark-mode .twikoo .tk-comments .tk-submit{
  background: var(--twikoo-bg);
  color: var(--twikoo-text);
  border: none;
  /* border: 1px solid var(--twikoo-border); */
  border-radius: 10px;
  padding: 5px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

/* 输入区域 */
.dark-mode .tk-input.el-textarea textarea {
  background: var(--twikoo-bg);
  color: var(--twikoo-text);
  border: 1px solid var(--twikoo-border);
  border-radius: 8px;
}

/* 按钮 */
.dark-mode .tk-row.actions button {
  background: var(--twikoo-button-bg);
  color: var(--twikoo-button-text);
  border: 1px solid var(--twikoo-border);
}

.dark-mode .tk-row.actions button:hover {
  background: var(--twikoo-hover);
}

/* 链接 */
.dark-mode .tk-comments-container a {
  color: var(--twikoo-link);
}

/* 头像 */
.dark-mode .tk-avatar {
  border: 2px solid var(--twikoo-border);
  filter: var(--twikoo-icon-filter);
}

/* 评论内容和评论数 */
.dark-mode .tk-comments-count,
.dark-mode .tk-content {
  color: var(--twikoo-text);
}

/* 回复按钮 */
.dark-mode .tk-action-link {
  color: var(--twikoo-link) !important;
}

/* 时间戳 */
.dark-mode .tk-time {
  color: var(--twikoo-text);
  opacity: 0.7;
}

/* 图标处理 */
.dark-mode .tk-icon {
  filter: var(--twikoo-icon-filter);
}

/* Twikoo 移动端操作栏优化 */
@media (max-width: 768px) {
  .tk-row.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
  }

  /* 所有按钮禁止缩小 */
  .tk-row.actions > * {
    flex-shrink: 0;
  }  
  
  .tk-row.actions .tk-row-actions-start {
    margin-right: auto; /* 左对齐 */
  }  

  /* 隐藏元素 */
  .tk-row.actions .tk-row-actions-start .tk-input-image,
  .tk-row.actions > :nth-last-child(4) {
    display: none;
  }
  
  /* 表情框不被遮挡 */
  .OwO-body {
    position: relative;
    z-index: 100;
  }
}

#科学 #美化