在drcom认证网络中使用路由器

fèihuà

自从上学期开始使用校园网以来感到诸多不便,最主要有三点:

  • 一个帐号限制一个终端。
  • 校园网的无线路由器质量太差经常丢包。
  • 用路由器连接校园网、再在路由器下用终端设备登陆是不行的,必须是校园网10.*.*.*的ip才能通过认证客户端(软件)登录校园网。

作为一个正在学习前端的萌新,chrome dev tools自带的工具不足以满足多设备测试的需求,需要用到实际硬件测试。也就是说,我需要把好几个设备连接到网络,而这与我校校园网“只能连接一个终端”的规定冲突。

上个学期我用手机连接校园网,USB共享给电脑,然后再从电脑建立无线热点的方式勉强过渡。但网络质量始终没有路由器好,经常出现掉线、丢包的情况。

有了一个学期使用坑爹校园网的经历,我总结出了以下几点:

  • 限制路由器登陆的机制存在于认证客户端
  • 以nat转发方式使多个终端连接到网络是可行的
  • 我校的认证客户端带有心跳包

于是这个学期开学提前了几天过来,解决掉了这个问题,写出来给大家参考参考。

请注意,这篇文章的受众不是小白,而是有一定Linux基础的人--如果你从来没有用过Linux,从现在开始试试吧!这不是手把手输命令的教程,而是某类设备的安装流程参考,希望对你有所帮助。


准备工作:

  1. 一个性能够用,可以安装openwrt的路由器并支持usb挂载,这样安装软件才不用顾忌磁盘空间不足。
  2. 一个大于8G容量的U盘,质量要好,OpenWRT将安装到U盘上。可以直接把/overlay挂载到U盘,这样比较稳,就算U盘出问题也能通过路由器flash里的固件启动,不会变砖。
  3. 网线两根,长度自己量。
  4. 一部安装了sftp客户端、wireshark和python 2.x的电脑。linux和windows均可,但推荐linux,win下还需要加装putty。顺便一提,我使用的是debian。
  5. 一旦变砖,请购买一根合适的TTL线,若干杜邦线(六根以上),熟悉你买的路由器的拆机方法,并能够熟练地锡焊。
  6. 一旦变砖,你需要熟悉SecureCRT软件的操作和TTL刷机的原理。

进入正题:

先将OpenWRT安装到路由器的U盘里,不同型号有不同的操作,只要你的型号在OpenWRT的设备支持列表里,网上就能找到相应的刷机方法,这点不用担心。将固件接刷入路由器后,安装下面三个软件包,分别是挂载点app、ext4文件系统支持和usb驱动。然后在路由器Web管理界面的挂载点(mount point)选项将外置储存挂载到/overlay,或者自行修改磁盘分区定义文件来挂载/etc/config/fstab。如果选择用后者操作,务必通过磁盘uuid来挂载。

opkg update
opkg install block-mount kmod-fs-ext4 kmod-usb-storage

在操作过程中,你需要把路由器看作是一个弱性能的服务器,又或者看成与家用主机架构不同的主机,本质上它就是一台接不了显示器的多网卡主机。再说OpenWRT,它实质上是一个嵌入式Linux系统,部分路由器厂商会基于系统此开发他们的路由器界面。我们要安装的是原始的OpenWRT。

在经过与路由器和搜索引擎的艰苦斗争后,你终于装上了OpenWRT,这样我们就可以进入正题了。

  1. 开启OpenWRT的ssh,网上教程一大把。
  2. 将路由器连接到网络。如果没有有线网络,那就去luci里面用无线连接。我们需要用网络来安装vsftpd、python。其中vsftpd用于建立sftp和ftp服务,python是校园网认证客户端的运行环境。如果磁盘空间空余很多,还可以安装wget、git等工具。
  3. 在电脑上按照drcom-generic这个项目的wiki操作。
  4. 按照wiki操作之后,你可以往crontab中增加一条命令用于断网后自动重连:
    */1 * * * * drcom &
  5. 用路由器连接到校园网,然后愉快地上网吧!

(此处我做过修改,只作为演示)


其它问题:

如果我要在学校其他地方上网,那岂不是会顶掉路由器的账号?而路由器又运行了每一分钟登陆一次的脚本,岂不是又会顶掉刚刚连接上的设备?

这里有两个解决方法:

  1. 宿舍里只有你一个人用这个路由器 → 出门前拔下路由器
  2. 和室友一起用 → 首先确认局域网内没有设备隔离,即局域网内任意设备可以互连任意端口,然后在路由器上搭建代理服务器。可选的方案有openvpn、shadowsocks和v2ray,我推荐用shadowsocks,因为编译好的包一大把,配置还简单。

首先在路由器上安装ddns

opkg install luci-app-ddns

然后配置ddns服务。推荐用3322.org。ip地址来源选择网络、网络选择wan,这样你的域名会解析到内网ip,配置好后启动服务。

第二步安装shadowsocks,网上教程多得是。写好配置文件并启动ssserver后,就能通过shadowsocks客户端全局代理上网了。shadowsocks的服务器地址填写为上面申请到的动态DNS地址,一般认证网络不会禁用DNS,所以即使没有认证也能解析。

至此,大致流程已经讲完,有疑惑可以在评论里提出来,反正我也不一定会回答

:hover伪类选择器设置背景图片时闪烁的解决办法

今天遇到了【用:hover使光标悬停在A时改变B的背景,但悬停时背景一直闪烁】这种常见问题。

于是心血来潮把解决方法和原理写出来,方便初学者避开这些容易遇到的小坑。

HTML代码

<div id="div">
<div id="div1"><center><a>ssssssssssssssssssss</a></center>
</div>
<div id="div2">
</div>
</div>

CSS代码

#div1 {
width: 350px;
position: fixed;
left: 0;
right: 0;
margin: auto;
}

#div2 {
background: url(https://seek.moe/MyPixivFav/_________%209.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}

#div1:hover + #div2, #div1:active + #div2 {
filter: blur(4px);
}

演示

在有鼠标的设备上可以看到闪烁,在触屏设备上按住文字可以看到文字消失(即#div1被遮罩了)

其实原因很简单,由于使用了position属性,且#div1和#div2在同一个#div中,所以默认z-index:auto,即堆叠顺序与父元素相等。

#div1中a标签的内容在#div2的背景的上层,所以:hover可以被触发。

但是当

#div1:hover + #div2{}

被触发时,#div2处于活动状态出现在上层。此时随着#div1被遮罩,上面这条css规则失效,如此反复,就形成了我们看到的闪烁。

解决方法显而易见,只需指定#div1和#div2的z-index属性,使#div2的z-index值比#div1的小,即#div2永远在#div1下层,就不会闪烁了。

即追加以下两条样式:

#div1 { z-index:2; }
#div2 { z-index:1; }

追加之后再用触屏设备点击文字,会发现文字一直处于显示状态(#div1始终处于上层),马上动手粘贴到上面的codepen里试试吧?

如果对本文提到的:hover很陌生,可以查看之前的文章:hover伪类选择器常见用法示例

:hover伪类选择器常见用法示例

光标悬停在父元素上时更改子元素样式

HTML代码
<div id="father">
<div id="son">
<center>
<a href="https://urusai.me" target="_blank" class="links" id="a1">🍭前往博客</a><a class="links"> ・ </a><a class="links" href="https://debugging.work" target="_blank" id="a2">🍢前往CV页</a><a class="links"> ・ </a><a class="links" href="https://ide.seek.moe" target="_blank" id="a3">🍡前往IDE</a>
</center>
</div>
</div>
CSS代码
/*定义动画*/
/*循环摆动*/
@keyframes thrill {
from {
transform: rotate(2deg);
}
to {
transform: rotate(-2deg);
}
}
/*从下方进入*/
@keyframes comeIn {
from {
bottom: -20px;
}
to {
bottom: 20px;
}
}
/*father样式*/
#father {
width: 350px;
padding: 16px 0 16px 0;
position: fixed;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
border-radius: 16px;
/*绑定动画*/
animation: thrill 2s infinite alternate ease-in-out;
}
/*son样式*/
#son {
width: 350px;
padding: 16px 0 16px 0;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
margin: auto;
border-radius: 16px;
background: rgba(255,150,173,.4);
box-shadow: 0 3px 6px 0 rgba(0,0,0,.2);
/*绑定动画,此处为动画嵌套*/
animation: comeIn .5s;
}
/*调整不同屏幕下的宽度*/
@media all and (min-width:1280px){
#comeIn, #blog{
width:380px;
}
}
/*优化小屏体验(滑稽)*/
@media all and (max-width:369px){
#blog
{
display:none;
}
}
/*鼠标悬停时或激活时更改背景颜色*/
#son:hover,#son:active {
background-color: rgba(255,150,173,.8);
}
/*文本样式*/
.links {
width: 100%;
text-decoration: none;
color: black;
font-weight: 300;
padding: 16px 0 16px 0;
}

/*div激活时,改变.links(即文本)的颜色,具体用法为上级元素(的id或class):hover .下级元素(的id或class){样式}*/
div:hover .links {
color: #f2f2f2;
}

/*文本激活时的颜色*/
#a1:hover, #a2:hover, #a3:hover {
color:white;
}

光标悬停时改变兄弟元素的CSS样式

HTML代码
<div id="father">
<div id="son1">bbb</div>
<div id="son2">ccc</div>
</div>
CSS代码
/*设置字体为红色*/
#son1,#son2 {
color:red;
}
/*当光标悬停于#son1时,son2的字体颜色从红变黑,与上面的示例相比较,关键在于一个+号,以及兄弟元素之间不得有其他元素隔断。另外,它还可以结合nth-child() 选择器灵活使用,这里就不细说了,请自行编写代码去实验理解。规则为共同父元素(的id或class) 悬停的子元素(的id或class):hover + 要改变的子元素(的id或class){样式}*/
#father #son1:hover + #son2 {
color:black;
}
 更多请参阅CSS 相邻兄弟选择器

效果展示

展示1:
SeekMoe

展示2:

bbb
ccc

图层混合模式——变暗与正片叠底

本文适合已大致了解:色彩空间的工作方式图层的基本知识通道的基础知识的读者。

图层混合模式,顾名思义就是将不同图层的色彩、明度、纯度以不同的计算方式混合到一起。通过这个强大的工具,我们可以轻易地制作合成图片、方便地润饰照片,它的强大程度完全取决于你的想法。Photoshop图层功能的核心除了蒙版以外、另一个经常让初学者摸不着头脑的就是图层混合模式了,但实际上只要对计算公式进行过直观的试验,就会明白这些东西理解起来其实毫不费劲。

我们接下来的操作都基于8bit RGB mode,这个设置可以在菜单栏→图像→模式中更改。


准备:

在开始之前,我们需要为更好地理解这个工具做一些准备工作

  1. 新建一个正方形画布,大小无所谓了,放得下五个层灰阶就行。
  2. 使用渐变工具将画布从纯黑到纯白填满,然后复制一层,将复制出来的图层旋转九十度。
  3. 使用色调分离工具将两个图层分别分为五个灰阶。结果如下图所示
  4. 将调整图层与图像图层合并,这样我们就得到了两个亮度从0到255平均分成5阶的两个图层。
  5. 接下来的实验会在此基础上进行。

变暗(Darken):

图层1副本更改为变暗,我们得到如下图像:

变暗:查看每个通道中的颜色信息,并选择基色或混合色中较暗的颜色作为结果色。将替换比混合色亮的像素,而比混合色暗的像素保持不变。

——Adobe官方手册

注:下方图像的颜色称为基色,上方图像(混合模式为变暗的图层,也就是图层1副本)的颜色称为混合色,得到最终的颜色称为结果色。

变暗这一混合模式通过如下逻辑实现:

如果
基色亮度>混合色亮度

结果色=混合色
反之
结果色=基色

显然可以看出,变暗是对两个图层相同位置的颜色亮度作比较,然后取较暗(明度较低)的作为结果色。亮度的对比是基于hsl模型的,对颜色的明度属性(lightness)进行比较取其值小的那一个颜色。

这个混合模式在排版中会经常用到,通常可以与正片叠底达到同样的效果——列如将一张白底图片贴入到另一张白底图片中。


正片叠底(Multiply):

图层1副本更改为正片叠底,我们得到如下图像:

正片叠底:查看每个通道中的颜色信息,并将基色与混合色进行正片叠底。结果色总是较暗的颜色。任何颜色与黑色正片叠底产生黑色。任何颜色与白色正片叠底保持不变。当您用黑色或白色以外的颜色绘画时,绘画工具绘制的连续描边产生逐渐变暗的颜色。这与使用多个标记笔(mark pen)在图像上绘图的效果相似。

——Adobe官方手册

 

正片叠底这个翻译看起来高大上,事实上就是multiply,相乘。顾名思义,这是用公式:

混合色×基色/255=结果色

计算的(在我们的示例中,191×191/255≈143。与变暗不同的是,这个计算是基于rgb模型的,三个通道的亮度值都分别以此计算)。而通过公式可以又推出:任何颜色与白色正片叠底都保持不变(例如a×255/255=a,a为(0,255)中的任意值)、任何颜色与黑色正片叠底都是黑色(即0×a/255=0)。

这就是上面说的变暗和正片叠底在某些时候效果一致的原因。

从直观上看,正片叠底是以降低亮度的方式把两张图片叠加在一起,模拟的是颜料的混合(另一种对色彩叠加的模拟是滤色,但那是光的混合,以后有机会再讲)。所以,正片叠底常常应用于降低图像亮度等操作。


亲自试一试:

保存这三张图片并尝试在不使用选取工具的前提下仿照样例把它们拼到一起。

样例:

すかもか#6日亚已下单,说是六月底才能到,等着被剧透一脸吧😑😑😑
据推特上的剧透:肥奥多尔和菈琪旭都凉凉了