在Hexo博客Next主题中添加吐个槽 | 李博的博客
0%

在Hexo博客Next主题中添加吐个槽

吐个槽,是腾讯公司于2016年底正式对外开放的一个轻量级、免费使用的3秒极速接入、即时提醒、专注产品经理角色的用户意见反馈服务平台,该平台前身是腾讯公司内部产品用户意见反馈收集的主要工具,适用于APP、公众号、H5、web、小程序等平台接入。为中小产品或团队快速搭建用户反馈通道,提供便捷的用户反馈解决方案,帮助产品提升服务水平和效率。

看到凉风有信大佬使用腾讯吐个槽,我觉得挺好玩的,然后也试了一试。
将腾讯的吐个槽植入到个人Hexo博客Next主题中十分简单。

效果如下:

鼠标覆盖上去以后

点击后的效果。

实现步骤:

注册腾讯吐个槽 ==> 链接
创建产品

创建成功会显示:

创建成功,您的吐个槽访问地址如下:
https://support.qq.com/product/你的产品id

植入代码

然后将下面代码放到/themes/next/layout/_partials/head/head.swig文件尾部。

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
<style>
#fixedLayer {
position: fixed;
right: 20px;
bottom: 60px;
z-index: 999;
}

.logo-wrap {
width: 28px;
height: 28px;
display: inline-block;
position: relative;
}

.logo-wrap .logo {
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
max-width: 28px;
max-height: 28px
}

.logo-wrap {
cursor: pointer;
opacity: .9;
padding: 11px 11px;
border-radius: 20px;
background: linear-gradient(-180deg, #dadfea, #ebedf5)
}

.logo-wrap:hover {
background: #418dff
}

.logo-wrap:hover .logo {
background: url(https://pyai.top/images/blog/tucao/tucao2.jpg)
}

.logo-wrap .logo {
width: 32px;
height: 28px;
background: url(https://pyai.top/images/blog/tucao/tucao1.jpg) }
</style>

<div id="fixedLayer" οnclick="alert('9099');">
<div class="logo-wrap">
<div class="logo">

</div>
</div>
</div>
<script type="text/javascript">
const btn = document.getElementById('fixedLayer');
//给按钮添加点击事件
btn.addEventListener('click', () => {
window.open("https://support.qq.com/product/你的产品id","_blank");
});
</script>
然后就可以和我一样了。

注意上面代码中的产品id修改成你的。
代码中有两个背景图片可以下载下来放到你自己的存储空间中。

如果对您有帮助,请我喝杯奶茶?