专栏首页惶心 - 技术博客Grouper.html: 分享群组的最佳方式
原创

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!谢谢各位大佬。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 添加全站 APlayer 播放器

    之前 @狗子 在群里秀他的 Aplayer,还 post 了博文。然后我一看,哇!这就是我想要的!

    惶心
  • 【Premium 文章】远行 要开心

    从今天开始,博客将会不定期发布完全原创的文章,与博客其余大部分文章不同,这些文章属于惶心的个人文学创作,不属于技术类教程。想了半天,这类文章以后就叫【Premi...

    惶心
  • 用一年的时间,去遇见

    白色而透明的屏幕里,像素点时刻变换着颜色。你看不见的黑暗里,只有风扇快速转动,发出微弱的响声。

    惶心
  • js 遮罩层 loading 效果

    //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来

    DougWang
  • 复旦NLP实验室NLP上手教程

    请完成每次练习后把report上传到QQ群中的共享文件夹中的“Reports of nlp-beginner”目录,文件命名格式为“task 1+姓名”。

    AINLP
  • Spring Boot Actuator监控页面报错解决

    今天在访问Spring Boot Actuator监控页面的时候报错了,之前都没遇到这种情况,大概的意思就是无权限访问 <html> <body> <...

    猿天地
  • Web前端-Vue.js必备框架(二)

    mustache插值和v-bind表达式。 vue生命周期,从创建,运行,到销毁,称为生命周期。

    达达前端
  • vue与微信小程序的一些区别,你知道吗?

    vue:使用v-if指令,v-else表示v-if的else块,v-else-if表示v-if 的“else-if 块”

    Javanx
  • 这次,我把Android事件分发机制翻了个遍

    作者:积木zz 链接:https://juejin.im/post/5eb3e0d6f265da7c002028cd 以下是原文:

    胡飞洋
  • 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 操作符重载和隐式类型转换

    C#中,某些类型会定义隐式类型转换和操作符重载。Unity中,有些对象也定义了隐式类型转换和操作符重载。典型情况有:UnityEngine.Object。Uni...

    用户1687945

扫码关注云+社区

领取腾讯云代金券