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

原创

惶心

修改于 2018-08-31 00:40:55

1.1K0

修改于 2018-08-31 00:40:55

文章被收录于专栏：惶心 - 技术博客惶心 - 技术博客

介绍

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

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

特性

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

按照我在 GitHub 的 Commit 顺序来吧：

首先呢我想到在中间的那个圆圈那里显示群的头像（原来是一个红色的叹号，代表危险警告）。然后我想到在 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 速度。