Grouper.html: 分享群组的最佳方式

Grouper 渲染图

介绍

之前看到 狗子https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个加群页面的存在很大程度上只是皮一下,然而我自己也有自己的群组【惶心剑阁】,于是乎也想要做一个页面。

还是修改折影轻梦的模板,不过这一回我加上了比较多的特性,并且做成了一个开源项目:hifocus/Grouper.html

预览一下

特性

感觉自己的构思能力还是挺好的,并且在 @保罗 的帮助下,再加上搜索引擎,实现了所有目前提出来的构思。

按照我在 GitHubCommit 顺序来吧:

首先呢我想到在中间的那个圆圈那里显示群的头像(原来是一个红色的叹号,代表危险警告)。然后我想到在 HTML 里面通过 Javascriptvar 出来群组的群号,然后嵌入到 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>

要在 modalcontent 里面显示相应群组的图片,并且实现自动化,代码如下:

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 速度。

实现

用户只需要填写 群号、群名称、加群链接、群介绍四个变量,即可实现:

  1. 根据群号自动获取群头像并且展示
  2. 根据群头像定义二维码中间的图片
  3. 根据加群链接自动定义加群按钮的指向以及二维码内容
  4. 根据群名称显示群名称以及在二维码界面显示 加入xxx
  5. 根据群介绍显示群介绍

总结

虽然看上去很容易,但是就算如此,我还是提交了超过 15 次的正式 Commit 。也就是说,整个项目前后修改了 15 次;这还没有包括错误的修改或者说实现(错误的代码我是不会提交的,除非自己没有发现错误且页面相对来说是正常的)。所以,要做好一个项目,其实并不简单。

这个项目以后应该不大会维护,除非我想到了新的功能。如果有任何的建议和意见,麻烦在下方留言或者到 GitHub 代码仓库去打开一个 issue,在这里感激不尽。

关于更多的使用方式以及性能表现,请查看 GitHub 代码仓库的 README.md 。README 直接用了英文写作并且没有相应的中文翻译,原因之一就是不想被太多人滥用:你如果能看懂英文,就请在合理范围内尽情地使用,如果看不懂,那么你还是找别家吧。

GitHub 地址:https://github.com/hifocus/Grouper

如果喜欢的话,麻烦给个 Star!谢谢各位大佬。

点赞
  1. 清秋暖冬说道:

    `博客扁平化的按钮`看起来很棒

发表评论

电子邮件地址不会被公开。必填项已用 * 标注