之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个加群页面的存在很大程度上只是皮一下,然而我自己也有自己的群组【惶心剑阁】,于是乎也想要做一个页面。
还是修改折影轻梦的模板,不过这一回我加上了比较多的特性,并且做成了一个开源项目:hifocus/Grouper.html
感觉自己的构思能力还是挺好的,并且在 @保罗 的帮助下,再加上搜索引擎,实现了所有目前提出来的构思。
首先呢我想到在中间的那个圆圈那里显示群的头像(原来是一个红色的叹号,代表危险警告)。然后我想到在 HTML
里面通过 Javascript
先 var
出来群组的群号,然后嵌入到 QQ API 里面获得高清的头像,再用 Javascript
修改相应标签的 CSS
属性,达到自动切换群头像的效果。(这段代码是保罗帮助我实现的,他在向我演示的时候用了一个变量 huangxinnb
,所以我这里也用了一个 baoluonb
)
var groupnumber = "579332933";
var baoluonb = "https://p.qlogo.cn/gh/" + groupnumber + "/" + groupnumber + "/";
document.getElementById("i").style.background = "url('" + baoluonb + "') no-repeat center/cover";
接着,我想要实现 “显示加群二维码” 这功能。由于原来折影轻梦的版本里的 Button 样式我不是太喜欢,所以这里引入了我比较喜欢的 Spectre.CSS
,这个框架样式好看,体积小,而且还带有 Font-Family
的优化,是我喜欢的类型,所以就引用了。
一开始我按照我的习惯在 Style.CSS
里面用 @import
引用了这个 CSS
,但是后来想到(同时也有大佬提议了)会拖慢加载速度(即浏览器需要先加载 Style.CSS
才会知道还要加载 Spectre.CSS
,考虑到 Style.CSS
不会自带 CDN,但是 Spectre.CSS
可以从全球速度都非常快的 jsDelivr 加载,这样做反而本末倒置了,所以就一并在 HTML
的头部引入了。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/picturepan2/spectre@0.5.3/dist/spectre.min.css" integrity="sha256-eBag0DNksOEjebVrDSBxOYWaIsRA5RBzz/PWQtkgmvM=" crossorigin="anonymous">
<link rel="stylesheet" href="elements/style.min.css">
用了新的 CSS
框架以后,原来按钮的样式就无法应用了,保罗建议我把按钮放在一个 p
标签里面,然后通过 CSS 设置 text-align: center 属性,顺带设置了一个 Opacity
(透明度)属性。
<p class="middlebtn">
Some Buttons Here
</p>
.middlebtn {
text-align: center;
margin-left: auto;
margin-right: auto;
opacity: 0.85;
}
按钮样式弄好了,接下来就是实现加群二维码的功能了。 把显示二维码按钮设置成打开一个 Model
:
<a href="#showqrcode" class="btn btn-primary desktop">显示二维码</a>
<div class="modal" id="showqrcode">
<div class="modal-container" role="document">
<div class="modal-header">
<a href="#" class="btn btn-clear float-right" aria-label="Close"></a>
<div id="titleinfo" class="modal-title h5" style="text-align: center">
扫一扫二维码 加入群组
</div>
</div>
<div class="modal-body">
<div class="content">
Your Modal Content Here
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
要在 modal
的 content
里面显示相应群组的图片,并且实现自动化,代码如下:
var img = document.createElement("img");
img.src = "https://api.imjad.cn/qrcode?text=" + joinlink + "&logo=" + baoluonb + "&size=300&level=L"
img.width = 300;
img.height = 300;
document.querySelector(".modal-body .content").appendChild(img);
二维码的按钮其实没必要在手机端显示,因为手机可以直接点击链接一键跳转 QQ。所以,需要在手机端隐藏显示二维码。之前可以看到我给显示二维码的按钮加了一个 desktop
属性:
<a href="#showqrcode" class="btn btn-primary desktop">显示二维码</a>
需要在 CSS
里面这样设置:
@media all and (max-width: 800px) {
.desktop {
display: none;
}
}
既然上面已经 var
了加群链接,就干脆利用起来,放到加群按钮里面:
<button class="btn btn-primary" onclick="openbox()">加入群组</button>
function openbox() {
window.open(joinlink, "_blank", "toolbar=no,scrollbars=no,visible=none,width=500,height=300");
}
就可以打开一个比较小的 iframe
(移动端则是会直接跳转 QQ),然后拉起 QQ。
这个时候我把所有的 Javascript
综合起来,就出现了以下两段 Javascript
:
// Fill In Your QQ Group Number And Join Link
var groupnumber = "579332933";
var joinlink = "http://qm.qq.com/cgi-bin/qm/qr?k=F2u_B2RzMJYVkIFAy8aD_9TdMgMDnRF6";
// Fill In Your QQ Group Name And Description
var groupname = "惶心剑阁";
var groupdescription = "黄埃散漫风萧索 云栈萦纡登剑阁";
var baoluonb = "https://p.qlogo.cn/gh/" + groupnumber + "/" + groupnumber + "/";
var img = document.createElement("img");
img.src = "https://api.imjad.cn/qrcode?text=" + joinlink + "&logo=" + baoluonb + "&size=300&level=L"
img.width = 300;
img.height = 300;
document.querySelector(".modal-body .content").appendChild(img);
document.getElementById("i").style.background = "url('" + baoluonb + "') no-repeat center/cover";
function openbox() {
window.open(joinlink, "_blank", "toolbar=no,scrollbars=no,visible=none,width=500,height=300");
}
document.getElementById("name").innerHTML = groupname;
document.getElementById("description").innerHTML = groupdescription;
document.getElementById("titleinfo").innerHTML = "扫一扫二维码 加入" + groupname;
以及对应的 HTML
:
<h2 id="name"></h2>
<p id="description" style="font-weight: lighter"></p>
最后加上了 DNS Prefetch Header
,以及相应的 SEO 信息:
<head>
<title>加入群组 - 惶心剑阁</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="Keywords" content="Grouper,加群页面,加群模板,惶心剑阁,惶心,惶心博客,惶心 技术博客" />
<meta name="Description" content="黄埃散漫风萧索 云栈萦纡登剑阁 - 这是惶心的剑阁"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/picturepan2/spectre@0.5.3/dist/spectre.min.css" integrity="sha256-eBag0DNksOEjebVrDSBxOYWaIsRA5RBzz/PWQtkgmvM=" crossorigin="anonymous">
<link rel="stylesheet" href="elements/style.min.css">
<link rel="shortcut icon" type="image/x-icon" href="https://avatar.mixcm.cn/github/hifocus?s=32">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://avatar.mixcm.cn">
<link rel="dns-prefetch" href="https://api.imjad.cn">
<link rel="dns-prefetch" href="https://p.qlogo.cn">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
</head>
加上 <!DOCTYPE html>
头部以增加兼容性,以及加上 lang
设置开启 Spectre.CSS
对于特定语言的 Font-Family
设置:
<!DOCTYPE html>
<html lang="zh">
然后加上 MetingJS 播放器,以及 Google Analytics 统计代码:
<!-- MetingJS start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<div class="aplayer" data-id="454790763" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="false" data-volume="1.0"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>
<!-- MetingJS end -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111752336-7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-111752336-7');
</script>
整一个项目就做好了;你可以通过 https://site.qrcdn.com/HuangXinJianGe/index.html 体验下 CDN 加持的 Grouper 速度。
用户只需要填写 群号、群名称、加群链接、群介绍四个变量,即可实现:
虽然看上去很容易,但是就算如此,我还是提交了超过 15 次的正式 Commit
。也就是说,整个项目前后修改了 15 次;这还没有包括错误的修改或者说实现(错误的代码我是不会提交的,除非自己没有发现错误且页面相对来说是正常的)。所以,要做好一个项目,其实并不简单。
这个项目以后应该不大会维护,除非我想到了新的功能。如果有任何的建议和意见,麻烦在下方留言或者到 GitHub 代码仓库去打开一个 issue
,在这里感激不尽。
关于更多的使用方式以及性能表现,请查看 GitHub 代码仓库的 README.md
。README 直接用了英文写作并且没有相应的中文翻译,原因之一就是不想被太多人滥用:你如果能看懂英文,就请在合理范围内尽情地使用,如果看不懂,那么你还是找别家吧。
GitHub 地址:https://github.com/hifocus/Grouper
如果喜欢的话,麻烦给个 Star
!谢谢各位大佬。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。