Teamie 主题

Celia 198 2

    Hello 大家好!Celia的博客已经几乎一个星期没发新帖了,主要是因为学校快出学期成绩报告,所以考试非常之多。就在这个星期,由于新加坡新冠病毒疑似病例的数量开始急剧上升,UWC 终于开始行动了起来:将一个星期后的复活节假期提前!在放假前的一天,学校在午饭时间组织了摇滚表演,所有同学都聚集在 Tent Plaza,狂欢了起来。我和另外几位同学则远离人群,躲在楼上的科学教室里。这简直有点儿好笑了——学校就是为了不让学生们交叉传染而暂时放假的,这摇滚表演却如同抓紧最后的机会一样,把全校师生再次全部聚集在了一起……

    总之,我们这些怕死党们待在楼上,无事可干。这摇滚表演使得下午的这一堂课推迟了15分钟,让我们更加无所事事。我思考了起来,既然到时候要放假,新冠病毒又如此猖狂,谁也说不准我们什么时候才能回到校园了。那么在这放假期间,全校的同学可能都要上网课,而老师已经说过了,如果真的要上网课,那么学校会使用 Teamie 这个我们十分熟悉的在线平台。Teamie 是我们每天都用的工具,老师们可以在上面发布作业、资源、小测试以及考试,学生们则需要完成上面老师发布的所有任务。看着 Teamie 界面熟悉的深蓝色,我感觉十分沉闷,不知其他同学如果同我一样,连续三年时间每天盯着这个界面,会不会也有这种感受。就在这时,我灵机一动——为何不写一个针对 Teamie 的美化插件,让同学们在假期期间使用 Teamie 时不再这么沉闷烦躁?点子来了,闷热的下午不再无聊,我马上行动了起来。

上图:Teamie 原本的样式

    按照我最初的想法,这个美化插件应该是一个按钮,在点击了一次之后能够给整个 Teamie 页面全部换色,变成更加鲜艳亮丽的样子。但这应该怎么实现呢?就在这之前,我了解到了一种叫做 “Bookmarklet” 东东。大家应该知道,在大多数浏览器的 Url 框下面有一行链接导航,只要点击导航栏中的一个链接,就可以快速到达那个目标页面。Bookmarklet 也是作为一个书签存在的,不过不同的是,这个书签中存储的不是链接,而是一段 javascript 代码。每次点击这个书签,浏览器就会执行那一段 javascript 代码。Bookmarklet 的作用十分多,例如如果将这个拖到导航栏,那么每次点击时,你将可以在不用付费的情况下浏览学习网站 study.com 中的任何一篇文章。将这个拖到导航栏,每次点击时,都可以把一个网页像一个文档一样自由编辑(只不过没有存储功能)。这些都是通过 Bookmarklet 实现的。那么,Bookmarklet 是否也能实现我想要的一键换色功能呢?

   既然我这篇博文都写出来了,这个功能最后当然是实现了。就用我设计的绿色主题作为例子吧,这是绿色主题的代码:

javascript:var style = document.createElement('style');
style.innerText='
/* Normal Navigation */
header .navbar, header .navbar.navbar-default {
    background-color: #85cac3;
}
/* Mouseover navigation */
header .navbar .navbar-nav > li > a:hover, header .navbar .navbar-nav > li > a.active, header .navbar .navbar-nav > .active > a, header .navbar .navbar-nav > .active > a:hover, header .navbar .search-help:hover {
    color: #ffffff;
    background-color: #79b5af;
}

/* Next to read buttons */
.bg-primary {
    background-color: #79b5af;
    color: #ffffff;
}

/* Floating Circular Buttons */

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #79b5af ! important;
    border-color: #79b5af ! important;
}

/* Buttons */
.btn.btn-share, .btn-group.open .btn-share.dropdown-toggle, .btn.btn-primary, .btn-block.btn-primary {
    background-color: #79b5af ! important;
    color: #ffffff;
    background-image: none;
    filter: none;
    border-color: #79b5af ! important;
}

.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #74ada8 ! important;
    border-color: #6a9c97 ! important;
}

';
var head=document.getElementsByTagName('head')[0];
head.appendChild(style);

    这个 Bookmarklet,简单来讲,就是创建了一个名为 “style” 的元素,将它存在一个叫做 “style” 的变量中。中间的一段代码主要是给 “style” 变量赋值,带上我想要在 Teamie 中加入的 CSS 样式。在一段样式最后,我再把 “style” 插入了网页 html 文件的 “head” 标签中。如果说原来的 “head” 是这样的:

<html>
<head>
<style>
<!---- Teamie原本的样式 ---->
</style>
</head>
<body>
<!---- 主要内容 ---->
</body>
</html>

那么执行了 Bookmarklet 后它会长这样:

<html>
<head>
<style>
<!---- Teamie主题的样式 ---->
</style>
<style>
<!---- 我设计的样式 ---->
</style>
</head>
<body>
<!---- 主要内容 ---->
</body>
</html>

    因为我的样式会覆盖掉一些原有的样式,因此 Teamie 外观就会改变。除了绿色之外,我还设计了粉色,紫色和渐变紫红色。如要获取这些 Bookmarklets 请前往 https://blog.becomingcelia.com/teamie-themes/。如果想要不同的颜色,也可以联系我定制。

上图:绿色主题

上图:紫色主题

上图:粉色主题

上图:渐变紫红色主题

    在这之后,我身边的一些同学陆陆续续地用上了这个插件,效果都不错。意见换色无疑很酷,但很多同学都抱怨说,一刷新,样式都没了,还要重新点击 Bookmarklet 换主题,真麻烦。我现在暂时也不知道有什么办法能够让这些脚本在用户的电脑上持续运行,但我找到了一个比较土的办法。那就是,让用户装上一个 Chrome 的拓展程序,让一段 javascript 代码在每一个网页中执行,这样就不用手动执行代码了。这个 Chrome 拓展程序的名字叫做 AutoScript,用法十分简单。

    第一步:点击此处安装 Chrome 拓展程序。

    第二步:前往 https://blog.becomingcelia.com/teamie-themes/ 将 Bookmarklet 拖到导航栏。

    第三步:在导航栏右键 Bookmarklet,选择 “编辑...” 或者 “Edit...”。

    第四步:在弹出来的窗口中复制 “链接” 或 “Url” 后面的内容。

    第五步:在 AutoScript 拓展程序中选择 “Add Script"

    第六步:在弹出来的页面中,“Name” 一栏填写主题的名字,在下面黑不溜秋的地方粘贴刚刚复制的 “链接” 或 “Url”

    第七步:删除代码最前面的 “javascript:”

    第八步:点击 “Save”

    第九步:到 Teamie 页面,给你想要的主题打上勾,刷新页面,完成!

    关于插件的介绍就到这里了。叮铃铃,上课啦!

标签: 编程 设计 事件 大开眼界

上一篇我的性格卡片

下一篇乡村一日

发表评论 (已有2条评论)

评论列表

2020-04-04 20:47:41

小鸡🐤,棒棒滴,虽然不大懂,但看得出你做得特别用心,加油!

2020-04-05 11:25:25

@婆婆 谢谢婆婆哈:)

登录
用户名
密码
注册
用户名
密码
确认密码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱